iOS利用UIScrollView實現(xiàn)無限滾動效果
前言
眾所周知UIScrollView 的無限滾動主要應(yīng)用在圖片輪播器、歡迎界面等場景。它的原理是在要顯示的圖片前后各加一張圖片即在第一張圖片之前放最后一張圖片,在最后一張圖片之后放第一張圖片,然后在滾動到邊緣的時候,巧妙的過渡一下就可以"瞞天過海","以假亂真"的造成無限滾動的假象。網(wǎng)絡(luò)上有很多只用三張或兩張圖片實現(xiàn)的方法,效率比這個方法高,但實現(xiàn)起來稍微麻煩一點,有興趣的可以去深入研究。
實現(xiàn)步驟
1、根據(jù)需求準(zhǔn)備幾張圖片,在網(wǎng)上找了5張圖片,分別命名為 img_01,img_02,img_03,img_04,img_05 。
2、代碼實現(xiàn),主要分為:添加UIScrollView,添加顯示圖片,添加UIPageControl,然后監(jiān)聽UIScrollView的滾動,根據(jù)滾動的位置來設(shè)置UIPageControl,最重要的是對于滾動到兩個邊緣時要特殊處理一下
代碼如下:
#import "ViewController.h" //屏幕寬度 #define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width //圖片高度 #define IMG_HEIGHT 180 //要顯示的圖片總數(shù) #define MAX_SIZE 7 #import "ViewController.h" @interface ViewController () <UIScrollViewDelegate> //滾動視圖 @property (strong, nonatomic) UIScrollView *loopScrollView; //指示器 @property (strong, nonatomic) UIPageControl *pageIndicator; //要展示的圖片數(shù)組 @property(strong, nonatomic) NSMutableArray *imgArray; @end @implementation ViewController //懶加載數(shù)組 -(NSMutableArray *)imgArray { if(_imgArray == nil) { _imgArray = [[NSMutableArray alloc]initWithCapacity:MAX_SIZE]; //在要展示的5張圖片的前后各加一張圖片,第一張前面加第五張,第五張后面加第一張 [_imgArray addObject:[UIImage imageNamed:@"img_05.jpg"]]; for (int i = 1; i< MAX_SIZE - 1; i++) { NSString *imgName = [[NSString alloc]initWithFormat:@"img_0%d.jpg", i]; [_imgArray addObject:[UIImage imageNamed:imgName]]; } [_imgArray addObject:[UIImage imageNamed:@"img_01.jpg"]]; } return _imgArray; } - (void)viewDidLoad { [super viewDidLoad]; [self setupScrollView]; [self setupPageControl]; } /** * 創(chuàng)建UIScrollView并設(shè)置其屬性 */ -(void)setupScrollView { UIScrollView *sc = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, IMG_HEIGHT)]; //創(chuàng)建UIImageView并添加到UIScrollView中 for (int i = 0; i< MAX_SIZE; i++) { UIImageView *img = [[UIImageView alloc]initWithImage:[self.imgArray objectAtIndex:i]]; img.frame = CGRectMake(SCREEN_WIDTH * i, 0, SCREEN_WIDTH, IMG_HEIGHT); [sc addSubview:img]; } //設(shè)置UIScrollView的屬性 sc.contentSize = CGSizeMake(SCREEN_WIDTH * self.imgArray.count, IMG_HEIGHT); sc.showsHorizontalScrollIndicator = NO; sc.pagingEnabled = YES; //剛開始應(yīng)該滾動到第二張顯示,因為第一張其實是最后一張圖片 [sc setContentOffset:CGPointMake(SCREEN_WIDTH, 0) animated:NO]; //設(shè)置代理并添加到當(dāng)前view中 sc.delegate = self; [self.view addSubview:sc]; self.loopScrollView = sc; } /** * 創(chuàng)建UIPageControl并設(shè)置其屬性 */ -(void)setupPageControl { //注意frame,這樣設(shè)置可以居中顯示 UIPageControl *pc = [[UIPageControl alloc]initWithFrame:CGRectMake(self.view.center.x - 50, CGRectGetMaxY(self.loopScrollView.frame) - 25 , 100, 25)]; //設(shè)置UIPageControl的屬性并添加到當(dāng)前view中 pc.numberOfPages = MAX_SIZE - 2; pc.currentPage = 0; pc.pageIndicatorTintColor = [UIColor redColor]; [self.view addSubview:pc]; self.pageIndicator = pc; } //UIScrollView的代理方法,在該方法中改變UIPageControl并且處理邊緣滾動 -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { //獲取當(dāng)前UIScrollView的位置 CGPoint offset = [scrollView contentOffset]; //算出滾動到第幾頁 int currentPage = offset.x/SCREEN_WIDTH; //設(shè)置UIPageControl self.pageIndicator.currentPage = currentPage - 1; //對最后一張和第一張要進行特殊處理 //1、如果是第一張 if (currentPage == 0) { //下面兩個方法任選其一都可以達到效果,但是注意動畫一定要設(shè)置為NO,不然會有視覺會有辣眼睛的感覺 //方法1 [self.loopScrollView setContentOffset:CGPointMake(SCREEN_WIDTH * (MAX_SIZE-2), 0) animated:NO]; //方法2,該方法要求設(shè)置contentSize時,任一方向就算不滾動也不能為0,否則無效 //[self.loopScrollView scrollRectToVisible:CGRectMake(SCREEN_WIDTH * (MAX_SIZE-2), 0, SCREEN_WIDTH, IMG_HEIGHT) animated:NO]; self.pageIndicator.currentPage = MAX_SIZE - 2; } //2、如果是最后一張 else if(currentPage == MAX_SIZE - 1) { [self.loopScrollView setContentOffset:CGPointMake(SCREEN_WIDTH, 0) animated:NO]; //[self.loopScrollView scrollRectToVisible:CGRectMake(SCREEN_WIDTH, 0, SCREEN_WIDTH, IMG_HEIGHT) animated:NO]; self.pageIndicator.currentPage = 0; } } @end
實現(xiàn)效果
總結(jié)
好了,以上就是這篇文章的全部內(nèi)容了,其實實現(xiàn)輪播現(xiàn)在最好的方案應(yīng)該是使用UICollectionView,因為它是利用重用機制來實現(xiàn)的,性能會好很多,代碼寫起來類似。希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
相關(guān)文章
如何實現(xiàn)IOS_SearchBar搜索欄及關(guān)鍵字高亮
本文通過實例代碼演示如何實現(xiàn)IOS搜索欄及搜索關(guān)鍵字高亮,效果很棒,小編覺得對大家的學(xué)習(xí)會很有幫助,現(xiàn)在分享給大家,有需要的可以參考學(xué)習(xí)。2016-08-08IOS開發(fā)教程之put上傳文件的服務(wù)器的配置及實例分享
IOS開發(fā)給人一種高大上的趕腳,弄的好像你不會IOS就不是個合格的程序員一樣,好吧,既然是大趨勢,那我們就來學(xué)習(xí)下吧,今天來看看put上傳文件的服務(wù)器配置及案例2014-06-06iOS中的UITextView文字輸入光標(biāo)使用技巧小結(jié)
UITextView在用戶體驗方面有著十分明顯的作用,包括鍵盤的呼出及文字的選擇等,接下來就來整理給出一份iOS中的UITextView文字輸入光標(biāo)使用技巧小結(jié),需要的朋友可以參考下2016-05-05iOS如何優(yōu)雅地消除應(yīng)用角標(biāo)詳解
關(guān)于應(yīng)用角標(biāo)相信大家應(yīng)該都有所了解吧,這篇文章主要給大家介紹了關(guān)于iOS如何優(yōu)雅地消除應(yīng)用角標(biāo)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對各位iOS開發(fā)者們具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12IOS開發(fā)之手勢響應(yīng)事件優(yōu)先級的實例詳解
這篇文章主要介紹了IOS開發(fā)之手勢響應(yīng)事件優(yōu)先級的實例詳解的相關(guān)資料,希望通過本文大家能夠掌握手勢響應(yīng)優(yōu)先級的使用方法,需要的朋友可以參考下2017-09-09IOS開發(fā)OC代碼中創(chuàng)建Swift編寫的視圖控制器
這篇文章主要介紹了IOS開發(fā)OC代碼中創(chuàng)建Swift編寫的視圖控制器的相關(guān)資料,需要的朋友可以參考下2017-06-06