无限轮播图片

现在基本上每个应用的头部，都会是一个无限滚动显示图片的scrollview，然后点击图片可以跳转到不同的页面。今天我们来学习下如何封装一个这样的控件。

需求

三个imageview控件实现多张image的无限滚动
点击图片，可以拿到图片的信息给调用者使用

无限滚动效果图

image

点击图片事件

图片对应的信息一般由服务器返回，被封装到model，再传递给我们封装的无限滚动控件。当调用者通过代理方法实现回调，点击每张图片，我们会返回被点击图片对应的信息，这样调用者就可以拿到这些信息去做一些事情。
如下所示，返回了被点击图片的name和url

image

无限滚动scrollview封装

我们具体来看看如何封装一个无限滚动的uiscrollview，并实现点击事件。
下面给出了具体的实现代码，并且做了很详细的描述。
但是有两个方法比较难理解，我会单独用例子来讲解。

InfiniteRollScrollView.h文件
==================================

#import <UIKit/UIKit.h>

@class InfiniteRollScrollView;
@protocol infiniteRollScrollViewDelegate <NSObject>
@optional
/**
 *  点击图片的回调事件
 *
 *  @param scrollView 一般传self
 *  @param info       每张图片对应的model，由控制器使用imageModelInfoArray属性传递过来，再由该方法传递回调用者
 */
-(void)infiniteRollScrollView:(InfiniteRollScrollView*)scrollView tapImageViewInfo:(id)info;
@end



@interface InfiniteRollScrollView : UIView
/**
 *  图片的信息，每张图片对应一个model，需要控制器传递过来
 */
@property (strong, nonatomic) NSMutableArray *imageModelInfoArray;
/**
 *  需要显示的图片，需要控制器传递过来
 */
@property (strong, nonatomic) NSArray *imageArray;
/**
 *  是否竖屏显示scrollview，默认是no
 */
@property (assign, nonatomic, getter=isScrollDirectionPortrait) BOOL scrollDirectionPortrait;
@property (weak, nonatomic, readonly) UIPageControl *pageControl;
@property(assign,nonatomic)NSInteger ImageViewCount;
@property(weak,nonatomic)id<infiniteRollScrollViewDelegate>delegate;
@end

InfiniteRollScrollView.m文件
==================================


#import "InfiniteRollScrollView.h"


static int const ImageViewCount = 3;


@interface InfiniteRollScrollView() <UIScrollViewDelegate>
@property (weak, nonatomic) UIScrollView *scrollView;
@property (weak, nonatomic) NSTimer *timer;
@property(assign,nonatomic)BOOL isFirstLoadImage;
@end

@implementation InfiniteRollScrollView

#pragma mark - 初始化
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        // 滚动视图
        UIScrollView *scrollView = [[UIScrollView alloc] init];
        scrollView.showsHorizontalScrollIndicator = NO;
        scrollView.showsVerticalScrollIndicator = NO;
        scrollView.pagingEnabled = YES;
        scrollView.bounces = NO;
        scrollView.delegate = self;
        [self addSubview:scrollView];
        self.scrollView = scrollView;
        
        // 图片控件
        for (int i = 0; i<ImageViewCount; i++) {
            UIImageView *imageView = [[UIImageView alloc] init];
            [scrollView addSubview:imageView];
        }
        
        // 页码视图
        UIPageControl *pageControl = [[UIPageControl alloc] init];
        [self addSubview:pageControl];
        _pageControl = pageControl;
    }
    return self;
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    [self addTap];

    self.scrollView.frame = self.bounds;
    if (self.isScrollDirectionPortrait) {//竖向滚动
        self.scrollView.contentSize = CGSizeMake(0, ImageViewCount * self.bounds.size.height);
    } else {
        self.scrollView.contentSize = CGSizeMake(ImageViewCount * self.bounds.size.width, 0);
    }
    
    for (int i = 0; i<ImageViewCount; i++) {
        UIImageView *imageView = self.scrollView.subviews[i];
        if (self.isScrollDirectionPortrait) {//竖向滚动时imageview的frame
            imageView.frame = CGRectMake(0, i * self.scrollView.frame.size.height, self.scrollView.frame.size.width, self.scrollView.frame.size.height);
        } else {//横向滚动时imageview的frame
            imageView.frame = CGRectMake(i * self.scrollView.frame.size.width, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height);
        }
    }
    
    CGFloat pageW = 80;
    CGFloat pageH = 20;
    CGFloat pageX = self.scrollView.frame.size.width - pageW;
    CGFloat pageY = self.scrollView.frame.size.height - pageH;
    self.pageControl.frame = CGRectMake(pageX, pageY, pageW, pageH);
}

#pragma mark - 添加点击手势
-(void)addTap
{
    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapCallback)];
    tap.cancelsTouchesInView = NO;
    [self addGestureRecognizer:tap];
}

-(void)tapCallback
{
    if (self.delegate && [self.delegate respondsToSelector:@selector(infiniteRollScrollView:tapImageViewInfo:)])
    {
        [self.delegate infiniteRollScrollView:self tapImageViewInfo:self.imageModelInfoArray[self.pageControl.currentPage]];
    }
}


