一步一步拆解一个简单的iOS轮播图（三图）

导言（可以不看）：

不吹不黑，也许是东半球最简单的iOS轮播图拆分注释（讲解不敢当）了(tree new bee)。（一句话包含两个人，你能猜到有谁吗？提示：一个在卖手机，一个最近在卖书）哈哈。。。

我第一次项目中需要使用轮播图的时候我是用的别人写好的一个轮子，那个轮播封装很多东西，包括比如可以设置pageControl的位置，可以传图片url或本地图片，缓存网络图片等等。但是我觉得没必要搞那么复杂，我喜欢简单并足够做事的东西。现在有时间便想自己把它拆解一下。看了一些简书上一些作者写的关于轮播图的讲解，我发现好多人写的其实是有问题的，虽然不易发现，但是你仔细测一下他的demo，很多都有问题。

我的这个轮播控件基本能满足现有市场上的所有app的轮播，反正我没见过把轮播搞得更花哨的，没太大意义。我自己把它的实现分为三块：1、添加基本控件，控制滚动（也就是控制scrollView，实现代理方法）；2、自动滚动，timer;3、处理点击事件（代理）。代码注释很详细了，还看不懂的可以给我留言。

自定义一个View继承自UIView，这个类就是封装的轮播图类

先看看我们需要在初始化用语句中给这个自定义View添加哪些控件：scrollView、pageControl、三个按钮图（有self的应该知道是定义在在类拓展中的属性吧）

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        //定义一个scrollView，最主要的轮播控件
        UIScrollView *scrollView = [[UIScrollView alloc] init];
        scrollView.delegate = self;
        //横竖两种滚轮都不显示
        scrollView.showsVerticalScrollIndicator = NO;
        scrollView.showsHorizontalScrollIndicator = NO;
        //需要分页
        scrollView.pagingEnabled = YES;
        //不需要回弹（试了一下加不加应该都没什么影响）
        scrollView.bounces = NO;
        [self addSubview:scrollView];
        self.scrollView = scrollView;
        
        //在scrollView中添加三个图片按钮，因为后面需要响应点击事件，所以我直接用按钮不用imageView了，感觉更方便一些
        for (int i = 0;i < imageBtnCount; i++) {
            UIButton *imageBtn = [[UIButton alloc] init];
            [scrollView addSubview:imageBtn];
        }
        //添加pageControl
        UIPageControl *pageControl = [[UIPageControl alloc] init];
        [self addSubview:pageControl];
        self.pageControl = pageControl;
    }
    return self;
}

 

类拓展中的属性：（timer后面会需要，定时自动轮播）

@property (nonatomic, weak) UIScrollView*scrollView;
@property (nonatomic, weak) UIPageControl *pageControl;
@property (nonatomic, weak) NSTimer *timer;

 

接下来布局子控件：

布局子控件之前要先说一个东西：

static const int imageBtnCount = 3;

这个count我们很多地方都会用到,因为这个轮播图的原理就是用三张图来实现无限循环轮播的假象。（#define能少用就少用吧啊）

 

//布局子控件
- (void)layoutSubviews {
    [super layoutSubviews];
    //设置scrollView的frame
    self.scrollView.frame = self.bounds;
    
    CGFloat width = self.bounds.size.width;
    CGFloat height = self.bounds.size.height;
    //设置contentSize,不同轮播方向的时候contentSize是不一样的
    if (self.isScrollDorectionPortrait) { //竖向
        //contentSize要放三张图片
        self.scrollView.contentSize = CGSizeMake(width, height * imageBtnCount);
    } else { //横向
        self.scrollView.contentSize = CGSizeMake(width * imageBtnCount, height);
    }
    //设置三张图片的位置，并为三个按钮添加点击事件
    for (int i = 0; i < imageBtnCount; i++) {
        UIButton *imageBtn = self.scrollView.subviews[i];
        [imageBtn addTarget:self action:@selector(imageBtnClick:) forControlEvents:UIControlEventTouchUpInside];
        if (self.isScrollDorectionPortrait) { //竖向
            imageBtn.frame = CGRectMake(0, i * height, width, height);
        } else { //横向
            imageBtn.frame = CGRectMake(i * width, 0, width, height);
        }
    }
    //设置contentOffset,显示最中间的图片
    if (self.isScrollDorectionPortrait) { //竖向
        self.scrollView.contentOffset = CGPointMake(0, height);
    } else { //横向
        self.scrollView.contentOffset = CGPointMake(width, 0);
    }
    
    //设置pageControl的位置
    CGFloat pageW = 100;
    CGFloat pageH = 20;
    CGFloat pageX = width - pageW;
    CGFloat pageY = height - pageH;
    self.pageControl.frame = CGRectMake(pageX, pageY, pageW, pageH);
    
}

