無限輪播專題系列之UICollectionView篇
開題概述
- 之所以將無限輪播作為專題來講是因為使用的太廣泛，幾乎99%以上的 APP 都有這個功能，而且涉及到的知識點也不少，另外作為個人對技術總結角度來看，很值得把一些想法力求用最簡單的語言記錄下來讓每一個需要的人都能看懂，也方便自己回顧。
開發思路
-
功能展示：
-
思維圖如下
-
思路詳解：
- 功能劃分：每一個復雜的界面，我們需要將它細化，就向解答代數題一樣，一步一步來，化繁為簡。從我們需要實現的功能看，可拆分為：創建滾動的view（這里用UICollectionView），一個pageControl，一個提示label（可選）
- 創建UICollectionView:
// flowLayout
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.itemSize = self.frame.size;
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
flowLayout.minimumLineSpacing = 0;
flowLayout.minimumInteritemSpacing = 0;
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:flowLayout];
collectionView.backgroundColor = [UIColor clearColor];
collectionView.showsHorizontalScrollIndicator = NO;
collectionView.pagingEnabled = YES;
collectionView.bounces = NO;
collectionView.dataSource = self;
collectionView.delegate = self;
/** 創建 collectionView 的時候就讓滾蛋到100倍位置時防止一開始用戶向右滾動沒有數據*/
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:_imageStringArray.count *100 inSection:0];
[collectionView selectItemAtIndexPath:indexPath animated:YES scrollPosition:UICollectionViewScrollPositionCenteredHorizontally ];
[collectionView registerClass:[WLCollectionViewCell class] forCellWithReuseIdentifier:kCollectionCellID];
[self addSubview:collectionView];
_collectionView = collectionView;
- 創建pageControl + 提示label
UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(0, self.frame.size.height - 37, self.frame.size.width, 37)];
bgView.backgroundColor = [UIColor grayColor];
bgView.alpha = 0.8;
[self addSubview:bgView];
// UIPageControl
UIPageControl *pageControl = [[UIPageControl alloc] init];
CGSize size = [pageControl sizeForNumberOfPages:_imageStringArray.count];
pageControl.bounds = CGRectMake(0, 0, size.width, size.height);
pageControl.center = CGPointMake(bgView.frame.size.width/2, bgView.frame.size.height/2);
pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
pageControl.currentPageIndicatorTintColor = [UIColor orangeColor];
pageControl.numberOfPages = _imageStringArray.count;
[bgView addSubview:pageControl];
_payControl = pageControl;
// label
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMaxX(pageControl.frame) + 50, 0, 100, bgView.frame.size.height)];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont systemFontOfSize:14.0];
label.textColor = [UIColor orangeColor];
label.textAlignment = NSTextAlignmentCenter;
label.text = @"這是第0張圖片";
[bgView addSubview:label];
_tipLabel = label;
- 實現UICollectionViewDataSource 方法：
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
// 設置為1000倍時為了當向左滾動超出數組個數的時候就自動從0開始，不用擔心會創造這么多對象消耗內存，UICollectionView會自動復用
return _imageStringArray.count * 1000;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
WLCollectionViewCell *cell = [_collectionView dequeueReusableCellWithReuseIdentifier:kCollectionCellID forIndexPath:indexPath];
NSInteger index = indexPath.row % _imageStringArray.count;
cell.imageView.image = [UIImage imageNamed:_imageStringArray[index]];
return cell;
}
- 完成上一步基本可以看到滾動的數據圖片了，下面實現UICollectionViewDelegate方法，讓滾動的時候更新pageControl當前顯示的頁數：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
/** 此處注意滾動到一半的時候才讓分頁控制器顯示下一個 */
CGFloat offsetX = scrollView.contentOffset.x + scrollView.bounds.size.width * 0.5;
NSUInteger index = (NSUInteger ) (offsetX / scrollView.bounds.size.width) % _imageStringArray.count;
_payControl.currentPage = index;
_tipLabel.text = [NSString stringWithFormat:@"這是第%lu張圖片",(unsigned long)index];
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
/** 開始拖拽到時候停止定時器的操作 */
[self removeTimer];
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
/** 拖拽完成的時候 開啟定時器 */
[self addTimer];
}
- 添加定時器實現無限滾動
- (void)addTimer {
NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(timerHandler) userInfo:nil repeats:YES];
[NSRunLoop.mainRunLoop addTimer:timer forMode:NSRunLoopCommonModes];
_timer = timer;
}
- (void)timerHandler {
CGFloat currentoffsetX = _collectionView.contentOffset.x;
CGFloat offSetX = currentoffsetX + _collectionView.bounds.size.width;
_tipLabel.text = [NSString stringWithFormat:@"這是第%f張圖片",offSetX];
_collectionView.contentOffset = CGPointMake(offSetX, 0);
}
- (void)removeTimer {
[_timer invalidate];
_timer = nil;
}
- 滾動超出區域自動到下一個
collectionView.delegate = self;
/** 創建 collectionView 的時候就讓滾蛋到100倍位置時防止一開始用戶向右滾動沒有數據*/
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:_imageStringArray.count *100 inSection:0];
[collectionView selectItemAtIndexPath:indexPath animated:YES scrollPosition:UICollectionViewScrollPositionCenteredHorizontally ];
// 設置為1000倍時為了當向左滾動超出數組個數的時候就自動從0開始，不用擔心會創造這么多對象消耗內存，UICollectionView會自動復用
return _imageStringArray.count * 1000;
