iOS无限轮播图片

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

需求

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

无限滚动效果图

点击图片事件

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

无限滚动scrollview封装

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

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

#import 

@class InfiniteRollScrollView;
@protocol infiniteRollScrollViewDelegate 
@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)iddelegate;
@end

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


#import "InfiniteRollScrollView.h"


static int const ImageViewCount = 3;


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

    for (int i = 0; i= 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类文件中有如下方法。该方法的作用是判断当用户拖拽图片时，两张图片同时显示在屏幕上，如果用户此时松开手，那么应该完全显示哪张图片。此时我们需要判断哪张图片占据的屏幕比例较多，就显示该张图片。

该情况如下所示：

实现方法

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

    for (int i = 0; i

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

- (void)displayImage
{
    // 设置图片，三张imageview显示无限张图片
    for (int i = 0; i= 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);
    }
}

#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