UIScrollView循环滚动图片

转载自  http://www.jianshu.com/p/aa73c273baf2

我们会经常用到循环滚动图片，包括定时滚动，点击触发事件。
以前所知道的循环滚动图片的方法是这样的。比如：一共5张图片，位置为1,2,3,4,5。

1. 创建7个imageView。
2. 将最后一张图片放到第一张图片前面，将第一张图片放到最后一张后面，位置为5,1,2,3,4,5,1。
3. 最后一张图片滚动到第一张图片时，先从第二个图片5滚动到第二个图片1，滚动完之后把位置设置为第一个图片1。从后向前滚动同样的原理。
4. 在scrollViewDidScroll的代理方法里面判断scrollView.contentOffset.x>320*6-1，将scrollView的偏移量设置为320的位置，动画设置为NO。
5. 这样做的原因是从第二个图片5滚动到第二个图片1之后偏移量是320*6，这个值是大于320*6-1的，进入到if语句，将scrollView设置320的位置，则就是第一个图片1的位置，这样就造成一个视觉差，是从最后一张图片滚动到第一张图片的。

以前是那么用的，但是后来觉得这样比较占资源，也比较麻烦，现在是这样的，不管多少张图片只创建3个imageView。

1. 从viewController中取到图片数据源，创建当前需要展示的图片数组长度是3，当前展示的图片位置默认是0。
2. 当前数组根据当前位置取出3张图片，当前展示的图片的前一张和后一张。如果当前需要展示的图片是第一张，则当前数组中的3张图片为图片5、图片1、图片2。如果当前需要展示的图片是最后一张图片，则当前数组中的3张图片为图片4、图片5、图片1。
3. 这样展示的图片是第2张图片，偏移量为320，滑动到下一张图片的时候，设置当前位置为1，设置当前数组图片为图片1、图片2、图片3，刷新UI，并且把scrollView的偏移量设置为320，即展示的图片永远在中间。
4. 点击图片触发的事件通过代理传出当前的图片位置。

CycleScrollView.h中的代码

#import <UIKit/UIKit.h>
@protocol CycleScrollViewDelegate;
@interface CycleScrollView : UIView<UIScrollViewDelegate>

数据源

@property (nonatomic, strong) NSArray *imageArray;

滚动视图。本来是不需要这个属性的，但是有个问题：如果图片正好滚动了一半app进入到后台，再次打开的时候是滚动到一半状态，滚动到下一张图片的时候就好了，所以把这个问题在viewController里面处理。

@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, weak) id<CycleScrollViewDelegate> delegate;
@end

代理方法

@protocol CycleScrollViewDelegate <NSObject>
- (void)cycleScrollView:(CycleScrollView *)cycleScrollView didSelectImageView:(NSInteger)index;
@end

CycleScrollView.m中的代码

#import "CycleScrollView.h"
#import "ImageModel.h" //图片model
#import "UIImageView+WebCache.h" //SDWebImage设置网络图片
#define c_width (self.bounds.size.width+10) //两张图片之前有10点的间隔
#define c_height (self.bounds.size.height)

@implementation CycleScrollView
{
    UIPageControl    *_pageControl; //分页控件
    NSMutableArray *_curImageArray; //当前显示的图片数组
    NSInteger          _curPage;    //当前显示的图片位置
    NSTimer           *_timer;      //定时器
}

重写init方法

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        //滚动视图
        self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, c_width, c_height)];
        self.scrollView.contentSize = CGSizeMake(c_width*3, 0);
        self.scrollView.contentOffset = CGPointMake(c_width, 0);
        self.scrollView.pagingEnabled = YES;
        self.scrollView.showsHorizontalScrollIndicator = NO;
        self.scrollView.delegate = self;
        [self addSubview:self.scrollView];

        //分页控件
        _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, c_height-30, self.bounds.size.width, 30)];
        _pageControl.userInteractionEnabled = NO;
        _pageControl.hidesForSinglePage = YES;
        _pageControl.currentPageIndicatorTintColor = [UIColor redColor];
        _pageControl.pageIndicatorTintColor = [UIColor grayColor];
        [self addSubview:_pageControl];

        //初始化数据，当前图片默认位置是0
        _curImageArray = [[NSMutableArray alloc] initWithCapacity:0];
        _curPage = 0;
    }
    return self;
}

scrollView的代理方法

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //如果scrollView当前偏移位置x大于等于两倍scrollView宽度
    if (scrollView.contentOffset.x >= c_width*2) {
        //当前图片位置+1
        _curPage++;
        //如果当前图片位置超过数组边界，则设置为0
        if (_curPage == [self.imageArray count]) {
            _curPage = 0;
        }
        //刷新图片
        [self reloadData];
        //设置scrollView偏移位置
        [scrollView setContentOffset:CGPointMake(c_width, 0)];
    }

    //如果scrollView当前偏移位置x小于等于0
    else if (scrollView.contentOffset.x <= 0) {
        //当前图片位置-1
        _curPage--;
        //如果当前图片位置小于数组边界，则设置为数组最后一张图片下标
        if (_curPage == -1) {
            _curPage = [self.imageArray count]-1;
        }
        //刷新图片
        [self reloadData];
        //设置scrollView偏移位置
        [scrollView setContentOffset:CGPointMake(c_width, 0)];
    }
}

//停止滚动的时候回调
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    //设置scrollView偏移位置
    [scrollView setContentOffset:CGPointMake(c_width, 0) animated:YES];
}

重写图片数组的set方法

- (void)setImageArray:(NSMutableArray *)imageArray
{
    _imageArray = imageArray;
    //设置分页控件的总页数
    _pageControl.numberOfPages = imageArray.count;
    //刷新图片
    [self reloadData];

    //开启定时器
    if (_timer) {
        [_timer invalidate];
        _timer = nil;
    }

    //判断图片长度是否大于1，如果一张图片不开启定时器
    if ([imageArray count] > 1) {
        _timer = [NSTimer timerWithTimeInterval:5 target:self selector:@selector(timerScrollImage) userInfo:nil repeats:YES];
        [[NSRunLoop currentRunLoop] addTimer:_timer forMode:NSDefaultRunLoopMode];
        [[NSRunLoop currentRunLoop] runMode:UITrackingRunLoopMode beforeDate:[NSDate date]];
    }
}

刷新图片的方法

- (void)reloadData
{
    //设置页数
    _pageControl.currentPage = _curPage;
    //根据当前页取出图片
    [self getDisplayImagesWithCurpage:_curPage];

    //从scrollView上移除所有的subview
    NSArray *subViews = [self.scrollView subviews];
    if ([subViews count] > 0) {
        [subViews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    }

    //创建imageView
    for (int i = 0; i < 3; i++) {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(c_width*i, 0, self.bounds.size.width, c_height)];
        imageView.userInteractionEnabled = YES;
        [self.scrollView addSubview:imageView];

        //设置网络图片
        ImageModel *model = _curImageArray[i];
        NSURL *url = [NSURL URLWithString:model.image_url];
        [imageView sd_setImageWithURL:url placeholderImage:[UIImage imageNamed:@"placeholder_320x120.png"]];

        //tap手势
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapImage:)];
        [imageView addGestureRecognizer:tap];
    }
}

获取图片

- (void)getDisplayImagesWithCurpage:(NSInteger)page
{
    //取出开头和末尾图片在图片数组里的下标
    NSInteger front = page - 1;
    NSInteger last = page + 1;

    //如果当前图片下标是0，则开头图片设置为图片数组的最后一个元素
    if (page == 0) {
        front = [self.imageArray count]-1;
    }

    //如果当前图片下标是图片数组最后一个元素，则设置末尾图片为图片数组的第一个元素
    if (page == [self.imageArray count]-1) {
        last = 0;
    }

    //如果当前图片数组不为空，则移除所有元素
    if ([_curImageArray count] > 0) {
        [_curImageArray removeAllObjects];
    }

    //当前图片数组添加图片
    [_curImageArray addObject:self.imageArray[front]];
    [_curImageArray addObject:self.imageArray[page]];
    [_curImageArray addObject:self.imageArray[last]];
}

定时器的方法

- (void)timerScrollImage
{
    //刷新图片
    [self reloadData];

    //设置scrollView偏移位置
    [self.scrollView setContentOffset:CGPointMake(c_width*2, 0) animated:YES];
}

tap图片的方法

- (void)tapImage:(UITapGestureRecognizer *)tap
{
    //设置代理
    if ([_delegate respondsToSelector:@selector(cycleScrollView:didSelectImageView:)]) {
        [_delegate cycleScrollView:self didSelectImageView:_curPage];
    }
}

dealloc方法

- (void)dealloc
{
    //代理指向nil，关闭定时器
    self.scrollView.delegate = nil;
    [_timer invalidate];
}
@end

viewController里面的代码

#import "CycleScrollView.h"
@interface RootViewController:BaseViewController<CycleScrollViewDelegate> 
@property (nonatomic, strong) CycleScrollView *imageScrollView;

self.imageScrollView = [[CycleScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 120)];
self.imageScrollView.delegate = self;
[headerView addSubview:self.imageScrollView];

获取到的网络数据方法里，设置循环滚动图片的图片数组

if ( [[resultDict objectForKey:@"big_image_list"] count] > 0) {
    self.imageArray = [resultDict objectForKey:@"big_image_list"];
    self.imageScrollView.imageArray = self.imageArray;
}

代理方法回调

#pragma mark - CycleScrollViewDelegate
- (void)cycleScrollView:(CycleScrollView *)cycleScrollView didSelectImageView:(NSInteger)index
{
    NSLog(@"点击了第%ld张图片",(long)index+1);
    ImageModel *model = self.imageArray[index];
}

处理图片正好滚动了一半app进入到后台，再次打开的时候是滚动到一半状态的问题。

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    //设置图片循环滚动，如果偏移位置大于330，则设置为330
    if (self.imageScrollView.scrollView.contentOffset.x > 330) {
        self.imageScrollView.scrollView.contentOffset = CGPointMake(330*2, 0);
    }
}