图片轮播器:
一、实现效果
实现图片的自动轮播
二、实现代码
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; }