#pragma mark - <UIScrollViewDelegate>
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 当两张图片同时显示在屏幕中，找出占屏幕比例超过一半的那张图片
    NSInteger page = 0;
    CGFloat minDistance = MAXFLOAT;

    for (int i = 0; i<self.scrollView.subviews.count; i++) {
        UIImageView *imageView = self.scrollView.subviews[i];
        CGFloat distance = 0;
        if (self.isScrollDirectionPortrait) {
            distance = ABS(imageView.frame.origin.y - scrollView.contentOffset.y);
        } else {
            distance = ABS(imageView.frame.origin.x - scrollView.contentOffset.x);
        }

        if (distance < minDistance) {
            minDistance = distance;
            page = imageView.tag;
        }
    }

    self.pageControl.currentPage = page;
}

//用手开始拖拽的时候，就停止定时器，不然用户拖拽的时候，也会出现换页的情况
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self stopTimer];
}
//用户停止拖拽的时候，就启动定时器
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self startTimer];
}

//手指拖动scroll停止的时候，显示下一张图片
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self displayImage];
}

//定时器滚动scrollview停止的时候，显示下一张图片
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    [self displayImage];
}

#pragma mark - 显示图片处理
- (void)displayImage
{
    // 设置图片，三张imageview显示无限张图片
    for (int i = 0; i<ImageViewCount; i++) {
        UIImageView *imageView = self.scrollView.subviews[i];
        NSInteger index = self.pageControl.currentPage;
        /**
         *  滚到第一张，并且是程序刚启动是第一次加载图片，index才减一。
         加上这个判断条件，是为了防止当程序第一次加载图片时，此时第一张图片的i=0，那么此时index--导致index<0，进入下面index<0的判断条件，让第一个imageview显示的是最后一张图片
         */
        if (i == 0 && self.isFirstLoadImage) {
            index--;
        }else if (i == 2) {//滚到最后一张图片，index加1
            index++;
        }
        
        if (index < 0) {//如果滚到第一张还继续向前滚，那么就显示最后一张
            index = self.pageControl.numberOfPages-1 ;
        }else if (index >= self.pageControl.numberOfPages) {//滚动到最后一张的时候，由于index加了一，导致index大于总的图片个数，此时把index重置为0，所以此时滚动到最后再继续向后滚动就显示第一张图片了
            index = 0;
        }
        
        imageView.tag = index;
        imageView.image = self.imageArray[index];
    }
    
    self.isFirstLoadImage =YES;
    // 每次滚动图片，都设置scrollview的contentoffset为整个scrollview的高度或者宽度，这样一次就可以滚完一张图片的距离。
    if (self.isScrollDirectionPortrait) {
        self.scrollView.contentOffset = CGPointMake(0, self.scrollView.frame.size.height);
    } else {
        self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);
    }
}

- (void)displayNextImage
{
    if (self.isScrollDirectionPortrait) {
        [self.scrollView setContentOffset:CGPointMake(0, 2 * self.scrollView.frame.size.height) animated:YES];
    } else {
        [self.scrollView setContentOffset:CGPointMake(2 * self.scrollView.frame.size.width, 0) animated:YES];
    }
}

#pragma mark - 定时器处理
- (void)startTimer
{
    NSTimer *timer = [NSTimer timerWithTimeInterval:2 target:self selector:@selector(displayNextImage) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
    self.timer = timer;
}

- (void)stopTimer
{
    [self.timer invalidate];
    //需要手动设置timer为nil，因为定时器被系统强引用了，必须手动释放
    self.timer = nil;
}


#pragma mark - setter方法
- (void)setImageArray:(NSArray *)imageArray
{
    _imageArray = imageArray;
    
    // 设置页码
    self.pageControl.numberOfPages = imageArray.count;
    self.pageControl.currentPage = 0;
    
    // 设置内容
    [self displayImage];
    
    // 开始定时器
    [self startTimer];
}
@end

难点1、如何找出屏幕占比多的图片

在InfiniteRollScrollView.m类文件中有如下方法。该方法的作用是判断当用户拖拽图片时，两张图片同时显示在屏幕上，如果用户此时松开手，那么应该完全显示哪张图片。此时我们需要判断哪张图片占据的屏幕比例较多，就显示该张图片。

该情况如下所示：

image

实现方法

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 当两张图片同时显示在屏幕中，找出占屏幕比例超过一半的那张图片
    NSInteger page = 0;
    CGFloat minDistance = MAXFLOAT;

    for (int i = 0; i<self.scrollView.subviews.count; i++) {
        UIImageView *imageView = self.scrollView.subviews[i];
        CGFloat distance = 0;
        if (self.isScrollDirectionPortrait) {
            distance = ABS(imageView.frame.origin.y - scrollView.contentOffset.y);
        } else {//横向滚动
            distance = ABS(imageView.frame.origin.x - scrollView.contentOffset.x);
        }

        if (distance < minDistance) {//找出最小差值对应的imageview
            minDistance = distance;
            page = imageView.tag;
        }
    }

    self.pageControl.currentPage = page;
}

我们只研究横向滚动时的情况，如何找出最小distance对应的imageview