接下来看一下对外接口：（代理暂时不用看，那是后面处理点击的事了）

#import <UIKit/UIKit.h>

@class ATCarouselView;
@protocol ATCarouselViewDelegate <NSObject>
@optional
/**
 *  点击图片的回调事件
 */
- (void)carouselView:(ATCarouselView *)carouselView indexOfClickedImageBtn:(NSUInteger)index;
@end

@interface ATCarouselView : UIView
//传入图片数组
@property (nonatomic, copy) NSArray *images;
//pageControl颜色设置
@property (nonatomic, strong) UIColor *currentPageColor;
@property (nonatomic, strong) UIColor *pageColor;
//是否竖向滚动
@property (nonatomic, assign, getter=isScrollDorectionPortrait) BOOL scrollDorectionPortrait;

@property (weak, nonatomic) id<ATCarouselViewDelegate> delegate;
@end

 使用者需要设置的东西都在这里了：接下来看set方法：（pageControl的太简单就不占篇幅了）

//根据传入的图片数组设置图片
- (void)setImages:(NSArray *)images {
    _images = images;
    //pageControl的页数就是图片的个数
    self.pageControl.numberOfPages = images.count;
    //默认一开始显示的是第0页
    self.pageControl.currentPage = 0;
    //设置图片显示内容
    [self setContent];
    //开启定时器
    [self startTimer];

}

下面看setContent方法，设置显示内容,定时器在后面说：

//设置显示内容
- (void)setContent {
    //设置三个imageBtn的显示图片
    for (int i = 0; i < self.scrollView.subviews.count; i++) {
        //取出三个imageBtn
        UIButton *imageBtn = self.scrollView.subviews[i];
        //这个是为了给图片做索引用的
        NSInteger index = self.pageControl.currentPage;
        
        if (i == 0) { //第一个imageBtn，隐藏在当前显示的imageBtn的左侧
            index--; //当前页索引减1就是第一个imageBtn的图片索引
        } else if (i == 2) { //第三个imageBtn，隐藏在当前显示的imageBtn的右侧
            index++; //当前页索引加1就是第三个imageBtn的图片索引
        }
        //无限循环效果的处理就在这里
        if (index < 0) { //当上面index为0的时候，再向右拖动，左侧图片显示，这时候我们让他显示最后一张图片
            index = self.pageControl.numberOfPages - 1;
        } else if (index == self.pageControl.numberOfPages) { //当上面的index超过最大page索引的时候，也就是滑到最右再继续滑的时候，让他显示第一张图片
            index = 0;
        }
        imageBtn.tag = index;
        //用上面处理好的索引给imageBtn设置图片
        [imageBtn setBackgroundImage:self.images[index] forState:UIControlStateNormal];
        [imageBtn setBackgroundImage:self.images[index] forState:UIControlStateHighlighted];
        
    }
}

先把原理图粘在这吧，对照着代码看可能更容易一点：

 

最后这个是最核心的步骤：

好了，接着看updateContent:

