iOS开发之图片轮播器

本文主要介绍图片轮播器的实现。

主要思路：利用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就自动将图片设置为中间组的对应图片。这样就可以简单实现无限滚动的效果了。