04-UIScrollView分页功能实现循环查看图片

1.常见属性

CGSize contentSize ：设置UIScrollView的滚动范围

CGPoint contentOffset ：UIScrollView当前滚动的位置

UIEdgeInsets contentInset ：这个属性可以在四周增加滚动范围

2.其他属性
BOOL bounces 是否有弹簧效果

BOOL scrollEnabled 是否能滚动

BOOL showsHorizontalScrollIndicator 是否显示水平方向的滚动条

BOOL showsVerticalScrollIndicator     是否显示垂直方向的滚动条

UIScrollViewIndicatorStyle indicatorStyle  设定滚动条的样式

BOOL dragging 是否正在被拖拽

BOOL tracking  当touch后还没有拖动的时候值是YES，否则NO

BOOL decelerating 是否正在减速

BOOL zooming 是否正在缩放

3.手势缩放
设置UIScrollView的id<UISCrollViewDelegate> delegate代理对象

设置minimumZoomScale ：缩小的最小比例

设置maximumZoomScale ：放大的最大比例

让代理对象实现下面的方法，返回需要缩放的视图控件

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

跟缩放相关的常用方法还有

正在缩放的时候调用

-(void)scrollViewDidZoom:(UIScrollView *)scrollView

缩放完毕的时候调用

-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale

4.分页效果
设置pagingEnabled=YES即可，UIScrollView会被分割成多个独立页面，用户的滚动体验则变成了页面翻转

一般会配合UIPageControl增强分页效果，UIPageControl常用属性：

NSInteger numberOfPages : 总页数

NSInteger currentPage : 当前的页码

BOOL hidesForSinglePage : 当只有一页的时候，是否要隐藏视图

介绍了UIScrollView的基本属性之后呢，今天主要内容是使用UIScrollView的分页功能做照片的循环演示。

// 1.添加scrollView    _scrollView = [[UIScrollView alloc] initWithFrame:(CGRect){0, 0, self.frame.size}];    _scrollView.contentSize = CGSizeMake(_scrollView.frame.size.width * 3, 0);//三个_scrollView的宽度    _scrollView.contentOffset = CGPointMake(_scrollView.frame.size.width, 0);    _scrollView.showsHorizontalScrollIndicator = NO;    _scrollView.showsVerticalScrollIndicator = NO;    _scrollView.pagingEnabled = YES;    _scrollView.delegate = self;//代理    [self addSubview:_scrollView];

// 2.添加pageControl    _pageControl = [[UIPageControl alloc] initWithFrame:CGRectZero];    [self addSubview:_pageControl];

pageControl的位置以及numberOfPages可以根据图片数量来进行设置，scrollImage是图片数组

//设置pageControl    if (self.scrollImage.count <= 8) {       //居中显示pageControl       CGFloat x = self.frame.size.width / 2 - (_scrollImage.count * 13) / 2;       _pageControl.frame = CGRectMake(x, _scrollView.frame.size.height - 30, _scrollImage.count * 13, 37);    } else {//如果图片数量大于8，则隐藏pageControl       _pageControl.hidden = YES;    }    _pageControl.numberOfPages = _scrollImage.count;

然后就是添加图片imageView:

// 3.添加imageView，只需要3个imageView就可以实现循环查看图片的功能    CGFloat width = _scrollView.frame.size.width;    CGFloat height = _scrollView.frame.size.height;    _imageView0 = [[UIImageView alloc] initWithFrame:CGRectMake(width * 0, 0, width, height)];    _imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(width * 1, 0, width, height)];    _imageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(width * 2, 0, width, height)];    [_scrollView addSubview:_imageView0];    [_scrollView addSubview:_imageView1];    [_scrollView addSubview:_imageView2];

关于初始化图片:

//设置3个imageView的image        if (_scrollImage.count == 1){            _imageView0.image = [_scrollImage lastObject];            _imageView1.image = [_scrollImage lastObject];            _imageView2.image = [_scrollImage lastObject];        }else if (_scrollImage.count == 2){            _imageView0.image = [_scrollImage lastObject];            _imageView1.image = _scrollImage[0];            _imageView2.image = [_scrollImage lastObject];        }else if (_scrollImage.count >= 3) {            _imageView0.image = [_scrollImage lastObject];            _imageView1.image = _scrollImage[0];            _imageView2.image = _scrollImage[1];        }

接下来就是实现<UIScrollViewDelegate>协议里边的这几个方法：

//拖拽UIScrollView的时候就会调用- (void)scrollViewDidScroll:(UIScrollView *)scrollView{    if (scrollView.contentOffset.x <= 0) {        [self previousImage];        [scrollView setContentOffset:CGPointMake(scrollView.frame.size.width, 0)];    }    if (scrollView.contentOffset.x >= 2 * scrollView.frame.size.width) {        [self nextImage];        [scrollView setContentOffset:CGPointMake(scrollView.frame.size.width, 0)];    }}

当scrollView.contentOffset.x <=0时，说明用户正在向上翻页，调用previousImage方法，更换imageView的图片，

[scrollView setContentOffset:CGPointMake(scrollView.frame.size.width,0)];回到scrollView中间

/** *  上一页 */- (void)previousImage{    if (self.scrollImage.count < 1) {        return;//没有图片直接返回    }    //设置pageControl    if (_pageControl.currentPage == 0) {        _pageControl.currentPage = self.scrollImage.count - 1;    }else {        _pageControl.currentPage--;    }    /**     *  设置_imageView（_imageView0展示的是上一张图片）所以有currentPage - 1     *  但是scrollImage图片数组是有范围的(scrollImage.count - 1)     */    _imageView2.image = _imageView1.image;    _imageView1.image = _imageView0.image;    if (_pageControl.currentPage == 0) {        _imageView0.image = self.scrollImage[self.scrollImage.count - 1];    }else {        _imageView0.image = self.scrollImage[_pageControl.currentPage - 1];    }}

类似的，下一页：

/** *  下一页 */- (void)nextImage{    if (self.scrollImage.count < 1) {        return;//没有图片直接返回    }    //设置pageControl    if (_pageControl.currentPage == self.scrollImage.count - 1) {        _pageControl.currentPage = 0;    }else {        _pageControl.currentPage++;    }    /**     *  设置_imageView（_imageView2展示的是下一张图片）所以有currentPage + 1     *  但是scrollImage图片数组是有范围的(scrollImage.count - 1)     */    _imageView0.image = _imageView1.image;    _imageView1.image = _imageView2.image;    if (_pageControl.currentPage == self.scrollImage.count - 1) {        _imageView2.image = self.scrollImage[0];    }else {        _imageView2.image = self.scrollImage[_pageControl.currentPage + 1];    }    }

到此，用UIScrollView的分页功能实现照片的循环查看基本就结束了。我们可以用timer来实现照片的自动演示，非常简单

_timer = [NSTimer timerWithTimeInterval:timeInterval target:self selector:@selector(autoChangeImage) userInfo:nil repeats:YES];        [[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];

然后实现autoChangeImage方法：

/** *  定时器调用 */- (void)autoChangeImage{    [_scrollView setContentOffset:CGPointMake(2*_scrollView.frame.size.width, 0) animated:YES];}

附上效果：

附上Demo：https://github.com/erpapa/HYScrollView