你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> iOS完成無窮輪回圖片輪播器的封裝

iOS完成無窮輪回圖片輪播器的封裝

編輯:IOS開發綜合

 項目中許多時刻會碰著這個需求,完成多張圖片的無窮輪回輪轉,之前做過,項目中幾個處所的都用到了,其時沒有封裝,幾個處所都拷貝簡直一樣的代碼,代碼復用性欠好,明天沒事封裝了一下,應用起來比擬簡略。

  起首,說說我完成輪回輪轉圖片的思惟,在UIScrollView中添加了3個UIImageView,並排分列,我們看到的永久只是第二個UIImageView,如許的話,你一向可以向左,向右滑動,當你向左滑動是,這是你滑動到了最初一個UIImageView不克不及在向右邊滑動了,這時候,我在前面靜靜的將第二個UIImageView圖片設置為以後要顯示的圖片,調劑UIScrollView的contentOffset屬性,如:

[_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO](應用者基本感到不出來這類變更)所以,此時,你看到的又是第二個UIImageView,所以此時你又可以向左滑動,當你向左邊滑動時刻處置相似,招致成果你可以向右邊,左邊無線輪回輪轉圖片。

 JGCirculateSwitchImgView.h頭文件

@interface JGCirculateSwitchImgView : UIView

@property(nonatomic,strong)NSArray *imgUrlArr;

@end

  頭文件中只要一個須要設置的成員變量imgUrlArr數組,就是你要顯示圖片途徑的數組,將經由過程這個數組拜訪圖片。

JGCirculateSwitchImgView.m文件

typedef NS_ENUM(NSInteger, SwitchDirection)

{

//未勝利扭轉

  SwitchDirectionNone = -1,

//向右扭轉圖片

 SwitchDirectionRight = 0,

//向左訓轉圖片

SwitchDirectionLeft = 1,

};

界說了SwitchDirection列舉,表現圖片向左,向右輪轉,或許甚麼也不做。

//默許5秒訓轉圖片一次,可以依據須要轉變

#define WiatForSwitchImgMaxTime 5

#import "JGCirculateSwitchImgView.h"

#import "UIImageView+WebCache.h"

@interface JGCirculateSwitchImgView ()

//底部UIScrollView

@property(nonatomic,weak)UIScrollView *contentScrollView;

//顯示頁碼的UIPageControl控件

@property(nonatomic,weak)UIPageControl *pageControlView;

//用保留以後UIPageControl控件顯示確當前地位

@property(nonatomic,assign)NSInteger currentPage;

//用於保留以後顯示圖片在圖片urlArr數組中的索引

@property(nonatomic,assign)NSInteger currentImgIndex;

//UIScrollView上的三個UIImgaView這裡經由過程3個UIImageView完成無窮輪回圖片輪轉

@property(nonatomic,weak)UIImageView *imgView1;

@property(nonatomic,weak)UIImageView *imgView2;

@property(nonatomic,weak)UIImageView *imgView3;

@property(nonatomic,assign)BOOL isDragImgView;

//SwitchDirection類型,用於保留滑動的偏向

@property(nonatomic,assign)SwitchDirection swDirection;

@end

-(id)initWithFrame:(CGRect)frame

{

    if (self = [super initWithFrame:frame])

    {

       [self createContentScrollView];

       [self createPageControlView];

      //默許第一頁

      _currentPage = 0;

      //默許顯示第一張圖片

      _currentImgIndex = 0;

     _isDragImgView = NO;

     _swDirection = SwitchDirectionNone;

   }

     return self;

}

創立UIScrollView代碼

-(void)createContentScrollView

{

    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];

    scrollView.delegate = self;

    scrollView.showsHorizontalScrollIndicator = NO;

    scrollView.shouldGroupAccessibilityChildren = NO;

    scrollView.pagingEnabled = YES;

    [self addSubview:scrollView];

    _contentScrollView = scrollView;

}

創立UIPageControl

-(void)createPageControlView

{

    UIPageControl *pageControlVw = [[UIPageControl alloc] init];

   pageControlVw.frame = CGRectMake(0, 0, 80, 20);

   pageControlVw.center = CGPointMake(self.center.x, self.bounds.size.height - 20);

   pageControlVw.backgroundColor = [UIColor redColor];

   _pageControlView.pageIndicatorTintColor = [UIColor yellowColor];

   _pageControlView.currentPageIndicatorTintColor = [UIColor purpleColor];

   [self addSubview:pageControlVw];

   _pageControlView = pageControlVw;

}

//value對Count取模,並包管為正值

//這裡很主要,是完成無窮輪回的主要的一步,好比如今顯示的是第一張圖片,_currentImgIndex=0,向左滑動後就顯示_currentImgIndex+1張圖片,可是_currentImgIndex+1能夠回年夜於_imgUrlArr的數組count,這裡取模,其次還要包管為負數,好比,假如向左邊滑動是就顯示_currentImgIndex-1張圖片,_currentImgIndex-1取模也能夠為正數,此時加上count包管為負數

-(NSInteger)switchToMValue:(NSInteger)value Count:(NSInteger)count

{

    NSInteger result = value % count;

    return result >=0 ? result : result + count;

}

重寫imgUrlArr的set辦法

-(void)setImgUrlArr:(NSArray *)imgUrlArr