//状态改变之后更新显示内容
- (void)updateContent {
    CGFloat width = self.bounds.size.width;
    CGFloat height = self.bounds.size.height;
    [self setContent];
    //唯一跟设置显示内容不同的就是重新设置偏移量，让它永远用中间的按钮显示图片,滑动之后就偷偷的把偏移位置设置回去，这样就实现了永远用中间的按钮显示图片
    //设置偏移量在中间
    if (self.isScrollDorectionPortrait) {
        self.scrollView.contentOffset = CGPointMake(0, height);
    } else {
        self.scrollView.contentOffset = CGPointMake(width, 0);
    }
}

后面就简单了，滚动的时候的一些操作：

//拖拽的时候执行哪些操作
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    //拖动的时候，哪张图片最靠中间，也就是偏移量最小，就滑到哪页
    //用来设置当前页
    NSInteger page = 0;
    //用来拿最小偏移量
    CGFloat minDistance = MAXFLOAT;
    //遍历三个imageView,看那个图片偏移最小，也就是最靠中间
    for (int i = 0; i < self.scrollView.subviews.count; i++) {
        UIButton *imageBtn = self.scrollView.subviews[i];
        CGFloat distance = 0;
        if (self.isScrollDorectionPortrait) {
            distance = ABS(imageBtn.frame.origin.y - scrollView.contentOffset.y);
        } else {
            distance = ABS(imageBtn.frame.origin.x - scrollView.contentOffset.x);
        }
        if (distance < minDistance) {
            minDistance = distance;
            page = imageBtn.tag;
        }
    }
    self.pageControl.currentPage = page;
}

//结束拖拽的时候更新image内容
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self updateContent];
}

接下来就是定时器和代理设置点击事件了，这种比较简单的我就不多说了，我理解最难的地方都在上面的图里说明白了：

先说最简单的点击事件：.h文件

@class ATCarouselView;
@protocol ATCarouselViewDelegate <NSObject>
@optional
/**
 *  点击图片的回调事件
 */
- (void)carouselView:(ATCarouselView *)carouselView indexOfClickedImageBtn:(NSUInteger)index;
@end

.m文件

- (void)imageBtnClick:(UIButton *)btn {
//    NSLog(@"%ld",btn.tag);
    if ([self.delegate respondsToSelector:@selector(carouselView:indexOfClickedImageBtn:)])
    {
        [self.delegate carouselView:self indexOfClickedImageBtn:btn.tag];
    }

}

最后是定时器自动轮播的处理：

//开始计时器
- (void)startTimer {
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
    self.timer = timer;
}
//停止计时器
- (void)stopTimer {
    //结束计时
    [self.timer invalidate];
    //计时器被系统强引用，必须手动释放
    self.timer = nil;
}
//通过改变contentOffset * 2换到下一张图片
- (void)nextImage {
    CGFloat height = self.bounds.size.height;
    CGFloat width = self.bounds.size.width;
    if (self.isScrollDorectionPortrait) {
        [self.scrollView setContentOffset:CGPointMake(0, 2 * height) animated:YES];
    } else {
        [self.scrollView setContentOffset:CGPointMake(2 * width, 0) animated:YES];
    }
}

 

最后是使用这个轮播图：

- (void)viewDidLoad {
    [super viewDidLoad];
    ATCarouselView *carousel = [[ATCarouselView alloc] initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, 300)];
    carousel.delegate = self;
    //    carousel.scrollDorectionPortrait = YES;
    carousel.images = @[
                        [UIImage imageNamed:@"0"],
                        [UIImage imageNamed:@"1"],
                        [UIImage imageNamed:@"2"],
                        [UIImage imageNamed:@"3"],
                        [UIImage imageNamed:@"4"]
                        ];
    carousel.currentPageColor = [UIColor orangeColor];
    carousel.pageColor = [UIColor grayColor];
    [self.view addSubview:carousel];

}
- (void)carouselView:(ATCarouselView *)carouselView indexOfClickedImageBtn:(NSUInteger )index {
    NSLog(@"点击了第%ld张图片",index);
}

 

博客里把所有代码都贴上就太浪费空间了，基本上所有比较重要的都在上面了，如果还有不懂的可以看一下demo跑一下，有问题欢迎留言: my github:https://github.com/alan12138/carousel