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

我会带着你远行 2022-06-17 08:24 135阅读 0赞

正儿八经的图片滚动的Demo我这儿还真没有，今天呢就封装一个可以在项目中直接使用的图片轮播。没看过其他iOS图片无限轮播的代码，也不了解他们的原理，我今天封装这个图片无限轮播是借鉴Web前端中的做法，因为之前写Web前端的时候，实现幻灯片就是这么做的，今天就在iPhone上搞搞。下面的东西是自己写的了，关于轮播的东西这个开源项目也是相当不错的h ttps://gi thub.com / nicklockwood / iCarousel ,感兴趣的可以看一下。那是相当的强大，虽然没必要重复造轮子但是原理还是有必要理解的。今天的博客就介绍图片轮播的一种解决方案，下篇博客中在介绍另一种图片轮播的解决方案。

一、Demo运行效果、原理及调用方式

1.运行效果

下面的GIF呢就是Demo的运行效果，一定间隔后，图片会自动切换，当然也支持手指滑动。切换到相应图片时，点击图片，会通过Block回调的方式给出该图片的Index, 在Demo中使用提示框给出Index, 当然在项目中拿到Index你可以做很多事情的，Index就是图片的Tag值，也就是标记着你点击的是那张图片。下图中是三张图片进行轮播。

![191042195356334.gif][]

2.原理

下面是实现图片无限轮播的原理图（借鉴Web前端幻灯片的写法，欢迎大家提出好的解决方案），原理用一句话概括：如果显示3张图片的话，就往ScrollView上贴4张图顺序是3-1-2-3。首次显示1的位置，然后滑动，等滑动到最后一个3时，无动画切换到第一个3的位置，然后在滚动。原理图如下，就可以按着下面的原理图来布局和实例化控件了。

![191105005504432.png][]

3.组件调用方式

下面这段代码是组件的初始化和属性的设置，分为如下几部：

（1）：确定组件的位置

（2）：生成图片名字数组

（3）：通过便利构造器初始化控件，并传入imageName数组

（4）：设置属性（可选）， scrollInterval-图片切换间隔，animationInterVale-图片运动时间

（5）：addTapEventForImageWithBlock：图片点击后的回调

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

二、核心代码介绍

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

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

2.便利构造器

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

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

3.初始化ScrollView

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

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

4.添加PageControl

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

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

5.添加ImageView和Image

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

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

6.添加定时器

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

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

7.定时器执行的方法

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

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

8.手动切换

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

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

9.暂停定时器

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

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

[191042195356334.gif]: /images/20220617/760fa6338d004f1f942b5be5284ab9ea.png
[191105005504432.png]: /images/20220617/3cd747d8a4d44d648ab37993b4310343.png
[copycode.gif]: /images/20220617/87f70673eef743d0b40ad84365deb706.png