本文主要介绍图片轮播器的实现。
主要思路:利用UICollectionView(三张图片)
1) UICollectionView的尺寸和一个Item的尺寸相同,Item中有一个和Item相同尺寸的UIImageView。
2) UICollectionView有N组Item。每组有三个Item。
3) UICollectionView初始完毕后就默认显示中间那组的第0个Item。
如图:
4) 添加计时器。当UICollectionView自动滚动的时候,只显示中间组的三张图片,当item>2的时候,就调用下面这个方法,让UICollectionView滚动到中间组的第0个Item。
// 初始化时,让collectionView自动滚到中间那一组
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0inSection:HXMaxSection * 0.5];
[self.collectionViewscrollToItemAtIndexPath:indexPathatScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
5) 当手动滚动图片的时候,移除计时器;当手动滚动结束的时候,载将计时器添加上去。这里要调用UIScrollView的两个代理方法。
我做的时候是这个思路,当我实现的过程中,我觉得重点还是在计时器方法中。在该方法要判断当前显示的是哪一张图片,也要做边界图片处理。
下面上代码:(这里我只写3组Item,每组3张图片)
首先,创建UICollectionView(背景颜色:黄色),我这里用storyboard创建,拖一个UICollectionView,并在控制器中拥有该属性。
再自定义cell,cell中只有UIImageView控件。(xib创建)
在控制器中先注册一个这个cell,并实现UICollectionView的数据源方法。
在viewDidLoad方法中:self.newses存放图片名的数组
// 注册一个从xib中加载出来的cell
[self.collectionView registerNib:[UINib nibWithNibName:@"HXImageCell" bundle:nil] forCellWithReuseIdentifier:@"Cell"];
// 初始化时,让collectionView自动滚到中间那一组
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:HXMaxSection * 0.5];
[self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
实现数据源方法:
#pragma mark - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return HXMaxSection;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.newses.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
HXImageCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
cell.imageView.image =[UIImage imageNamed: self.newses[indexPath.item]];
return cell;
}
到此运行程序,显示效果:
但是此时,图片还不能自动播放。
下面我们要添加一个计时器,来实现图片的自动播放。(一启动程序就自动播放,要在viewDidLoad方法中添加计时器)
添加计时器代码:
/**
* 添加计时器
*/
- (void)addTimer {
if (self.timer) return;
// 创建计时器
NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
// 添加计时器到runLoop
[[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
self.timer = timer;
}
/**
* 移除计时器
*/
- (void)removeTimer {
[self.timer invalidate];
self.timer = nil;
}
/**
* 计时器执行的方法
*/
- (void)nextPage {
// 获得当前正在显示的位置(比如第3组、第2个cell,快显示完了)
NSIndexPath *currentIndexPath = [[self.collectionView indexPathsForVisibleItems] lastObject];
// 马上显示到中间那组的对应的cell(即第2组,第2个cell)
NSIndexPath *midIndexPath = [NSIndexPath indexPathForItem:currentIndexPath.item inSection:HXMaxSection * 0.5];
[self.collectionView scrollToItemAtIndexPath:midIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
// 下一张
NSInteger nextSection = midIndexPath.section;
NSInteger nextItem = midIndexPath.item + 1;
if (nextItem >= self.newses.count) {
nextItem = 0;
nextSection ++;
}
// cell滚动到下一个位置
NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];
[self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
}
计时器方法中的执行步骤是:
得到当前显示的图片位置之后,马上让UICollectionView把图片滚动到中间组的那张图片。然后再对中间组的图片进行加1处理。
这个时候图片就能自动滚动了。现在要对它进行手动滚动处理。
很简单,实现UIScrollView的两个代理方法就行:
#pragma mark - scrollview delegate
/**
* 手动滚动开始时候调用
*/
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
// 移除计时器
[self removeTimer];
}
/**
* 手动滚动结束时候调用
*/
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
// 添加计时器
[self addTimer];
}
现在大功告成。当用户在滚动的时候,计时器就关闭,自动滚动就关闭,如果用户一直滑动,可能会造成滚到尽头的效果,所以我们可以返回多一点组数。让用户滚到累了为止;只要用户停止滚动,UICollectionView就自动将图片设置为中间组的对应图片。这样就可以简单实现无限滚动的效果了。