UIScrollView实现图片轮播器及其无限循环效果

图片轮播器：

一、实现效果

实现图片的自动轮播

          

二、实现代码

storyboard中布局

代码：

  1 #import "YYViewController.h"
  2
  3 @interface YYViewController () <UIScrollViewDelegate>
  4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview;
  5 /**
  6  *  页码
  7  */
  8 @property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
  9
 10 @property (nonatomic, strong) NSTimer *timer;
 11 @end
 12
 13 @implementation YYViewController
 14
 15 - (void)viewDidLoad
 16 {
 17     [super viewDidLoad];
 18
 19 //    图片的宽
 20     CGFloat imageW = self.scrollview.frame.size.width;
 21 //    CGFloat imageW = 300;
 22 //    图片高
 23     CGFloat imageH = self.scrollview.frame.size.height;
 24 //    图片的Y
 25     CGFloat imageY = 0;
 26 //    图片中数
 27     NSInteger totalCount = 5;
 28 //   1.添加5张图片
 29     for (int i = 0; i < totalCount; i++) {
 30         UIImageView *imageView = [[UIImageView alloc] init];
 31 //        图片X
 32         CGFloat imageX = i * imageW;
 33 //        设置frame
 34         imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
 35 //        设置图片
 36         NSString *name = [NSString stringWithFormat:@"img_0%d", i + 1];
 37         imageView.image = [UIImage imageNamed:name];
 38 //        隐藏指示条
 39         self.scrollview.showsHorizontalScrollIndicator = NO;
 40
 41         [self.scrollview addSubview:imageView];
 42     }
 43
 44 //    2.设置scrollview的滚动范围
 45     CGFloat contentW = totalCount *imageW;
 46     //不允许在垂直方向上进行滚动
 47     self.scrollview.contentSize = CGSizeMake(contentW, 0);
 48
 49 //    3.设置分页
 50     self.scrollview.pagingEnabled = YES;
 51
 52 //    4.监听scrollview的滚动
 53     self.scrollview.delegate = self;
 54
 55     [self addTimer];
 56 }
 57
 58 - (void)nextImage
 59 {
 60     int page = (int)self.pageControl.currentPage;
 61     if (page == 4) {
 62         page = 0;
 63     }else
 64     {
 65         page++;
 66     }
 67
 68 //  滚动scrollview
 69     CGFloat x = page * self.scrollview.frame.size.width;
 70     self.scrollview.contentOffset = CGPointMake(x, 0);
 71 }
 72
 73 // scrollview滚动的时候调用
 74 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
 75 {
 76     NSLog(@"滚动中");
 77 //    计算页码
 78 //    页码 = (contentoffset.x + scrollView一半宽度)/scrollView宽度
 79     CGFloat scrollviewW =  scrollView.frame.size.width;
 80     CGFloat x = scrollView.contentOffset.x;
 81     int page = (x + scrollviewW / 2) /  scrollviewW;
 82     self.pageControl.currentPage = page;
 83 }
 84
 85 // 开始拖拽的时候调用
 86 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
 87 {
 88 //    关闭定时器(注意点; 定时器一旦被关闭,无法再开启)
 89 //    [self.timer invalidate];
 90     [self removeTimer];
 91 }
 92
 93 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
 94 {
 95 //    开启定时器
 96     [self addTimer];
 97 }
 98
 99 /**
100  *  开启定时器
101  */
102 - (void)addTimer{
103
104     self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
105 106 }
107 /**
108  *  关闭定时器
109  */
110 - (void)removeTimer
111 {
112     [self.timer invalidate];
113 }
114 @end

提示：以下两个属性已经和storyboard中的控件进行了连线。

@property (weak, nonatomic) IBOutletUIScrollView *scrollview;

@property (weak, nonatomic) IBOutletUIPageControl *pageControl;

补充：定时器NSTimer

定时器 适合用来隔一段时间做一些间隔比较长的操作

NSTimeInterval:多长多件操作一次

target :操作谁

selector : 要操作的方法

userInfo: 传递参数

repeats: 是否重复

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

-------------------------------------------------------------------

无线循环效果：

平时APP中的广告位、或者滚动的新闻图片等用到的就是图片轮播这种效果，实现方式主要有两种，一种是ScrollView+ImageView，另一种则是通过CollectionView，今天总结的是ScrollView这种方式。

1.图片轮播效果实现

主要实现思路是：根据图片总数及宽高设置好ScrollView的大小，每切换一张图片相当于在ScrollView上进行一个图片宽度的移动行为，并加入定时器，实现自动轮播。

