iOS开发之多图片无缝滚动组件封装与使用

  经常有园友会问"博主,有没有图片无限滚动的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 -(void) addZLImageViewDisPlayView{
 2     
 3     //获取要显示的位置
 4     CGRect screenFrame = [[UIScreen mainScreen] bounds];
 5     
 6     CGRect frame = CGRectMake(10, 60, screenFrame.size.width - 20, 200);
 7     
 8     NSArray *imageArray = @[@"01.jpg", @"02.jpg", @"03.jpg"];
 9     
10     //初始化控件
11     ZLImageViewDisplayView *imageViewDisplay = [ZLImageViewDisplayView zlImageViewDisplayViewWithFrame:frame WithImages:imageArray];
12     
13     //设定轮播时间
14     imageViewDisplay.scrollInterval = 2;
15     
16     //图片滚动的时间
17     imageViewDisplay.animationInterVale = 0.6;
18     
19     //把该视图添加到相应的父视图上
20     [self.view addSubview:imageViewDisplay];
21     
22     [imageViewDisplay addTapEventForImageWithBlock:^(NSInteger imageIndex) {
23         NSString *str = [NSString stringWithFormat:@"我是第%ld张图片", imageIndex];
24         UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"提示" message:str delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
25         [alter show];
26     }];
27     
28 }

  二、核心代码介绍

    1.组件的便利初始化方法如下,传入的参数是组件的frame, 和要显示的图片名字数组。在便利初始化方法中初始化一些属性和调用相关初始化方法。初始化内容如下:

 1 #pragma -- mark 遍历初始化方法
 2 - (instancetype)initWithFrame: (CGRect)frame
 3                WithImages: (NSArray *) images
 4 {
 5     self = [super initWithFrame:frame];
 6     if (self) {
 7         //获取滚动视图的宽度
 8         _widthOfView = frame.size.width;
 9         
10         //获取滚动视图的高度
11         _heightView = frame.size.height;
12         
13         _scrollInterval = 3;
14         
15         _animationInterVale = 0.7;
16         
17         //当前显示页面
18         _currentPage = 1;
19         
20         _imageViewcontentModel = UIViewContentModeScaleAspectFill;
21         
22         self.clipsToBounds = YES;
23         
24         //初始化滚动视图
25         [self initMainScrollView];
26         
27         //添加ImageView
28         [self addImageviewsForMainScrollWithImages:images];
29         
30         //添加timer
31         [self addTimerLoop];
32         
33         [self addPageControl];
34         
35     }
36     return self;
37 }

    2.便利构造器

    为我们的组件添加上便利构造器,便利构造器当然是类方法了,传的参数和便利初始化方法一样,该方法主要就是类的初始化,然后调用便利初始化方法, 并返回类的对象。代码如下:

#pragma -- 便利构造器
+ (instancetype) zlImageViewDisplayViewWithFrame: (CGRect) frame
                                      WithImages: (NSArray *) images{
    ZLImageViewDisplayView *instance = [[ZLImageViewDisplayView alloc] initWithFrame:frame WithImages:images];
    return instance;
}

    3.初始化ScrollView

    往我们自定义组件视图上添加ScrollView, ScrollView的的大小和我们自定义组件的大小一样,并且设置相关属性,设置代理方法,代码如下:

 1 #pragma -- mark 初始化ScrollView
 2 - (void) initMainScrollView{
 3     
 4     _mainScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, _widthOfView, _heightView)];
 5     
 6     _mainScrollView.contentSize = CGSizeMake(_widthOfView, _heightView);
 7     
 8     _mainScrollView.pagingEnabled = YES;
 9     
10     _mainScrollView.showsHorizontalScrollIndicator = NO;
11     
12     _mainScrollView.showsVerticalScrollIndicator = NO;
13     
14     _mainScrollView.delegate = self;
15     
16     [self addSubview:_mainScrollView];
17 }

    4.添加PageControl

      初始化PageControl, 配置相关属性,并添加到我们的自定义组件上,代码如下:

 1 #pragma 添加PageControl
 2 - (void) addPageControl{
 3     _imageViewPageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, _heightView - 20, _widthOfView, 20)];
 4     
 5     _imageViewPageControl.numberOfPages = _imageViewArray.count;
 6     
 7     _imageViewPageControl.currentPage = _currentPage - 1;
 8     
 9     _imageViewPageControl.tintColor = [UIColor blackColor];
