iOS實(shí)現(xiàn)無(wú)限循環(huán)圖片輪播器的封裝
項(xiàng)目中很多時(shí)候會(huì)碰到這個(gè)需求,實(shí)現(xiàn)多張圖片的無(wú)限循環(huán)輪轉(zhuǎn),以前做過(guò),項(xiàng)目中幾個(gè)地方的都用到了,當(dāng)時(shí)沒(méi)有封裝,幾個(gè)地方都拷貝幾乎一樣的代碼,代碼復(fù)用性不好,今天沒(méi)事封裝了一下,使用起來(lái)比較簡(jiǎn)單。
首先,說(shuō)說(shuō)我實(shí)現(xiàn)循環(huán)輪轉(zhuǎn)圖片的思想,在UIScrollView中添加了3個(gè)UIImageView,并排排列,我們看到的永遠(yuǎn)只是第二個(gè)UIImageView,這樣的話(huà),你一直可以向左,向右滑動(dòng),當(dāng)你向左滑動(dòng)是,這是你滑動(dòng)到了最后一個(gè)UIImageView不能在向左邊滑動(dòng)了,這時(shí),我在后面悄悄的將第二個(gè)UIImageView圖片設(shè)置為當(dāng)前要顯示的圖片,調(diào)整UIScrollView的contentOffset屬性,如:
[_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO](使用者根本感覺(jué)不出來(lái)這種變化)所以,此時(shí),你看到的又是第二個(gè)UIImageView,所以此時(shí)你又可以向左滑動(dòng),當(dāng)你向右邊滑動(dòng)時(shí)候處理類(lèi)似,導(dǎo)致結(jié)果你可以向左邊,右邊無(wú)線(xiàn)循環(huán)輪轉(zhuǎn)圖片。
JGCirculateSwitchImgView.h頭文件
@interface JGCirculateSwitchImgView : UIView @property(nonatomic,strong)NSArray *imgUrlArr; @end
頭文件中只有一個(gè)需要設(shè)置的成員變量imgUrlArr數(shù)組,就是你要顯示圖片路徑的數(shù)組,將通過(guò)這個(gè)數(shù)組訪(fǎng)問(wèn)圖片。
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; //顯示頁(yè)碼的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上的三個(gè)UIImgaView這里通過(guò)3個(gè)UIImageView實(shí)現(xiàn)無(wú)限循環(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類(lèi)型,用于保存滑動(dòng)的方向 @property(nonatomic,assign)SwitchDirection swDirection; @end
-(id)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { [self createContentScrollView]; [self createPageControlView]; //默認(rèn)第一頁(yè) _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對(duì)Count取模,并保證為正值 //這里很重要,是實(shí)現(xiàn)無(wú)限循環(huán)的重要的一步,比如現(xiàn)在顯示的是第一張圖片,_currentImgIndex=0,向左滑動(dòng)后就顯示_currentImgIndex+1張圖片,可是_currentImgIndex+1可能回大于_imgUrlArr的數(shù)組count,這里取模,其次還要保證為正數(shù),比如,如果向右邊滑動(dòng)是就顯示_currentImgIndex-1張圖片,_currentImgIndex-1取模也可能為負(fù)數(shù),此時(shí)加上count保證為正數(shù) -(NSInteger)switchToMValue:(NSInteger)value Count:(NSInteger)count { NSInteger result = value % count; return result >=0 ? result : result + count; }
重寫(xiě)imgUrlArr的set方法
-(void)setImgUrlArr:(NSArray *)imgUrlArr { _imgUrlArr = [imgUrlArr copy]; NSInteger count = imgUrlArr.count; if (count <= 0 ) { return; } //如果只顯示一張圖片,那就沒(méi)有旋轉(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個(gè)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)手動(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個(gè)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個(gè)代理方法
#pragma mark -------------Delegate--------------- //記住滑動(dòng)的方向 - (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];
可以看到封裝之后,代碼的重用性很高,使用起來(lái)很簡(jiǎn)單,就這么4句代碼就可以實(shí)現(xiàn)圖片的無(wú)限循環(huán)輪轉(zhuǎn)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- IOS開(kāi)發(fā)之UIScrollView實(shí)現(xiàn)圖片輪播器的無(wú)限滾動(dòng)
- 一行iOS代碼實(shí)現(xiàn)圖片無(wú)限輪播器
- IOS圖片無(wú)限輪播器的實(shí)現(xiàn)原理
- IOS使用UICollectionView實(shí)現(xiàn)無(wú)限輪播效果
- iOS開(kāi)發(fā)中使用UIScrollView實(shí)現(xiàn)圖片輪播和點(diǎn)擊加載
- IOS實(shí)現(xiàn)圖片輪播無(wú)限循環(huán)效果
- iOS實(shí)現(xiàn)帶有縮放效果的自動(dòng)輪播圖
- iOS實(shí)現(xiàn)圖片輪播效果
- iOS實(shí)現(xiàn)無(wú)限循環(huán)輪播圖效果
- iOS實(shí)現(xiàn)圖片輪播器
相關(guān)文章
UILabel顯示定時(shí)器文本跳動(dòng)問(wèn)題的解決方法
這篇文章主要給大家介紹了關(guān)于UILabel顯示定時(shí)器文本跳動(dòng)問(wèn)題的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)各位iOS開(kāi)發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07簡(jiǎn)單說(shuō)說(shuō)iOS之WKWebView的用法小結(jié)
iOS8.0之后我們使用 WebKit框架中的WKWebView來(lái)加載網(wǎng)頁(yè)。這篇文章主要介紹了簡(jiǎn)單說(shuō)說(shuō)iOS之WKWebView的用法小結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01詳解iOS App中UiTabBarController組件的基本用法
UiTabBarController組件即是用來(lái)創(chuàng)建App中的Tab視圖切換選項(xiàng)欄,下面將詳解iOS App中UiTabBarController組件的基本用法,包括左右滑動(dòng)切換標(biāo)簽頁(yè)等基本功能的實(shí)現(xiàn),需要的朋友可以參考下2016-05-05iOS 本地視頻和網(wǎng)絡(luò)視頻流播放實(shí)例代碼
本篇文章主要介紹了iOS 本地視頻和網(wǎng)絡(luò)視頻流播放實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07