ios之无限自动图片轮播器的实现

比较之前发布的手动无限图片轮播器进行了改进.实现了自动无限轮播的功能.比较适合团购标题分类下面的轮播器功能.

实现思路:

* 开启一个定时器,把操作放入消息循环池.每隔一定时间,操作执行一次.

* 注意点: 程序启动自动轮播,手动拖拽,让定时器停止,停止拖拽重新开启一个定时器.

下面看源代码:

首先实现思路:整个collectionView中只有2个cell.中间始终显示第二个cell.
滚动:向前滚动当前cell的脚标为0,向后滚动当前的cell脚标为2.利用当前cell的脚标减去1,得到+1,或者-1,来让图片的索引加1或者减1,实现图片的切换.
声明一个全局变量index来保存图片的索引,用来切换显示在当前cell的图片.
在滚动前先让显示的cell的脚标变为1.代码viewDidLoad中设置
完成一次滚动结束后,代码再设置当前的cell为第二个cell(本质上就是让当前显示的cell的脚标为1)
最后一个有一个线程问题就是:当你连续滚动的时候,最后停止,当前显示的图片会闪动,因为是异步并发执行的,线程不安全导致.解决办法:让滚动完成后设置cell的代码加入主队列执行即可.

准备工作,创建collectionViewController,storyboard,进行类绑定,cell绑定,cell可重用标识绑定.
创建的cell.h文件

//

//  PBCollectionCell.h

//  无限滚动

//

//  Created by 裴波波 on 16/3/30.

//  Copyright © 2016年 裴波波. All rights reserved.

//

#import <UIKit/UIKit.h>

@interface PBCollectionCell : UICollectionViewCell

@property(nonatomic,strong)UIImage * img;

@end

cell.m文件



//

//  PBCollectionCell.m

//  无限滚动

//

//  Created by 裴波波 on 16/3/30.

//  Copyright © 2016年 裴波波. All rights reserved.

//

#import "PBCollectionCell.h"

@interface PBCollectionCell ()

//不要忘记给collectionView的cell上设置图片框,并拖线到cell分类中

@property (strong, nonatomic) IBOutlet UIImageView *imgView;

@end

@implementation PBCollectionCell

//重写img的set方法来个cell进行赋值.(当调用cell.img = img的时候回调用set ..img的方法)

-(void)setImg:(UIImage *)img{

    _img = img;

    self.imgView.image = img;

}

@end

控制器的代码详解



//

//  ViewController.m

//  无限滚动

//

//  Created by 裴波波 on 16/3/30.

//  Copyright © 2016年 裴波波. All rights reserved.

//

#import "ViewController.h"

#import "PBCollectionCell.h"

//定义宏图片的个数

#define kPictureCount 3

@interface ViewController ()

@property (strong, nonatomic) IBOutlet UICollectionViewFlowLayout *flowLayout;

/**

 *  图片的索引

 */

@property(nonatomic,assign) NSInteger index;

//声明定时器属性方便在不同方法中访问

@property(nonatomic,weak) NSTimer * timer;

@end

声明定时器属性方便在不同方法中访问
声明全局变量index为了拼接滚动过程中切换的图片的索引



@implementation ViewController

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return kPictureCount;

}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    static NSString * ID = @"cell";

    PBCollectionCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];

    //图片索引只有下一站或者上一张,即+1,或者-1,为了切换图片

    //中间的cell的脚标是1,滚动后脚标是2或者0,凑成next值为+1或者-1(让图片索引+1或者-1来完成切换图片),则

    NSInteger next = indexPath.item - 1;

    //为了不让next越界,进行取余运算 ---------+next为了切换图片

    next = (self.index + kPictureCount + next) % kPictureCount;

    NSString * imgName = [NSString stringWithFormat:@"%02ld",next + 1];

    UIImage * img = [UIImage imageNamed:imgName];

    cell.img = img;

    return cell;

}

在viewDidLoad设置了当前显示图片的cell是第二个cell,当cell向前滚动脚标-1(cell的indexPath.item的值为0),向后滚动脚标+1(cell的indexPath.item的值为2)
如何拼接图片?---通过全局变量self.index:
- cell向前滚动图片的索引self.index -1 此时cell的indexPath.item为0;然而此时图片的索引需要减1
- cell向后滚动图片的索引self.index+1 此时cell的indexPath.item为2;图片的索引需要加1
- 综上可以得出通过对cell的indexPath.item-1 再加上self.index就可以得出,要在下个图片中显示的图片的索引



-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

    //计算偏移的整数倍,偏移了0或者是2, -1是让self.index图片索引+1 或者 -1以切换图片;

    NSInteger offset = scrollView.contentOffset.x / scrollView.bounds.size.width - 1;

    self.index = (offset + self.index + kPictureCount) % kPictureCount;

    //本质就是改变cell的索引,再根据self.index来切换图片,使用取余让图片索引不至于越界

    //异步主队列执行,为了不让连续滚动停止后,图片有闪动.

    dispatch_async(dispatch_get_main_queue(), ^{

        [self scrollToSecondCell];

    });

}

