UICollectionView实现无限轮播图控件 - 简书
下载简书移动应用
写了15356字，被19人关注，获得了11个喜欢
UICollectionView实现无限轮播图控件
UICollectionView是一个很棒的控件，今天用collectionview实现了一下轮播图控件，主要记录一下思路和一些比较小技巧吧，以便日后翻阅：首先，基本思路是利用collectionview的本身的一些特性简化我们，我们可以在在每一个cell上添加一个imgeview，将要轮播的图片设置在每一个cell上，可以说基本功能就完成了，因为collectionview类似于uitableview，可以自由滚动，而且可以循环利用，到此一个基本的轮播图控件就完成了。上面这些不再详述，大家都懂，主要是说一下我们标题所示的无限轮播其实，我的实现方法是利用人的视觉差：1、首先，根据拿到的图片数组imgs，重新构造一个图片数组carouselImages，新数组的结构是carouselImages = [imgs[lastObject],..imgs的所有元素...,imgs[0]]，就是在imgs数组的最前面添加imgs的最后一个元素，在最后面添加imgs的第一个元素，构成新数组carouselImages2、然后利用新数组carouselImages来作为数据实现基本轮播功能3、特殊处理3.1让collectionview默认滚动到row ＝ 1(其实就是我们要轮播的第一张图片)可以在layoutsubviews中实现
//默认滚动到第一张图片
if (self.loop && self.carouselView.contentOffset.x == 0)
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:1 inSection:0];
[self.carouselView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
self.currentIndex = 1;
3.2在- (void)scrollViewDidScroll:(UIScrollView *)scrollView方法中在滚动到最后一张图片时，继续滚向后动跳到第一张，在当滚动到第一张图片时，继续向前滚动跳到最后一张，而且不能有动画。因为在前面我们重新构造的新数组，当滚动到最后一个图片继续滚动的时候，继续滚动就会滚动出新添加的第一张图片，此时，我们直接让collectionview滚动到第一张图片所在的cell，而且不能带动画，此时，图片没有变，但是collectionview已经重新滚动到第一个cell，由于没有动画，我们基本感觉不出来collectionview的滚动，这样就很自然的从最后一个cell滚动到第一个cell，从而实现了循环，反向滚动思路一样，利用在最前面添加的数组元素即可。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
if (self.loop)
CGFloat width = self.frame.size.
NSInteger index = scrollView.contentOffset.x /
//当滚动到最后一张图片时，继续滚向后动跳到第一张
if (index == self.imgs.count + 1)
self.currentIndex = 1;
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.currentIndex inSection:0];
[self.carouselView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
//当滚动到第一张图片时，继续向前滚动跳到最后一张
if (index == 0) {
self.currentIndex = self.imgs.
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.currentIndex inSection:0];
[self.carouselView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
项目整体代码地址
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
UICollectionView
· 6人关注
· 3人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：今天为大家分享一波轮播图，本人不才，希望此分享对大家有用。今天为什么写这个呢，之前写过项目用scrollView封装写过轮播图，但是感觉不是很好，而且传值也很不好写，所以今天用collectionView写的轮播图，传值也很是好写的。
DE8-43B6-8C97-7BACA687416D.png
&1&先定一些我们需要的属性
@property (nonatomic, retain) UICollectionView *
@property (nonatomic, retain) NSMutableArray *
@property (nonatomic, retain) UIPageControl *
@property (nonatomic, retain) NSTimer *
- (void)viewDidLoad {
[super viewDidLoad];
[self createCollectionView];
[self createPhone];
[self createPage];
[self addTimer];
&2&//先做一些事前工作，把collectionView铺好
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
layout.itemSize = CGSizeMake(WIDTH, 300);
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
layout.minimumLineSpacing = 0;
self.collection = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, 300) collectionViewLayout:layout];
[self.view addSubview:self.collection];
self.collection.backgroundColor = [UIColor whiteColor];
self.collection.pagingEnabled = YES;
self.collection.delegate = self;
self.collection.dataSource = self;
self.collection.showsHorizontalScrollIndicator = NO;
[self.collection registerClass:[CellOfFirst class] forCellWithReuseIdentifier:@&pool&];
&3&collectionView 的协议方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.marr.count;
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 100;
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
CellOfFirst *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@&pool& forIndexPath:indexPath];
cell.pic.image = self.marr[indexPath.row];
// 本地的图片
- (void)createPhone {
self.marr = [NSMutableArray array];
for (int i = 1; i & 12; i++) {
NSString *name = [NSString stringWithFormat:@&123_%d.jpg&,i];
UIImage *image = [UIImage imageNamed:name];
[self.marr addObject:image];
[self.collection scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:50] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
// 获取pageControoler
- (void)createPage {
self.page = [[UIPageControl alloc]initWithFrame:CGRectMake(0, 250, WIDTH, 50)];
[self.view addSubview:self.page];
self.page.numberOfPages = self.marr.count;
// 当图片划得时候已经减速时
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
int page = (int) (scrollView.contentOffset.x / WIDTH + 0.5) % self.marr.count;
self.page.currentPage =
// 我们可以添加定时器了 （一样别忘记获取完图片调用）
- (void)addTimer {
self.timer = [NSTimer scheduledTimerWithTimeInterval:3.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
[[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
- (void)nextImage {
NSIndexPath *currrentIndexPath = [[self.collection indexPathsForVisibleItems]lastObject];
NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForItem:currrentIndexPath.item inSection:50];
[self.collection scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
NSInteger nextItem = currentIndexPathReset.item +1;
NSInteger nextSection = currentIndexPathReset.section;
if (nextItem==self.marr.count) {
nextItem=0;
nextSection++;
NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];
[self.collection scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
// 当用户自己划图片时 当然我们也需要定时器被移除 （时机很重要）
- (void)removeTimer{
[self.timer invalidate];
self.timer = nil;
// 当图片即将开始被拖拽时 我们将定时器移除
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
[self removeTimer];
// 当图片已经完成被拖拽时 我们还需加上定时器
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
[self addTimer];
这些做完我们基本就完成轮播图自动轮播了，大家有兴趣的可以尝试下。
B7DE72A0-B1F9-42D6-63C887B.png
文／其实你懂的（简书作者）
原文链接：/p/e56b7eb90ba9
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：41806次
积分：2310
积分：2310
排名：第11847名
原创：191篇
(9)(50)(12)(16)(33)(12)(9)(20)(15)(22)&&&&collectionView怎么添加头视图
collectionView怎么添加头视图
这个代码示例，是collectionView怎么添加头视图，我看到有很多朋友都是群里问这种功能实现，所以我特意写了一个Demo.让大家参考学习。我更多的开源代码比如即时通讯、新闻、电商瀑布流的
/thinklion
若举报审核通过，可奖励20下载分
被举报人：
joonchen111
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
移动开发下载排行怎样在collectionView头部添加轮播图，要求能随collectionView滚动_百度知道}