假设三个imageview 的frame的x值如下：

image1-x: 0
image2-x: 100
image3-x: 200

PS:

移动scrollview的时候，不会改变image view的frame，只会不断改变scrollview的bounds，造成scrollview上面的子控件image view的位置也跟着不断变化，从而产生了image view在不断移动的感觉。

image

通过上面五种情况的分析，可以看出使用上面的方法可以找出在屏幕上占比更多的imageview。

难点2、如何使用三个imageview实现无限滚动

从刚开始的示例图中可以看到有五张图片，但是只使用了三个imageview来实现循环利用。

实现代码

- (void)displayImage
{
    // 设置图片，三张imageview显示无限张图片
    for (int i = 0; i<ImageViewCount; i++) {
        UIImageView *imageView = self.scrollView.subviews[i];
        NSInteger index = self.pageControl.currentPage;
        /**
         *  滚到第一张，并且是程序刚启动是第一次加载图片，index才减一。
         加上这个判断条件，是为了防止当程序第一次加载图片时，此时第一张图片的i=0，那么此时index--导致index<0，进入下面index<0的判断条件，让第一个imageview显示的是最后一张图片
         */
        if (i == 0 && self.isFirstLoadImage) {
            index--;
        }else if (i == 2) {//滚到最后一张图片，index加1
            index++;
        }
        
        if (index < 0) {//如果滚到第一张还继续向前滚，那么就显示最后一张
            index = self.pageControl.numberOfPages-1 ;
        }else if (index >= self.pageControl.numberOfPages) {//滚动到最后一张的时候，由于index加了一，导致index大于总的图片个数，此时把index重置为0，所以此时滚动到最后再继续向后滚动就显示第一张图片了
            index = 0;
        }
        
        imageView.tag = index;
        imageView.image = self.imageArray[index];
    }
    
    self.isFirstLoadImage =YES;
    
    // 让scrollview显示中间的imageview
    if (self.isScrollDirectionPortrait) {
        self.scrollView.contentOffset = CGPointMake(0, self.scrollView.frame.size.height);
    } else {
        self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);
    }
}

先看示意图，假设我们有四张图片，要用三个imageview循环显示（更多的图片情况类似）

image

如此循环往复，就可以实现三个imageview显示无限张图片了。

结合上面的代码和示例图应该不难理解。

如何使用

假设我们在viewcontroller类中使用InfiniteRollScrollView类。示例代码如下：


#import "ViewController.h"
#import "ImageModel.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    InfiniteRollScrollView *scrollView = [[InfiniteRollScrollView alloc] init];
    scrollView.frame = CGRectMake(30, 50, 300, 130);
    scrollView.delegate = self;
    scrollView.pageControl.currentPageIndicatorTintColor = [UIColor orangeColor];
    scrollView.pageControl.pageIndicatorTintColor = [UIColor grayColor];
    
    //需要显示的所有图片
    scrollView.imageArray = @[
                          [UIImage imageNamed:@"0"],
                          [UIImage imageNamed:@"1"],
                          [UIImage imageNamed:@"2"],
                          [UIImage imageNamed:@"3"],
                          [UIImage imageNamed:@"4"]
                          ];
    
    //需要显示的所有图片对应的信息，这里我们是手动添加的每张图片的信息，实际环境一般都是由服务器返回，我们再封装到model里面。
    scrollView.imageModelInfoArray = [NSMutableArray array];
    for (int i = 0; i<5; i++) {
        ImageModel *mode = [[ImageModel alloc]init];
        mode.name = [NSString stringWithFormat:@"picture-%zd",i];
        mode.url = [NSString stringWithFormat:@"http://www.baidu.com-%zd",i];
        [scrollView.imageModelInfoArray addObject:mode];
    }
    
    [self.view addSubview:scrollView];
}

//代理方法
-(void)infiniteRollScrollView:(InfiniteRollScrollView *)scrollView tapImageViewInfo:(id)info{
    ImageModel *model = (ImageModel *)info;
    NSLog(@"name:%@---url:%@", model.name, model.url);
}
@end

总结：

其实上面的封装还不够完美，因为需要调用者传入需要显示的图片和图片对应的model，这需要调用者自己下载好了图片，然后传入。其实我们可以让调用者仅仅传入所有需要显示的image的model，我们帮他下载好了直接显示。

demo地址：https://github.com/XiMuYouZi/InfiniteRoll

最后编辑于：2017.12.03 06:17:17

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,937评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,503评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,712评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,668评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,677评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,601评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,975评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,637评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,881评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,621评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,710评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,387评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,971评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,947评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,189评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,805评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,449评论 2赞 342

无限轮播图片

需求

无限滚动效果图

点击图片事件

无限滚动scrollview封装

难点1、如何找出屏幕占比多的图片

实现方法

假设三个imageview 的frame的x值如下：

PS:

scrollview的contentoffset和imageview的x值的差值的绝对值有如下几种情况

情况1：

情况2:

情况3:

情况4:

情况5:

难点2、如何使用三个imageview实现无限滚动

实现代码

如何使用

总结：

推荐阅读更多精彩内容