如图所示，设置好ScrollView及PageControl，ScrollView的contentSize根据图片数量确定，注意启用pagingEnabled这个属性，确保整页移动，同样pageControl也是根据图片数量来确定，每一页代表一张图片。

图片命名采用数字序号方式，方便使用，需要注意的是，pageControl是由0开始的，也就是0对应image1，1对应image2...依次类推

加载图片并将准备好的图片在ScrollView里设置好位置，即将这些图片一张紧挨着一张排列在ScrollView中。

通过ScrollView的代理方法，在ScrollView滚动结束的时候根据 contentOffset 更新页码。

定时器设置，这里设置为每隔2秒滚动更新一次，实际上就是每隔2秒更新一次页码，根据页码的变化，让ScrollView跟着移动，每次移动一张图片的距离

这里还需要注意的是，由于加入定时器有自动轮播的效果了，会与手动拖拽ScrollView冲突，即手动拖拽ScrollView过程中可能 ScrollView可能自动移动更新图片了，显然这种效果是不符合用户习惯的，这时需要在ScrollView的代理事件中进行处理，即开始拖拽 ScrollView时停止定时器，拖拽结束后再开启定时器。

那到这里是不是就结束了呢？我们看看效果图：

这里有两个问题：

（1）首先是移动到最后一张图片时无法移动了，如果是制作APP的新特性页面，这样的滚动效果已经可以了，但如果在广告位或者是滚动新闻这些场景下这种效果是不够好的，一般滚动到最后一张图片时，继续拖拽都会移动到第一张图片，实现一种滚动循环效果。

（2）定时器自动轮播图片时，确实图片循环轮播了，但是仔细看会发现，ScrollView是由最后一种图片位置生硬得拉回到第一张图片的位置，效果也不够理想。

解决办法下面接着说。

2.图片轮播无限循环效果实现

刚刚说到第一个问题，ScrollView移动到最后一张图片时无法移动了，这是因为ScrollView已经移动到最后，而图片又是依次排列，自然也就无法移动。

解决办法是，我们换一个思路实现图片轮播效果，ScrollView上只放三个ImageView，屏幕始终显示中间的ImageView，左边 和右边的ImageView分别代表前一张图片和后一张图片，屏幕移动的时候，中间的ImageView变化，同时左右两边的ImageView也随之变 化，两种边界情况：

（1）当屏幕显示最后一张图片时，右边的ImageView也也即下一站图片应该是最开始的第一张图片；

（2）当屏幕显示最开始的第一张图片时，左边的ImageView也即上一张图片应该是最后一张图片。

这样三个ImageView不断变化就造成一种图片轮播无限循环的效果。 参考： http://www.cnblogs.com/kenshincui/p/3913885.html

相对于之前的效果，有一些改变,主要有：

（1）ScrollView只需要设置三个ImageView即可，并且默认显示中间的ImageView

（2）根据ScrollView的移动情况，迅速变化三个ImageView中图片数据

（3）ImageView更新完毕后，偷偷把ScrollView拉回到中间的ImageView位置，这样视觉效果上就实现了无限循环的效果

效果图：

但是，这里在加入定时器后实现图片轮播自动循环时遇到了问题，主要是初始化显示第一张图片与根据定时器设置自动移动ScrollView有一些冲突，在code4App上找到其他人一个工程，采用的思路相同，单独封装了ScrollView进行处理，已经解决该问题。

可参考：http://code4app.com/ios/AdScrollerView/54955a78933bf0f2168b45b4

图片轮播器参考自：http://www.cnblogs.com/wendingding/p/3763527.html

无限循环效果参考自：http://www.tuicool.com/articles/reu22eu

额外补充：

动态修改UIPageControll的页码有两种方式：

1.实时计算

    - (void)scrollViewDidScroll:(nonnull UIScrollView *)scrollView
    {
    // 1.计算页码
    // 当前页码 = 偏移位 / UIScrollView的宽度
    CGFloat page = scrollView.contentOffset.x / scrollView.frame.size.width;
    int currnetPage = page + 0.5;
    // 2.修改页码
    self.pageControl.currentPage = currnetPage;
    }

2.拖拽完毕计算

    // + 2.1停止拖拽
    - (void)scrollViewDidEndDragging:(nonnull UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
    {
    if (decelerate == NO) {
        [self scrollViewDidEndDecelerating:scrollView];
    }
    }

    // + 2.2停止减速
    - (void)scrollViewDidEndDecelerating:(nonnull UIScrollView *)scrollView
    {
    // 1.计算页码
    // 当前页码 = 偏移位 / UIScrollView的宽度
    int page = scrollView.contentOffset.x / scrollView.frame.size.width;
    NSLog(@"page = %i", page);

    // 2.修改页码
    self.pageControl.currentPage = page;
}