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