{

    _imgUrlArr = [imgUrlArr copy];

    NSInteger count = imgUrlArr.count;

    if (count <= 0 )

    {

      return;

    }

   //假如只顯示一張圖片,那就沒有扭轉情形

   if (count == 1)

   {

       UIImageView *imgView = [[UIImageView alloc]init];

       imgView.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);

      [_contentScrollView addSubview:imgView]; 

      _pageControlView.numberOfPages = 1; 

      _pageControlView.currentPage = 0;

      _contentScrollView.contentSize = CGSizeMake(self.bounds.size.width, self.bounds.size.height);

      NSURL *imgUrl = [NSURL URLWithString:imgUrlArr[0]];

     [imgView sd_setImageWithURL:imgUrl placeholderImage:nil];

     return;

   }

   if (count > 1)

   {

         //這裡只應用3個ImgView輪轉多張圖片,數目2,3,4,5,6...

         for(int i = 0; i < 3 ;i++)

         {

             UIImageView *imgView = [[UIImageView alloc] init];

             imgView.frame = CGRectMake(i * self.bounds.size.width, 0, self.bounds.size.width, self.bounds.size.height);

             imgView.layer.masksToBounds = YES;

             NSString *urlStr = urlStr = _imgUrlArr[[self switchToValue:i-1 Count:count]];

             NSURL *imgUrl = [NSURL URLWithString:urlStr];

              [imgView sd_setImageWithURL:imgUrl placeholderImage:nil];

              if (i == 0)

              {

                  _imgView1 = imgView; 

               }

               else if (i == 1)

              {

                  _imgView2 = imgView;

              }

              else if (i == 2)

              {

                 _imgView3 = imgView; 

              }

              [_contentScrollView addSubview:imgView];

         }

        _pageControlView.numberOfPages = count; 

        _pageControlView.currentPage = 0;

        _contentScrollView.contentSize = CGSizeMake(self.bounds.size.width * 3,   self.bounds.size.height);

        _currentImgIndex = 0;

       [_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];

      dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0),  ^{

           //輪回輪轉圖片

           [self switchImg];

     });

   }

}

5秒扭轉圖片

-(void)switchImg

{

     while (1)

     {

          [NSThread sleepForTimeInterval:WiatForSwitchImgMaxTime];

          //假如正在拖拽圖片,此次作廢 

           if (_isDragImgView) {

               continue;

           }

            _currentPage = [self switchToValue:_currentPage + 1 Count:_imgUrlArr.count];

            dispatch_async(dispatch_get_main_queue(), ^{

                  _pageControlView.currentPage = _currentPage;

                 _contentScrollView.contentOffset = CGPointMake(2 * self.bounds.size.width, 0);

                 [self reSetImgUrlWithDirection:SwitchDirectionLeft];

         });

     }

}

當手動扭轉圖片

-(void)switchImgByDirection:(SwitchDirection)direction

{

     if (direction == SwitchDirectionNone) {

         return;

     }

     [self reSetImgUrlWithDirection:direction];

     [_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];

}

扭轉圖片後從新調劑3個UIImageView顯示的內容,照實現思惟所述

-(void)reSetImgUrlWithDirection:(SwitchDirection)direction

{

     if (direction == SwitchDirectionRight) {

         [_imgView1 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex - 2 Count:_imgUrlArr.count]]] placeholderImage:nil];

         [_imgView2 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex - 1 Count:_imgUrlArr.count]]] placeholderImage:nil];

         [_imgView3 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex Count:_imgUrlArr.count]]] placeholderImage:nil];

         _currentImgIndex = [self switchToValue:_currentImgIndex - 1 Count:_imgUrlArr.count];

      }

     else if(direction == SwitchDirectionLeft)

     {

          [_imgView1 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex Count:_imgUrlArr.count]]] placeholderImage:nil];

          [_imgView2 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex + 1 Count:_imgUrlArr.count]]] placeholderImage:nil];

          [_imgView3 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex + 2 Count:_imgUrlArr.count]]] placeholderImage:nil];

          _currentImgIndex = [self switchToValue:_currentImgIndex + 1 Count:_imgUrlArr.count];

     }

}

完成UIScrollVie3個署理辦法

#pragma mark -------------Delegate---------------

//記住滑動的偏向

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

    static float newx = 0;

    static float oldx = 0;

   newx= scrollView.contentOffset.x ;

   if (newx != oldx )

   {

       if (newx > oldx)

       {

           _swDirection = SwitchDirectionLeft;

       }else if(newx < oldx)

      {

          _swDirection = SwitchDirectionRight;

      }

      oldx = newx;

   }

}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView

{

    _isDragImgView = YES;

}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

     //向左扭轉

     if (_swDirection == SwitchDirectionLeft)

     {

          _currentPage = [self switchToValue:_currentPage + 1 Count:_imgUrlArr.count];

     }//向右扭轉

     else if (_swDirection == SwitchDirectionRight)

     {

         _currentPage = [self switchToValue:_currentPage - 1 Count:_imgUrlArr.count];

     }

     _pageControlView.currentPage = _currentPage;

     if (_swDirection != SwitchDirectionNone) {

     [self switchImgByDirection:_swDirection];

     }

    _isDragImgView = NO;

}

以上為完成代碼,如今看看怎樣用,例如:

JGCirculateSwitchImgView *jView = [[JGCirculateSwitchImgView alloc] initWithFrame:CGRectMake(20,100, 280, 250)];

NSArray *imgUrlArr = @[@"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201119031647109.jpg",

@"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201116215754685.jpg",

@"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201115524758041.jpg",

@"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201114495822068.jpg",

@"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201107522493367.jpg"];

jView.imgUrlArr = imgUrlArr;

[self.view addSubview:jView];

可以看到封裝以後,代碼的重用性很高,應用起來很簡略,就這麼4句代碼便可以完成圖片的無窮輪回輪轉。

以上就是本文的全體內容,願望對年夜家的進修有所贊助。

【iOS完成無窮輪回圖片輪播器的封裝】的相關資料介紹到這裡,希望對您有所幫助! 提示:不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦!

  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved