UIScrollView循环滚动图片

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

创建7个

imageView

。

将最后一张图片放到第一张图片前面，将第一张图片放到最后一张后面，位置为5,1,2,3,4,5,1。

最后一张图片滚动到第一张图片时，先从第二个图片5滚动到第二个图片1，滚动完之后把位置设置为第一个图片1。从后向前滚动同样的原理。

在

scrollViewDidScroll

的代理方法里面判断

scrollView.contentOffset.x>320*6-1

，将

scrollView

的偏移量设置为

320

的位置，动画设置为

NO

。

这样做的原因是从第二个图片5滚动到第二个图片1之后偏移量是

320*6

，这个值是大于

320*6-1

的，进入到

if

语句，将

scrollView

设置

320

的位置，则就是第一个图片1的位置，这样就造成一个视觉差，是从最后一张图片滚动到第一张图片的。

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

imageView

。

从

viewController

中取到图片数据源，创建当前需要展示的图片数组长度是3，当前展示的图片位置默认是0。

当前数组根据当前位置取出3张图片，当前展示的图片的前一张和后一张。如果当前需要展示的图片是第一张，则当前数组中的3张图片为图片5、图片1、图片2。如果当前需要展示的图片是最后一张图片，则当前数组中的3张图片为图片4、图片5、图片1。

这样展示的图片是第2张图片，偏移量为

320

，滑动到下一张图片的时候，设置当前位置为1，设置当前数组图片为图片1、图片2、图片3，刷新UI，并且把

scrollView

的偏移量设置为

320

，即展示的图片永远在中间。

点击图片触发的事件通过代理传出当前的图片位置。

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);
}
}