10     
11     [self addSubview:_imageViewPageControl];
12 }

    5.添加ImageView和Image

    往ScrollView上添加ImageView和Image, 下面这个方法也是核心代码,我们根据是第几张图片来计算图片的Frame进行布局,每张图片的大小就是我们组件的大小,根据上面原理的介绍,ScrollView上的第一张图片和最后一张图片一样,你想显示的第一张图片放到ScrollView上的第二张,并改变Scollview的Contentoffset显示ScrollView上的第二张图片,代码如下:

 1 #pragma -- mark 给ScrollView添加ImageView
 2 -(void) addImageviewsForMainScrollWithImages: (NSArray *) images{
 3     //设置ContentSize
 4     _mainScrollView.contentSize = CGSizeMake(_widthOfView * (images.count+1), _heightView);
 5     
 6     _imageViewArray = images;
 7     
 8     for ( int i = 0; i < _imageViewArray.count + 1; i ++) {
 9         
10         CGRect currentFrame = CGRectMake(_widthOfView * i, 0, _widthOfView, _heightView);
11         
12         UIImageView *tempImageView = [[UIImageView alloc] initWithFrame:currentFrame];
13         
14         tempImageView.contentMode = _imageViewcontentModel;
15         
16         tempImageView.clipsToBounds = YES;
17         
18         NSString *imageName;
19         
20         if (i == 0) {
21             imageName = [_imageViewArray lastObject];
22         } else {
23             imageName = _imageViewArray[i - 1];
24         }
25         
26         UIImage *imageTemp = [UIImage imageNamed:imageName];
27         [tempImageView setImage:imageTemp];
28         
29         [_mainScrollView addSubview:tempImageView];
30     }
31     
32     _mainScrollView.contentOffset = CGPointMake(_widthOfView, 0);
33     
34 }

    6.添加定时器

    想让图片自己动起来,是少不了定时器的,为我们的组件添加定时器,下面的方法就是初始化定时器方法:

1 - (void) addTimerLoop{
2     
3     if (_timer == nil) {
4         _timer = [NSTimer scheduledTimerWithTimeInterval:_scrollInterval target:self selector:@selector(changeOffset) userInfo:nil repeats:YES];
5     }
6 }

    7.定时器执行的方法

    下面的方法就是定时器执行的方法,当时间到时,自动改变ScrollView的ContentOffset.x的值,有动画的切换到下一张图片。如果目前是最后一张图片则无动画的切换到ScrollView的第一张图片,因为第一张图片和最后一张图片是一样的,所以用户看不到这个无动画的切换,切换后,图片有开始从第一个开始滚动,所以就可以无限循环的滚动了,下面也是核心代码:

 1 -(void) changeOffset{
 2     
 3     _currentPage ++;
 4     
 5     if (_currentPage == _imageViewArray.count + 1) {
 6         _currentPage = 1;
 7     }
 8     
 9     [UIView animateWithDuration:_animationInterVale animations:^{
10         _mainScrollView.contentOffset = CGPointMake(_widthOfView * _currentPage, 0);
11     } completion:^(BOOL finished) {
12         if (_currentPage == _imageViewArray.count) {
13             _mainScrollView.contentOffset = CGPointMake(0, 0);
14         }
15     }];
16     
17      _imageViewPageControl.currentPage = _currentPage - 1;
18     
19 }

    8.手动切换

    上面介绍的是使用NSTimer来实现自动切换,那么如何让组件支持手动切换呢? 要支持手动切换就得在我们ScrollView的回调中进行处理了。在用户手动滑动后的方法中去做我们要做的事情,也就是判断是不是最后一张图片,然后在暂停一下定时器即可,对应的回调方法如下:

 1 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
 2     NSInteger currentPage = scrollView.contentOffset.x / _widthOfView;
 3     
 4     if(currentPage == 0){
 5         _mainScrollView.contentOffset = CGPointMake(_widthOfView * _imageViewArray.count, 0);
 6         _imageViewPageControl.currentPage = _imageViewArray.count;
 7         _currentPage = _imageViewArray.count;
 8     }
 9     