手动拖拽才会触发的方法.
cell停止滚动后将图片的索引self.index值计算出来,保存在全局变量.为了在数据源第三个方法---返回cell的时候通过cell的indexPath.item的+1或者-1以及图片的索引self.index来正确切换要显示的图片.
滚动停止后将操作放入主队列异步执行,此操作是为了将中间显示的cell的脚标变为1,也就是将当前显示的图片的cell变为第二个cell.放在主队列异步执行(不堵塞主线程,主队列的任务顺序执行,当主线程任务完成后再执行切换cell为第二个cell)不会出现连续滚动后闪动图片的bug.(此句看不懂可以略过).

//封装设置当前显示的cell为第二个cell的方法.

-(void)scrollToSecondCell{

    NSIndexPath * idxPath = [NSIndexPath indexPathForItem:1 inSection:0];

    [self.collectionView scrollToItemAtIndexPath:idxPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];

}

- (void)viewDidLoad {

    [super viewDidLoad];

    self.flowLayout.itemSize = self.collectionView.bounds.size;

    self.flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    self.flowLayout.minimumLineSpacing = 0;

    self.collectionView.backgroundColor = [UIColor whiteColor];

    self.collectionView.pagingEnabled = YES;

    self.collectionView.bounces = NO;

    self.collectionView.showsHorizontalScrollIndicator = NO;

    [self scrollToSecondCell];

//开启定时器使程序启动就开始滚动

    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(nextPic) userInfo:nil repeats:YES];

    NSRunLoop * runloop = [NSRunLoop currentRunLoop];

    [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];

}

@end



#pragma mark - 每隔一秒执行一次切换图片

-(void)nextPic{

    CGFloat w = 2 * self.collectionView.bounds.size.width;

    [self.collectionView setContentOffset:CGPointMake(w, 0) animated:YES];

}

每隔一秒执行一次切换图片的操作



#pragma mark - 手动开始拖拽停止定时器

// 开始拖拽

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {

    // 1. 停止计时器

    [self.timer invalidate];

}

开始拖拽停止定时器



#pragma mark - 停止拖拽开启定时器

// 结束拖拽

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {

    // 重新开启一个计时器

    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(nextPic) userInfo:nil repeats:YES];

    // 把self.timer加入消息循环的模式修改一下

    NSRunLoop *runloop = [NSRunLoop currentRunLoop];

    [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];

}

结束拖拽后重新开启一个定时器.
注意点: 消息循环模式为NSRunLoopCommonModes



-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{

    NSInteger  offset = scrollView.contentOffset.x / scrollView.bounds.size.width;

    //第二个cell一直在中间所以,滚动停止后偏移倍数为0 或者 2 ==offset

    offset = offset - 1;

    //cell的脚标self.index +1 或者 -1;

    self.index = (kPictureCount + offset + self.index) % kPictureCount;

    //将操作放入主队列异步执行,防止连续滚动停止后,图片错位后又变回正常显示的图片.

    dispatch_async(dispatch_get_main_queue(), ^{

        [self scrollToSecondCell];

    });

}

注意点: 加入此方法是因为代码设置collectionView滚动的时候不会触发这个方法: -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView ,使cell进行切换.
手动拖拽触发的方法是: -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
只有触发了上面两个方法中的一个才可以将中间显示的cell设置为始终是第二个cell

1. cell滑动前或者每次滑动结束后都用代码设置当前显示的cell为第二个cell,在数据源第三个方法也就是返回cell的方法中实现图片的切换用的是cell的indexPath.item-1 = -1或者 +1 再加上图片本身的索引值self.index就会得出即将滚出的cell要显示的是上一张图片还是下一张图片.

2. cell滚动结束后要计算当前cell显示图片的索引.是通过scrollview的偏移量contentoffset.x除以scrollview的宽度,计算出当前cell的图片的索引保存.之后再滑动cell的时候,会调用数据源第三个方法,就会使用保存下来的self.index以及加上cell的indexPath.item-1来计算要显示的图片的索引.

3. 注意点: 消息循环模式,代码滚动偏移触发的方法与手动拖拽触发的方法不同.

秒客网

ios之无限自动图片轮播器的实现

控制器的代码详解

手动拖拽才会触发的方法.

3. 注意点: 消息循环模式,代码滚动偏移触发的方法与手动拖拽触发的方法不同.

相关文章

ios之无限 自动 图片轮播器的实现

控制器的代码详解

手动拖拽才会触发的方法.

3. 注意点: 消息循环模式,代码滚动偏移触发的方法与手动拖拽触发的方法不同.

相关文章

ios之无限自动图片轮播器的实现