你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> IOS使用UICollectionView實現無限輪播效果

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

編輯:IOS開發綜合

一、案例演示

本案例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

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

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