10     if (_currentPage + 1 == currentPage || currentPage == 1) {
11         _currentPage = currentPage;
12         
13         if (_currentPage == _imageViewArray.count + 1) {
14             _currentPage = 1;
15         }
16         
17         if (_currentPage == _imageViewArray.count) {
18             _mainScrollView.contentOffset = CGPointMake(0, 0);
19         }
20         
21         _imageViewPageControl.currentPage = _currentPage - 1;
22         [self resumeTimer];
23         return;
24     }
25     
26     
27 }

    9.暂停定时器

    手动滑动后要暂停定时器一段时间,因为不暂停的话,你手动切换完,有时会立刻切换到下一张图片,下面是暂停定时器的方法,然后在过一段时间后自动激活定时器。方法如下

 1 #pragma 暂停定时器
 2 -(void)resumeTimer{
 3     
 4     if (![_timer isValid]) {
 5         return ;
 6     }
 7     
 8     [_timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:_scrollInterval-_animationInterVale]];
 9     
10 }

    经过上面的这些代码组件就可以被调用了,你的图片就可以使用了,最后在给出该组件留出的对外接口:

 1 //
 2 //  ZLImageViewDisplayView.h
 3 //  ZLImageViewDisplay
 4 //
 5 //  Created by Mr.LuDashi on 15/8/14.
 6 //  Copyright (c) 2015年 ludashi. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 
11 //点击图片的Block回调,参数当前图片的索引,也就是当前页数
12 typedef void(^TapImageViewButtonBlock)(NSInteger imageIndex);
13 
14 @interface ZLImageViewDisplayView : UIView
15 
16 
17 //切换图片的时间间隔,可选,默认为3s
18 @property (nonatomic, assign) CGFloat scrollInterval;
19 
20 //切换图片时,运动时间间隔,可选,默认为0.7s
21 @property (nonatomic, assign) CGFloat animationInterVale;
22 
23 /**********************************
24  *功能:便利构造器
25  *参数:滚动视图的Frame, 要显示图片的数组
26  *返回值:该类的对象
27  **********************************/
28 + (instancetype) zlImageViewDisplayViewWithFrame: (CGRect) frame
29                                       WithImages: (NSArray *) images;
30 
31 /**********************************
32  *功能:便利初始化函数
33  *参数:滚动视图的Frame, 要显示图片的数组
34  *返回值:该类的对象
35  **********************************/
36 - (instancetype)initWithFrame: (CGRect)frame
37                    WithImages: (NSArray *) images;
38 
39 
40 
41 /**********************************
42  *功能:为每个图片添加点击时间
43  *参数:点击按钮要执行的Block
44  *返回值:无
45  **********************************/
46 - (void) addTapEventForImageWithBlock: (TapImageViewButtonBlock) block;
47 
48 @end

  三.组件和Demo分享

    下面给出了Demo和组件在GitHub上的分享地址:

https://github.com/lizelu/ZLImageViewDisplay

  上面的Demo是图片轮播的解决方案之一,下篇博客会使用两个ImageView复用的形式来实现图片的无限轮播的解决方案。Demo写的比较着急,难免会有纰漏的地方,望大家批评指正。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hightopo

原 快速开发基于 HTML5 网络拓扑图应

48320
来自专栏林德熙的博客

.net Framework 源代码 · ScrollViewer 使用原理其他源代码分析

本文是分析 .net Framework 源代码的系列,主要告诉大家微软做 ScrollViewer 的思路,分析很简单。 看完本文,可以学会如何写一个 Scr...

11810
来自专栏知道一点点

【原创】bootstrap框架的学习 第六课[bootstrap代码]

请确保当您使用 <pre> 和 <code> 标签时,开始和结束标签使用了 unicode 变体: &lt; 和 &gt;。

11630
来自专栏Ray学习笔记

Jump Start Bootstrap 第3章

在这一章,我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件,B...

13920
来自专栏偏前端工程师的驿站

CSS魔法堂:Transition就这么好玩

 以前说起前端动画必须使用JS,而CSS3为我们带来transition和@keyframes,让我们可以以更简单(声明式代替命令式)和更高效的方式实现UI状态...

12930
来自专栏前端说吧

JS-事件之鼠标、键盘都能控制的下拉选框效果

38150
来自专栏CRPER折腾记

Vue 折腾记 - (6) 写一个不大靠谱的backToTop组件

返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了

10510
来自专栏向治洪

React Native之react-native-scrollable-tab-view详解

在React Native开发中,官方为我们提供的Tab控制器有两种:TabBarIOS和ViewPagerAndroid。TabBarIOS,仅适用于IOS平...

95260
来自专栏ios 技术积累

iOS中的事件的产生和传递

●发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件队列中,为什么是队列而不是栈?因为队列的特点是FIFO,即先进先出,先产生的事件...

13810
来自专栏前端知识分享

第65天:仿网易轮播图

13920

扫码关注云+社区

领取腾讯云代金券