現(xiàn)在基本上每個應用的頭部哥捕，都會是一個無限滾動顯示圖片的scrollview袍嬉，然后點擊圖片可以跳轉(zhuǎn)到不同的頁面墩莫。今天我們來學習下如何封裝一個這樣的控件延塑。

需求

• 三個imageview控件實現(xiàn)多張image的無限滾動
• 點擊圖片，可以拿到圖片的信息給調(diào)用者使用

無限滾動效果圖

image

點擊圖片事件

圖片對應的信息一般由服務器返回幻碱，被封裝到model绎狭，再傳遞給我們封裝的無限滾動控件。當調(diào)用者通過代理方法實現(xiàn)回調(diào)褥傍，點擊每張圖片儡嘶，我們會返回被點擊圖片對應的信息，這樣調(diào)用者就可以拿到這些信息去做一些事情恍风。
如下所示蹦狂，返回了被點擊圖片的name和url

image

無限滾動scrollview封裝

我們具體來看看如何封裝一個無限滾動的uiscrollview，并實現(xiàn)點擊事件朋贬。
下面給出了具體的實現(xiàn)代碼凯楔，并且做了很詳細的描述。
但是有兩個方法比較難理解锦募，我會單獨用例子來講解摆屯。

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

#import <UIKit/UIKit.h>

@class InfiniteRollScrollView;
@protocol infiniteRollScrollViewDelegate <NSObject>
@optional
/**
 *  點擊圖片的回調(diào)事件
 *
 *  @param scrollView 一般傳self
 *  @param info       每張圖片對應的model，由控制器使用imageModelInfoArray屬性傳遞過來糠亩，再由該方法傳遞回調(diào)用者
 */
-(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;
}

//用手開始拖拽的時候氛驮，就停止定時器，不然用戶拖拽的時候济似，也會出現(xiàn)換頁的情況
- (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) {//如果滾到第一張還繼續(xù)向前滾讼撒，那么就顯示最后一張
            index = self.pageControl.numberOfPages-1 ;
        }else if (index >= self.pageControl.numberOfPages) {//滾動到最后一張的時候，由于index加了一股耽，導致index大于總的圖片個數(shù)根盒，此時把index重置為0，所以此時滾動到最后再繼續(xù)向后滾動就顯示第一張圖片了
            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诬乞，因為定時器被系統(tǒng)強引用了厂榛，必須手動釋放
    self.timer = nil;
}


#pragma mark - setter方法
- (void)setImageArray:(NSArray *)imageArray
{
    _imageArray = imageArray;
    
    // 設置頁碼
    self.pageControl.numberOfPages = imageArray.count;
    self.pageControl.currentPage = 0;
    
    // 設置內(nèi)容
    [self displayImage];
    
    // 開始定時器
    [self startTimer];
}
@end

難點1、如何找出屏幕占比多的圖片

在InfiniteRollScrollView.m類文件中有如下方法丽惭。該方法的作用是判斷當用戶拖拽圖片時击奶，兩張圖片同時顯示在屏幕上，如果用戶此時松開手责掏，那么應該完全顯示哪張圖片柜砾。此時我們需要判斷哪張圖片占據(jù)的屏幕比例較多，就顯示該張圖片换衬。

該情況如下所示：

image

實現(xiàn)方法

- (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的位置也跟著不斷變化叫潦，從而產(chǎn)生了image view在不斷移動的感覺蝇完。

scrollview的contentoffset和imageview的x值的差值的絕對值有如下幾種情況

情況1：

offset : 20

ABS(offset-image1-x): ABS(20-0) = 20

ABS(offset-image2-x): ABS(20-100) = 80

ABS(offset-image3-x): ABS(20-200)= 180

image3的差值大于100，故超出屏幕矗蕊。最小差值為image1的20短蜕，此時image1占屏幕80，image2占屏幕20傻咖，image1占多朋魔，松開手應該顯示image1。

示例圖如下：

image

情況2:

offset : 50

ABS(offset-image1-x): 50

ABS(offset-image2-x): 50

ABS(offset-image3-x): 150

此時為臨界點卿操，image1和image2各占屏幕一半警检，image3超出屏幕

示例圖如下：

image

情況3:

offset : 60

ABS(offset-image1-x): 60

ABS(offset-image2-x): 40

ABS(offset-image3-x): 140

Image3超出屏幕孙援，最小差值為為image2的40，此時image1占屏幕40扇雕，image2占屏幕60赃磨，image2占多，松開手應該顯示image2

示例圖如下：

image

情況4:

offset : 150

ABS(offset-image1-x): 150

ABS(offset-image2-x): 50

ABS(offset-image3-x): 50

image1超出屏幕洼裤。此時為臨界點邻辉，image2和image3各占屏幕一半

示例圖如下：

image

情況5:

offset : 160

ABS(offset-image1-x): 160

ABS(offset-image2-x): 60

ABS(offset-image3-x): 40

image1超出屏幕。最小差值為40腮鞍，此時image3占屏幕40值骇，image1占屏幕60，image3占多移国，松開手應該顯示image3

示例圖如下：

image

通過上面五種情況的分析吱瘩，可以看出使用上面的方法可以找出在屏幕上占比更多的imageview。

難點2迹缀、如何使用三個imageview實現(xiàn)無限滾動

從剛開始的示例圖中可以看到有五張圖片使碾，但是只使用了三個imageview來實現(xiàn)循環(huán)利用。

實現(xiàn)代碼

- (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) {//如果滾到第一張還繼續(xù)向前滾物延，那么就顯示最后一張
            index = self.pageControl.numberOfPages-1 ;
        }else if (index >= self.pageControl.numberOfPages) {//滾動到最后一張的時候，由于index加了一仅父，導致index大于總的圖片個數(shù)叛薯，此時把index重置為0，所以此時滾動到最后再繼續(xù)向后滾動就顯示第一張圖片了
            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循環(huán)顯示（更多的圖片情況類似）

image

image

image

image

如此循環(huán)往復买置，就可以實現(xiàn)三個imageview顯示無限張圖片了粪糙。

結(jié)合上面的代碼和示例圖應該不難理解。

如何使用

假設我們在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"]
                          ];
    
    //需要顯示的所有圖片對應的信息蓉冈，這里我們是手動添加的每張圖片的信息城舞，實際環(huán)境一般都是由服務器返回，我們再封裝到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

總結(jié)：

其實上面的封裝還不夠完美家夺，因為需要調(diào)用者傳入需要顯示的圖片和圖片對應的model，這需要調(diào)用者自己下載好了圖片伐弹，然后傳入拉馋。其實我們可以讓調(diào)用者僅僅傳入所有需要顯示的image的model，我們幫他下載好了直接顯示惨好。

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