封装一个简单轮播图类

　　在开发过程中，经常会使用到轮播图进行图片展示。通常轮播图由 UIScrollView 和 UIPageControl 两个控件组合而成。我们要创建一个轮播图，需要使轮播图能够根据图片数量进行无限轮播，并且页面控制控件的圆点也必须与轮播图一致。

　　之前我所知道的方法是，已知图片数量count，创建ScrollView时，设置contentSize为count+1个ScrollView的宽度，轮播至首尾时，需要进行图片的交换，给人感觉是不间断的无限轮播。现在，我们使用contentSize为3个ScrollView宽度的UIScrollView视图就可以实现无限轮播。如图：

　　

　　将img1向左滑动，图片会显示为img2，在完成位移后，将img2的图片再次移动到img1上，并且使ScrollView的contentOffSet重新设置为img1的位置，这样，img2的图片在img1的位置又可以左右滑动，从而实现了无限轮播。

　　我们将这个思路整理一下，封装成一个简单的轮播图类：

//  KLoopImg.h

/*
 * 三个页面以上的轮播图
 */

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, EScrollDirection){
    kScrollLift,
    kScrollRight,
    kScrollJudge,
};

@interface KLoopImg : UIView
{
    @public
    int count;
    int count0;
    int count1;
    int count2;
}
@property(nonatomic,strong)UIScrollView *loopImg;
@property(nonatomic,strong)UIImageView *img0;
@property(nonatomic,strong)UIImageView *img1;
@property(nonatomic,strong)UIImageView *img2;
@property(nonatomic,strong)UIPageControl *page;
@property(nonatomic,strong)NSArray *imgArray;
@property(nonatomic,strong)NSArray *actArray;

- (instancetype)initWithFrame:(CGRect)frame imgArray:(NSArray*)array;

/**
 * 自动轮播
 * @param direction 方向
 */
- (void)autoLoop:(EScrollDirection)direction;

/**
 * 拖动图片
 * @param direction 方向
 */
- (void)dragLoop:(EScrollDirection)direction;

/**
 * 页码控制设置
 * @param height 高度
 * @param black 设置块
 */
- (void)pageSettingWithHeight:(CGFloat)height block:(void(^)(UIPageControl* page))block;

/**
 * 页码控制
 */
- (void)pageChange;

/**
 * 获取事件数组
 */
- (id)getActArray;
@end

//  KLoopImg.m

#import "KLoopImg.h"

@interface KLoopImg ()
{
    @private
    CGFloat loopImgWidth;
    CGFloat loopImgHeight;
}
@end

@implementation KLoopImg

- (instancetype)initWithFrame:(CGRect)frame imgArray:(NSArray*)array{
    self = [super initWithFrame:frame];
    if(self){
        self.imgArray = array;
        count = (int)self.imgArray.count;
        count0 = 0;
        count1 = 1;
        count2 = 2;
        [self setupView];
    }
    return self;
}

- (void)setupView{
    self.backgroundColor = [UIColor whiteColor];
    
    loopImgWidth  = self.frame.size.width;
    loopImgHeight = self.frame.size.height;
    
    self.loopImg = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, loopImgWidth, loopImgHeight)];
    self.loopImg.contentSize = CGSizeMake(3 * loopImgWidth, loopImgHeight);
    /* 属性 */ {
        self.loopImg.contentOffset = CGPointMake(loopImgWidth, 0);
        self.loopImg.showsHorizontalScrollIndicator = NO;
        self.loopImg.showsVerticalScrollIndicator = NO;
        self.loopImg.pagingEnabled = YES;
        self.loopImg.bounces = NO;
    }
    
    self.img0 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, loopImgWidth, loopImgHeight)];
    self.img1 = [[UIImageView alloc] initWithFrame:CGRectMake(loopImgWidth, 0, loopImgWidth, loopImgHeight)];
    self.img1.userInteractionEnabled = YES;
    self.img2 = [[UIImageView alloc] initWithFrame:CGRectMake(2 * loopImgWidth, 0, loopImgWidth, loopImgHeight)];
    
    [self.loopImg addSubview:self.img0];
    [self.loopImg addSubview:self.img1];
    [self.loopImg addSubview:self.img2];
    [self addSubview:self.loopImg];
    
    self.img0.image = [UIImage imageNamed:_imgArray[count0]];
    self.img1.image = [UIImage imageNamed:_imgArray[count1]];
    self.img2.image = [UIImage imageNamed:_imgArray[count2]];
    
    self.page = [UIPageControl new];
    self.page.alpha = 0;
    [self addSubview:self.page];

}

#pragma mark - 自动轮播
- (void)autoLoop:(EScrollDirection)direction{
    [UIView animateWithDuration:0.2 animations:^{
        if(direction == kScrollLift){
            self.loopImg.contentOffset = CGPointMake(2 * loopImgWidth, 0);
        }else if(direction == kScrollRight){
            self.loopImg.contentOffset = CGPointMake(0, 0);
        }
    }];
    
    [self dragLoop:direction];
}

