轮播图是App中常用的展示界面，主要用到的控件有UIScrollView和UIPageControl。难点有两处，一个是定时器自动轮播，一个是手动操作后不影响定器自动轮播
一、要达到的效果
效果动图.gif
二、逻辑分析
首先，轮播图需要轮播几张图片，就要往scrollView上放几张对应的图片，这里定为3张。图片大小宽度和ScrollView的frame一样，便于翻页。
然后，当图片从头轮播时，到第三张，此时图片应该跳到第一张才能实现循环，但是要保证流畅的话，就不能直接设置scrollView的contentOffset为(0,0)。解决办法是，在scrollView的最后再加一张ImageView，上面放第一张图片，这样的话当轮播到第四张ImageView（视觉效果是第一张图片）时，再设置scrollView的contentOffset为(0,0)，这样视觉效果就流畅了
第三，因为需要往两个方向轮播，所以也要在scrollView的开头加一个ImageView,上面放第三张图片，并设置当轮播到这里时设置scrollView的contentOffset为倒数第二张imageView的位置。
综上：要实现三张图片的轮播，ScrollView的contentSize的宽度为5张图片宽度，第一张ImageView放第三张图片，最后一张ImageView放第一张图片，其他的按顺序放图片。以上能实现的是手指滑动的轮播，还有自动轮播和手指滑动后自动轮播的稍复杂功能，但是核心原理还是上面的原理。直接上代码，更合味
三、代码分析
添加UIScrollView、NStimer和UIPageControl控件
@property (nonatomic)UIScrollView *scrollView;
@property(nonatomic,strong)UIPageControl * pageController;//页面控制器
@property(nonatomic,strong)NSTimer * timer;//计时器
定义几个宏
#define imageCount 3//图片的张数
//当前设备的屏幕宽度
#define kScreenWidth [UIScreen mainScreen].bounds.size.width
//当前设备的屏幕高度
#define kScreenHeight [UIScreen mainScreen].bounds.size.height
初始化控件，并将图片添加上去
//初始化定时器
self.timer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(timerAction) userInfo:nil repeats:YES];
//添加scrollView
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 250)];
self.scrollView.contentSize = CGSizeMake((imageCount + 2)*kScreenWidth, 0);
self.scrollView.pagingEnabled = YES;
self.scrollView.showsHorizontalScrollIndicator = NO;
self.scrollView.bounces = NO;
self.scrollView.scrollEnabled = YES;
self.scrollView.contentOffset = CGPointMake(1*kScreenWidth, 0);
self.scrollView.delegate = self;
[self.view addSubview:self.scrollView];
//添加图片
for (int i = 0; i < imageCount+2; i++) {
if (i == 0) {
UIImageView * imageV = [[UIImageView alloc] initWithFrame:CGRectMake(i*kScreenWidth, 0, kScreenWidth, 250)];
[self.scrollView addSubview:imageV];
imageV.image = [UIImage imageNamed:@"13.jpg"];
} else if(i == imageCount + 1){
UIImageView * imageV = [[UIImageView alloc] initWithFrame:CGRectMake(i*kScreenWidth, 0, kScreenWidth, 250)];
[self.scrollView addSubview:imageV];
imageV.image = [UIImage imageNamed:@"11.jpg"];
}else{
UIImageView * imageV = [[UIImageView alloc] initWithFrame:CGRectMake(i*kScreenWidth, 0, kScreenWidth, 250)];
[self.scrollView addSubview:imageV];
imageV.image = [UIImage imageNamed:[NSString stringWithFormat:@"1%d.jpg",i]];
}
}
//在scrollView上添加page
self.pageController = [[UIPageControl alloc] init];
[self.view addSubview:self.pageController];
self.pageController.frame = CGRectMake(kScreenWidth/2 - 50, 250 - 20, 100, 25);
self.pageController.numberOfPages = imageCount;
self.pageController.pageIndicatorTintColor = [UIColor whiteColor];
self.pageController.currentPageIndicatorTintColor = [UIColor cyanColor];
self.pageController.currentPage = 0;
滑动ScrollView时，要设置页码控件PageControl的改变,还要设置在最后一张和第一张ImageView时要做跳转，这些都可以在代理方法中去实现。遵循代理UIScrollViewDelegate
在只要ScrollView滑动时就会走的代理方法中设置PageControl的改变
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
//当scrollView滑动时，设置page
CGFloat scroll = scrollView.contentOffset.x/kScreenWidth;
NSInteger number = (NSInteger)scroll;//偏移了几个屏幕宽的距离
if (number == imageCount+1||(number == imageCount&&scroll - number > kScreenWidth/2)) {//如果偏移为最大值或将要到最大值
self.pageController.currentPage = 0;
}else if (number == 0||(number == 0&&scroll-number < kScreenWidth/2)){//如果偏移为最小值或者将要到最小值
self.pageController.currentPage = imageCount- 1;
}else{
if (scroll - number>kScreenWidth/2) {
self.pageController.currentPage = (number-1)+1;
}
if (scroll - number<=kScreenWidth/2) {
self.pageController.currentPage = (number-1);
}
}
}
在滑动结束减速时的代理方法中设置偏移
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
if (self.scrollView.contentOffset.x == (imageCount + 1)*kScreenWidth) {//手动滑到最后一张ImageView
self.scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
}else if (self.scrollView.contentOffset.x == 0*kScreenWidth) {//手动滑到第一张ImageView
self.scrollView.contentOffset = CGPointMake(imageCount*kScreenWidth, 0);
}
}
以上实现的是可手动轮播，下面是自动轮播的实现
自动轮播的实现主要是在定时器的定时事件中实现功能。先创建一个全局变量，控制显示的图片角标，并循环使用
static NSInteger pageNumber = 0;//用于记录计时器计时循环
然后实现定时器的定时事件方法
-(void)timerAction{
if(pageNumber == imageCount){//手动滑滑到最大偏移，即显示的是视觉上第一张图
pageNumber = 0;
//跳到第一张图
self.scrollView.contentOffset = CGPointMake(kScreenWidth,0);
//然后滑到视觉上第二张图片
[UIView animateWithDuration:0.5 animations:^{
self.scrollView.contentOffset = CGPointMake((pageNumber+2)*kScreenWidth,0);
}];
}else if(pageNumber == 0){
//滑到视觉上第二张图
[UIView animateWithDuration:0.5 animations:^{
self.scrollView.contentOffset = CGPointMake((pageNumber+2)*kScreenWidth,0);
}];
}else {
[UIView animateWithDuration:0.5 animations:^{
self.scrollView.contentOffset = CGPointMake((pageNumber+2)*kScreenWidth,0);
}];
}
pageNumber++;
}
对于上面的方法中pageNumber的理解：pageNumber=0时，当前显示第一张图，但是将要显示第二张图；等于1时当前显示第二张图，将要显示第三张图，以此类推。当pageNumber=3，这时显示的是最后一张ImageView,也就是第一张图，所以将pageNumber设置为0，因为是要循环显示，所以将Scrollview的偏移设置为(kScreenWidth,0)，即第一张图，此时将要显示的是第二张图，如此便完成了循环自动轮播
手动轮播和自动轮播都已实现，现在要实现的是自动+手动轮播。
思路：当ScrollView正要自动轮播到下一张图时，我刚好进行了手动操作，这样的话ScrollView到底是按自动播放到下一张还是按手动滑到下一张？感觉有冲突。所以这里的处理方式是，只要进行了手动操作，就将自动播放停止，手动操作完毕，在开启自动播放，这样就不冲突了
先写两个方法，开启定时器的方法和结束定时器的方法
-(void)beginAction{//开启定时器
//如果计时器已开启 先停止
if (self.timer) [self stopAction];
self.timer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(timerAction) userInfo:nil repeats:YES];
}
-(void)stopAction{//结束定时器
[self.timer invalidate];
self.timer = nil;
}
首先，在ScrollView开始被拖拽时停止定时器，实现ScrollView开始拖拽的代理方法
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
//结束计时
[self stopAction];
}
在拖拽完毕的时候开启定时器，可以在ScrollView的减速结束的代理方法添加开启定时器的代码（这个代理方法上面写过了，直接添加一行代码即可）。
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
if (self.scrollView.contentOffset.x == (imageCount + 1)*kScreenWidth) {//手动滑到最后一张ImageView
self.scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
}else if (self.scrollView.contentOffset.x == 0*kScreenWidth) {//手动滑到第一张ImageView
self.scrollView.contentOffset = CGPointMake(imageCount*kScreenWidth, 0);
}
//启动定时器
[self beginAction];
}
手指滑动结束后，开始自动播放，此时是定时器的定时事件方法（timerAction）起作用，该播放哪一张图由pageNumber等于几决定，由于定时器停止时pageNumber的值，无法正确指示显示哪一张图了，所以再手动滑动时，应该同步改变pageNumber的值。在ScrollView的减速结束代理方法中加入代码
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
if (self.scrollView.contentOffset.x == (imageCount + 1)*kScreenWidth) {//手动滑到最后一张ImageView
self.scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
}else if (self.scrollView.contentOffset.x == 0*kScreenWidth) {//手动滑到第一张ImageView
self.scrollView.contentOffset = CGPointMake(imageCount*kScreenWidth, 0);
}
//启动定时器
[self beginAction];
//拖拽结束后给记录轮播到第几张的变量赋值
NSInteger number = (NSInteger)self.scrollView.contentOffset.x/kScreenWidth;
if (number == imageCount+1){//在最后一张(向右才会到这里)
pageNumber = 0;
}else if(number == 0){//在scrollView的第一张(向左才会到这里)
pageNumber = imageCount -1;
}else{
pageNumber = number - 1;
}
}
至此，大功告成
四、demo下载
五、补充
今天去面试，面试官说，在没有失焦的情况下，一直滑动，滑动到头，就会滑不动了。这种情况怎么处理？当时没有回答上来，也没考虑过，回家玩了玩以前的DEMO，确实没有考虑这种情况。但是经过反复验证，找到了一种解决办法。也许不是最简单的。先呈上，请品味。
思路：只要scrollView在动，就会走scrollViewDidScroll代理方法，那只要捕捉到偏移量最大和最小的瞬间，并在此瞬间将scrollView的偏移量设置到对应的位置就可以了。我发现一直拖拽的状态是走了scrollViewWillBeginDragging代理方法，但没有走scrollViewDidEndDragging代理方法，一旦走了scrollViewDidEndDragging代理方法，拖拽就结束。所以，我可以设置一个全局变量，记录拖拽的状态。有了拖拽的状态，我就可以在scrollViewDidScroll的方法中捕捉偏移量最大值和最小值。具体看下面实现。
首先添加一个属性，布尔值类型，用来记录是否在拖拽状态
@property(nonatomic,assign)BOOL isDraging;//是否拖拽
当然，应该给一个初始值，这是我的习惯
self.isDraging = NO;
然后给这个属性进行赋值
在scrollView的开始拖拽的代理方法中，修改isDraging属性的值为YES,表示已经进入拖拽状态
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
//结束计时
[self stopAction];
self.isDraging = YES;
}
在scrollView结束拖拽的代理方法中，修改isDraging属性的值为NO,表示已经结束拖拽状态
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
self.isDraging = NO;
}
然后在代理方法：scrollViewDidScroll中加入两个判断，即在拖拽状态下，滑动到最大值和滑动到最小值时，跳转到第一张图片位置（此位置偏移量为一张图片的宽度）和最后一张图片位置（此位置偏移量为3张图片宽度偏移量位置）
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (self.isDraging&&self.scrollView.contentOffset.x == 0) {
self.scrollView.contentOffset = CGPointMake(imageCount*kScreenWidth, 0);//跳到了倒数第二张ImageView(即最后一张图)
}
if (self.isDraging&&self.scrollView.contentOffset.x == (imageCount + 1)*kScreenWidth) {
self.scrollView.contentOffset = CGPointMake(kScreenWidth,0);//偏移量为第一张图
}
...
}
这样问题就解决了。欢迎指点！
