经常有园友会问”博主，有没有图片无限滚动的Demo呀？”， 正儿八经的图片滚动的Demo我这儿还真没有，今天呢就封装一个可以在项目中直接使用的图片轮播。没看过其他iOS图片无限轮播的代码，也不了解他们的原理，我今天封装这个图片无限轮播是借鉴Web前端中的做法，因为之前写Web前端的时候，实现幻灯片就是这么做的，今天就在iPhone上搞搞。下面的东西是自己写的了，关于轮播的东西这个开源项目也是相当不错的https://github.com/nicklockwood/iCarousel ,感兴趣的可以看一下。那是相当的强大，虽然没必要重复造轮子但是原理还是有必要理解的。今天的博客就介绍图片轮播的一种解决方案，下篇博客中在介绍另一种图片轮播的解决方案。
一、Demo运行效果、原理及调用方式
1.运行效果
下面的GIF呢就是Demo的运行效果，一定间隔后，图片会自动切换，当然也支持手指滑动。切换到相应图片时，点击图片，会通过Block回调的方式给出该图片的Index, 在Demo中使用提示框给出Index, 当然在项目中拿到Index你可以做很多事情的，Index就是图片的Tag值，也就是标记着你点击的是那张图片。下图中是三张图片进行轮播。
2.原理
下面是实现图片无限轮播的原理图（借鉴Web前端幻灯片的写法，欢迎大家提出好的解决方案），原理用一句话概括：如果显示3张图片的话，就往ScrollView上贴4张图顺序是3-1-2-3。首次显示1的位置，然后滑动，等滑动到最后一个3时，无动画切换到第一个3的位置，然后在滚动。原理图如下，就可以按着下面的原理图来布局和实例化控件了。
3.组件调用方式
下面这段代码是组件的初始化和属性的设置，分为如下几部：
（1）：确定组件的位置
（2）：生成图片名字数组
（3）：通过便利构造器初始化控件，并传入imageName数组
（4）：设置属性（可选）， scrollInterval-图片切换间隔，animationInterVale-图片运动时间
（5）：addTapEventForImageWithBlock：图片点击后的回调
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
-(void) addZLImageViewDisPlayView{ //获取要显示的位置 CGRect screenFrame = [[UIScreen mainScreen] bounds]; CGRect frame = CGRectMake(10, 60, screenFrame.size.width - 20, 200); NSArray *imageArray = @[@"01.jpg", @"02.jpg", @"03.jpg"]; //初始化控件 ZLImageViewDisplayView *imageViewDisplay = [ZLImageViewDisplayView zlImageViewDisplayViewWithFrame:frame WithImages:imageArray]; //设定轮播时间 imageViewDisplay.scrollInterval = 2; //图片滚动的时间 imageViewDisplay.animationInterVale = 0.6; //把该视图添加到相应的父视图上 [self.view addSubview:imageViewDisplay]; [imageViewDisplay addTapEventForImageWithBlock:^(NSInteger imageIndex) { NSString *str = [NSString stringWithFormat:@"我是第%ld张图片", imageIndex]; UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"提示" message:str delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil, nil]; [alter show]; }]; } |
二、核心代码介绍
1.组件的便利初始化方法如下，传入的参数是组件的frame, 和要显示的图片名字数组。在便利初始化方法中初始化一些属性和调用相关初始化方法。初始化内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
#pragma -- mark 遍历初始化方法 - (instancetype)initWithFrame: (CGRect)frame WithImages: (NSArray *) images { self = [super initWithFrame:frame]; if (self) { //获取滚动视图的宽度 _widthOfView = frame.size.width; //获取滚动视图的高度 _heightView = frame.size.height; _scrollInterval = 3; _animationInterVale = 0.7; //当前显示页面 _currentPage = 1; _imageViewcontentModel = UIViewContentModeScaleAspectFill; self.clipsToBounds = YES; //初始化滚动视图 [self initMainScrollView]; //添加ImageView [self addImageviewsForMainScrollWithImages:images]; //添加timer [self addTimerLoop]; [self addPageControl]; } return self; } |
2.便利构造器
为我们的组件添加上便利构造器，便利构造器当然是类方法了，传的参数和便利初始化方法一样，该方法主要就是类的初始化，然后调用便利初始化方法， 并返回类的对象。代码如下：
