IOS使用UICollectionView實現無限輪播效果_IOS

來源:互聯網
上載者:User

一、案例示範

本案例Demo示範的是一個首頁輪播的案例,支援手動輪播和自動輪播。知識點主要集中在UICollectionView和NSTimer的使用。

二、知識儲備

2.1、UICollectionView橫向布局

只需要設定UICollectionViewFlowLayout的scrollDirection為UICollectionViewScrollDirectionHorizontal即可。

2.2、NSTimer的基本使用

NSTimer的初始化:

複製代碼 代碼如下:
 + (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelector userInfo:(nullable id)userInfo repeats:(BOOL)yesOrNo;

1)、(NSTimeInterval)ti : 預訂一個Timer,設定一個時間間隔。
表示輸入一個時間間隔對象,以秒為單位,一個>0的浮點類型的值,如果該值<0,系統會預設為0.1。
2)、target:(id)aTarget : 表示發送的對象,如self
3)、selector:(SEL)aSelector : 方法選取器,在時間間隔內,選擇調用一個執行個體方法
4)、userInfo:(nullable id)userInfo : 需要傳參,可以為nil
5)、repeats:(BOOL)yesOrNo : 當YES時,定時器會不斷迴圈直至失效或被釋放,當NO時,定時器會迴圈發送一次就失效。
開啟定時器:

複製代碼 代碼如下:
[[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];

關閉定時器:

[self.timer invalidate];

2.3、自動輪播和手動輪播的切換

初始化的時候,我們預設開啟定時器,定時執行切換到下一張圖片的函數。當使用者觸摸到View的時候,我們則要關閉定時器,手動的進行UICollectionView的切換。當使用者的手離開了View,我們要重新開啟定時器,進行自動輪播的切換。

三、關鍵程式碼分析

3.1、產生UICollectionViewFlowLayout對象,設定他的滾動方向為水平滾動  

 UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init]; flowLayout.itemSize = CGSizeMake(SCREEN_WIDTH, 200); flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal; flowLayout.minimumLineSpacing = 0;

3.2、初始化UICollectionView對象 

 UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, self.navBarHeight, SCREEN_WIDTH, 200) collectionViewLayout:flowLayout]; collectionView.delegate = self; collectionView.dataSource = self; collectionView.showsHorizontalScrollIndicator = NO; collectionView.pagingEnabled = YES; collectionView.backgroundColor = [UIColor clearColor]; [self.view addSubview:collectionView];

3.3、UICollectionView的UICollectionViewDataSource代理方法

#pragma mark- UICollectionViewDataSource-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{ return YYMaxSections;}-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ return self.newses.count;}-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ YYCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:YYIDCell forIndexPath:indexPath]; if(!cell){ cell = [[YYCell alloc] init]; } cell.news=self.newses[indexPath.item]; return cell;}

3.4、定時器的開啟和關閉

#pragma mark 添加定時器-(void) addTimer{ NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(nextpage) userInfo:nil repeats:YES]; [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes]; self.timer = timer ;}#pragma mark 刪除定時器-(void) removeTimer{ [self.timer invalidate]; self.timer = nil;}

3.5、手動切換 和 自動輪播 的切換

-(void) scrollViewWillBeginDragging:(UIScrollView *)scrollView{ [self removeTimer];}#pragma mark 當使用者停止的時候調用-(void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{ [self addTimer];}#pragma mark 設定頁碼-(void) scrollViewDidScroll:(UIScrollView *)scrollView{ int page = (int) (scrollView.contentOffset.x/scrollView.frame.size.width+0.5)%self.newses.count; self.pageControl.currentPage =page;}

3.6、自動輪播切換到下一個View的方法

-(void) nextpage{ NSIndexPath *currentIndexPath = [[self.collectionView indexPathsForVisibleItems] lastObject]; NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForItem:currentIndexPath.item inSection:YYMaxSections/2]; [self.collectionView scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO]; NSInteger nextItem = currentIndexPathReset.item +1; NSInteger nextSection = currentIndexPathReset.section; if (nextItem==self.newses.count) { nextItem=0; nextSection++; } NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection]; [self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];}

Demo下載地址:https://github.com/yixiangboy/YXCollectionView

以上就是本文的全部內容,希望對大家的學習有所協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.