1.数据容器 (轮播器的图片容器)
@property (strong,nonatomic) NSArray *imgDataArr;
2.实现CollectionView的UICollectionViewDataSource数据源方法
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
//将容器数组长度*2 (多出一组Item)
return self. imgDataArr.count * 2;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
static NSString * const reuseIdentifier = @"Cell";
JSCycleCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
//这里设置背景色是因为ImageView的Size小于itemSize,留个边框的效果
cell.backgroundColor = [UIColor whiteColor];
/*
因为item个数*2, 但容器的真实长度并未改变,所以取数据源的时候对容器长度取模,就可以取到对应索引的图片
拿总长度为4 举例
(原始的数据源cycleList的长度是4, 但是我们现在item有8个, 我们不能直接根据 indexpath.item 去取数据)
0%4 = 0 , 1%4=1, 2%4=2, 3%4=3;
4%4 = 0 , 5%4=1, 6%4=2, 7%4=3
*/
//这里我自定义了一个Cell,传递属性并赋值与这里直接设置Item里的ImageView原理一样
cell.imgModel = self. imgDataArr[indexPath.item % self. imgDataArr.count];
return cell;
}
3.实现CollectionView的UICollectionViewDelegate代理方法(UICollectionView继承自UIScrollView)计算滑动停止时,当前显示哪一个Item
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//获取当前CollectionView的偏移量
CGFloat offSetX = scrollView.contentOffset.x;
/*
拿总长度为4 举例:
初始时,让索引为4的Item为默认显示的Item(第2组第1张)
当偏移量等于0时(第1组第1张,也就是第一张图片),以无动画的方式悄悄的跳转回索引为4的Item(第2组第1张)
当偏移量等于7倍CollectionView的宽度时(第2组第4张,也就是最后一张图片),同样以无动画的方式跳转回索引为3的Item(第1组第4张)
因为两组图片是一致的,又是以无动画无察觉的方式跳转的,所以就可以实现无限轮播的效果了
*/
if (offSetX == 0) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.cycleModelArr.count inSection:0];
[self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
}else if (offSetX == scrollView.bounds.size.width * ( self.cycleModelArr.count * 2 - 1 )){
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.cycleModelArr.count - 1 inSection:0];
[self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
}
}
细节:
1.FlowLayout:让collectionView的item 自动适配
因为在VIewDidLoad中并不能获取到真实有效的Frame,所以在设置FlowLayout时,要写在viewDidLayoutSubviews或者是viewDidAppear中
- (void)viewDidLayoutSubviews{
self.flowLayout.itemSize = self.collectionView.bounds.size;
}
2.防止滚动条出卖自己,需要将滚动条指示关掉(根据情况选择禁用垂直\水平方向),并设置分页效果
self.collectionView.showsVerticalScrollIndicator = NO;
self.collectionView.showsHorizontalScrollIndicator = NO;
self.collectionView.pagingEnabled = YES;
3.初始的时候,让CollectionView默认显示索引为4的那个Item(第2组第1张图片)
轮播-初始.png
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.imgDataArr.count inSection:0];
[self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
这样就能简单的实现一个无限轮播器效果了.
