項(xiàng)目中很多時候會碰到這個需求，實(shí)現(xiàn)多張圖片的無限循環(huán)輪轉(zhuǎn)，以前做過，項(xiàng)目中幾個地方的都用到了，當(dāng)時沒有封裝，幾個地方都拷貝幾乎一樣的代碼，代碼復(fù)用性不好，今天沒事封裝了一下，使用起來比較簡單。
首先，說說我實(shí)現(xiàn)循環(huán)輪轉(zhuǎn)圖片的思想，在UIScrollView中添加了3個UIImageView，并排排列，我們看到的永遠(yuǎn)只是第二個UIImageView，這樣的話，你一直可以向左，向右滑動，當(dāng)你向左滑動是，這是你滑動到了最后一個UIImageView不能在向左邊滑動了，這時，我在后面悄悄的將第二個UIImageView圖片設(shè)置為當(dāng)前要顯示的圖片，調(diào)整UIScrollView的contentOffset屬性，如：
[_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO]（使用者根本感覺不出來這種變化）所以，此時，你看到的又是第二個UIImageView，所以此時你又可以向左滑動，當(dāng)你向右邊滑動時候處理類似，導(dǎo)致結(jié)果你可以向左邊，右邊無線循環(huán)輪轉(zhuǎn)圖片。
JGCirculateSwitchImgView.h頭文件
@interface JGCirculateSwitchImgView : UIView@property(nonatomic,strong)NSArray *imgUrlArr;@end
頭文件中只有一個需要設(shè)置的成員變量imgUrlArr數(shù)組，就是你要顯示圖片路徑的數(shù)組，將通過這個數(shù)組訪問圖片。
JGCirculateSwitchImgView.m文件
typedef NS_ENUM(NSInteger, SwitchDirection){//未成功旋轉(zhuǎn) SwitchDirectionNone = -1,//向右旋轉(zhuǎn)圖片 SwitchDirectionRight = 0,//向左訓(xùn)轉(zhuǎn)圖片SwitchDirectionLeft = 1,}; 定義了SwitchDirection枚舉，表示圖片向左，向右輪轉(zhuǎn)，或者什么也不做。
//默認(rèn)5秒訓(xùn)轉(zhuǎn)圖片一次,可以根據(jù)需要改變#define WiatForSwitchImgMaxTime 5#import "JGCirculateSwitchImgView.h"#import "UIImageView+WebCache.h"@interface JGCirculateSwitchImgView ()//底部UIScrollView@property(nonatomic,weak)UIScrollView *contentScrollView;//顯示頁碼的UIPageControl控件@property(nonatomic,weak)UIPageControl *pageControlView;//用保存當(dāng)前UIPageControl控件顯示的當(dāng)前位置@property(nonatomic,assign)NSInteger currentPage;//用于保存當(dāng)前顯示圖片在圖片urlArr數(shù)組中的索引@property(nonatomic,assign)NSInteger currentImgIndex;//UIScrollView上的三個UIImgaView這里通過3個UIImageView實(shí)現(xiàn)無限循環(huán)圖片輪轉(zhuǎn)@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]; //默認(rèn)第一頁 _currentPage = 0; //默認(rèn)顯示第一張圖片 _currentImgIndex = 0; _isDragImgView = NO; _swDirection = SwitchDirectionNone; } return self;} 創(chuàng)建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;} 創(chuàng)建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取模,并保證為正值//這里很重要，是實(shí)現(xiàn)無限循環(huán)的重要的一步，比如現(xiàn)在顯示的是第一張圖片，_currentImgIndex=0,向左滑動后就顯示_currentImgIndex+1張圖片，可是_currentImgIndex+1可能回大于_imgUrlArr的數(shù)組count，這里取模，其次還要保證為正數(shù)，比如，如果向右邊滑動是就顯示_currentImgIndex-1張圖片，_currentImgIndex-1取模也可能為負(fù)數(shù)，此時加上count保證為正數(shù)-(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; } //如果只顯示一張圖片,那就沒有旋轉(zhuǎn)情況 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輪轉(zhuǎn)多張圖片，數(shù)量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), ^{ //循環(huán)輪轉(zhuǎn)圖片 [self switchImg]; }); }} 5秒旋轉(zhuǎn)圖片
-(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]; }); }} 當(dāng)手動旋轉(zhuǎn)圖片
-(void)switchImgByDirection:(SwitchDirection)direction{ if (direction == SwitchDirectionNone) { return; } [self reSetImgUrlWithDirection:direction]; [_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];} 旋轉(zhuǎn)圖片后重新調(diào)整3個UIImageView顯示的內(nèi)容，如實(shí)現(xiàn)思想所述
-(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]; }} 實(shí)現(xiàn)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{ //向左旋轉(zhuǎn) if (_swDirection == SwitchDirectionLeft) { _currentPage = [self switchToValue:_currentPage + 1 Count:_imgUrlArr.count]; }//向右旋轉(zhuǎn) else if (_swDirection == SwitchDirectionRight) { _currentPage = [self switchToValue:_currentPage - 1 Count:_imgUrlArr.count]; } _pageControlView.currentPage = _currentPage; if (_swDirection != SwitchDirectionNone) { [self switchImgByDirection:_swDirection]; } _isDragImgView = NO;} 以上為實(shí)現(xiàn)代碼，現(xiàn)在看看怎么用，例如：
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句代碼就可以實(shí)現(xiàn)圖片的無限循環(huán)輪轉(zhuǎn)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