#pragma mark - 拖动图片
- (void)dragLoop:(EScrollDirection)direction{
    if(direction == kScrollJudge){
        if(self.loopImg.contentOffset.x == 0){
            [self scroll:kScrollRight];
        }else if(self.loopImg.contentOffset.x == 2 * loopImgWidth){
            [self scroll:kScrollLift];
        }
    }else{
        [self scroll:direction];
    }
}

#pragma mark - 拖动方向
- (void)scroll:(EScrollDirection)direction{
    self.loopImg.contentOffset = CGPointMake(LOOPIMG_W, 0);
    if(direction == kScrollLift){
        count0 = count1;
        count1 = count2;
        count2 = (count2 + 1 == self.imgArray.count) ? 0: count2 + 1;
    }else if(direction == kScrollRight){
        count2 = count1;
        count1 = count0;
        count0 = (count0 == 0) ? count - 1: count0 - 1;
    }
    {
        self.img0.image = [UIImage imageNamed:self.imgArray[count0]];
        self.img1.image = [UIImage imageNamed:self.imgArray[count1]];
        self.img2.image = [UIImage imageNamed:self.imgArray[count2]];
    }
    
    self.page.currentPage = count1 == 0 ? count - 1 : count1 - 1;
}

#pragma mark - 页码控制器设置
- (void)pageSettingWithHeight:(CGFloat)height block:(void(^)(UIPageControl* page))block{
    self.page.alpha = 1;
    self.page.frame = CGRectMake(0, loopImgHeight - height, loopImgWidth, height);
    self.page.backgroundColor = [UIColor colorWithWhite:0.000 alpha:0.500];
    self.page.pageIndicatorTintColor = [UIColor colorWithWhite:1.000 alpha:0.500];
    self.page.currentPageIndicatorTintColor = [UIColor whiteColor];
    self.page.numberOfPages = count;
    if(block != nil){
        block(self.page);
    }
    else {/* 安全判断 */}
}

#pragma mark - 页码控制
- (void)pageChange{
    count1 = (int)(self.page.currentPage == count - 1 ? 0 : self.page.currentPage + 1);
    count0 = (count1 - 1 < 0) ? count - 1 : count1 - 1;
    count2 = (count1 + 1 == count) ? 0 : count1 + 1;
    {
        self.img0.image = [UIImage imageNamed:self.imgArray[count0]];
        self.img1.image = [UIImage imageNamed:self.imgArray[count1]];
        self.img2.image = [UIImage imageNamed:self.imgArray[count2]];
    }
}

#pragma mark - 获取事件数组元素
- (id)getActArray{
    return self.actArray[count1];
}
@end

　　完成封装之后，进行使用:

//  TestViewController.m

#import "TestViewController.h"
#import "KLoopImg.h"
#define SC_WIDTH CGRectGetWidth([UIScreen mainScreen].bounds)
#define SC_HEIGHT CGRectGetHeight([UIScreen mainScreen].bounds)

@interface TestViewController ()<UIScrollViewDelegate>
@property(nonatomic,strong)NSTimer *timer;
@property(nonatomic,strong)KLoopImg *loopImg;
@end

@implementation TestViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor whiteColor];

// 图片均来自网络    
    self.loopImg = [[KLoopImg alloc]initWithFrame:CGRectMake(0, 50, SC_WIDTH, SC_WIDTH/2.0)
                                         imgArray:@[@"01.png", @"02.png", @"03.png", @"04.png", @"05.png", @"hh.png"]];
    self.loopImg.loopImg.delegate = self;
    self.loopImg.actArray = @[@"传颂之物", @"野良神", @"Chobits", @"海贼王", @"言叶之庭", @"中科网"];
    [self.loopImg pageSettingWithHeight:30 block:^(UIPageControl *page) {
        [page addTarget:self action:@selector(pageCtr) forControlEvents:UIControlEventValueChanged];
    }];
    [self.view addSubview:self.loopImg];
    
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(setupTimer) userInfo:nil repeats:YES];
    
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(action)];
    [self.loopImg.img1 addGestureRecognizer:tap];
}

// 计时器方法
- (void)setupTimer{
    [self.loopImg autoLoop:kScrollJudge];
}

// 页面控制方法
- (void)pageCtr{
    NSLog(@"%ld", self.loopImg.page.currentPage);
    [self.loopImg pageChange];
}

// 点击图片响应事件
- (void)action{
    NSLog(@"%@", [self.loopImg getActArray]);
}

// 即将拖动时，关闭计时器
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    [self.timer invalidate];
}

// 完成拖动，开启计时器
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    [self.loopImg dragLoop:kScrollJudge];
    
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(setupTimer) userInfo:nil repeats:YES];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

　　实际效果:

　　

　　当然，这个Demo我也上传到了GitHub上：

　　https://github.com/Kriskee/KLoopImg