一步一步拆解一個簡單的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