轮播器(二)--采用两个ImageView和UIScrollView实现图片无限轮播

此篇文章介绍采用两个ImageView来实现无限轮播的方法，用于优化前篇的图片轮播

#import <UIKit/UIKit.h>

@protocol CarouselDelegate <NSObject>

//点击事件
-(void)clickedAtIndex:(NSInteger)index;

@end

@interface CarouselView2 : UIView

//代理
@property(assign,nonatomic) id<CarouselDelegate> delegate;

//数据源
@property (strong,nonatomic) NSMutableArray *dataSources;

//开启自动滚动
-(void)startAutoScroll;

@end

#import "CarouselView2.h"
#import "UIImageView+WebCache.h"
#import "CarouselModel.h"

@interface CarouselView2()<UIScrollViewDelegate>
//容器
@property (strong, nonatomic) UIScrollView *scrollView;
//分页控制器
@property (strong, nonatomic) UIPageControl *pageControl;
//定时器
@property (nonatomic , strong) NSTimer *timer;
//当前显示的imageView
@property (nonatomic, strong) UIImageView *currImageView;
//待显示的imageView
@property (nonatomic, strong) UIImageView *backImageView;
//当前显示图片的索引
@property (nonatomic, assign) NSInteger currIndex;
//待显示图片的索引
@property (nonatomic, assign) NSInteger nextIndex;
//是否自动滚动,默认为不自动滚动
@property (assign,nonatomic) BOOL autoScroll;

@end

@implementation CarouselView2

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self initSubView];
    }
    return self;
}

- (void)initSubView {
    [self addSubview:self.scrollView];
    [self addSubview:self.pageControl];
}

- (CGFloat)height {
    return self.scrollView.frame.size.height;
}

- (CGFloat)width {
    return self.scrollView.frame.size.width;
}

#pragma mark 数据源的set方法
-(void)setDataSources:(NSMutableArray *)dataSources
{
    if (!dataSources.count) return;
    
    _dataSources = dataSources;
    
    //设置当前的imageview
    CarouselModel *model = [self.dataSources objectAtIndex:_currIndex];
    [self.currImageView sd_setImageWithURL:[[NSURL alloc] initWithString:model.imageUrl] placeholderImage:[UIImage imageNamed:@"1"]];
    //设置下一张图片
    model = [self.dataSources objectAtIndex:_nextIndex];
    [self.backImageView sd_setImageWithURL:[[NSURL alloc] initWithString:model.imageUrl] placeholderImage:[UIImage imageNamed:@"1"]];
    
    self.pageControl.numberOfPages = _dataSources.count;
    [self layoutSubviews];
}

- (void)layoutSubviews {
    [super layoutSubviews];
    //有导航控制器时，会默认在scrollview上方添加64的内边距，这里强制设置为0
    _scrollView.contentInset = UIEdgeInsetsZero;
    
    _scrollView.frame = self.bounds;
    _pageControl.frame = CGRectMake(20, self.height - 30, self.width - 40, 30);
    [self setScrollViewContentSize];
}

#pragma mark 设置scrollView的contentSize
- (void)setScrollViewContentSize {
    if (_dataSources.count > 1) {
        self.scrollView.contentSize = CGSizeMake(self.width * 5, 0);
        self.scrollView.contentOffset = CGPointMake(self.width * 2, 0);
        self.currImageView.frame = CGRectMake(self.width * 2, 0, self.width, self.height);
        if(self.autoScroll)
        {
            [self startTimer];
        }
    } else {
        //只要一张图片时，scrollview不可滚动，且关闭定时器
        self.scrollView.contentSize = CGSizeZero;
        self.scrollView.contentOffset = CGPointZero;
        self.currImageView.frame = CGRectMake(0, 0, self.width, self.height);
        [self stopTimer];
    }
}

#pragma mark- --------定时器相关--------
-(void)startAutoScroll
{
    self.autoScroll = YES;
    [self startTimer];
}

- (void)startTimer {
    //如果只有一张图片，则直接返回，不开启定时器
    if (_dataSources.count <= 1) return;
    //如果定时器已开启，先停止再重新开启
    if (self.timer) [self stopTimer];
    self.timer = [NSTimer timerWithTimeInterval:2 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)stopTimer {
    [self.timer invalidate];
    self.timer = nil;
    self.autoScroll = NO;
}

- (void)nextPage {
    [self.scrollView setContentOffset:CGPointMake(self.width * 3, 0) animated:YES];
}

#pragma mark 图片点击代理事件
- (void)imageClick {
    if ([_delegate respondsToSelector:@selector(clickedAtIndex:)]){
        [_delegate clickedAtIndex:self.currIndex];
    }
}

- (void)changeCurrentPageWithOffset:(CGFloat)offsetX {
    if (offsetX < self.width * 1.5) {
        NSInteger index = self.currIndex - 1;
        if (index < 0) index = self.dataSources.count - 1;
        _pageControl.currentPage = index;
    } else if (offsetX > self.width * 2.5){
        _pageControl.currentPage = (self.currIndex + 1) % self.dataSources.count;
    } else {
        _pageControl.currentPage = self.currIndex;
    }
}

#pragma mark- UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    if (CGSizeEqualToSize(CGSizeZero, scrollView.contentSize)) return;
    CGFloat offsetX = scrollView.contentOffset.x;
    //滚动过程中改变pageControl的当前页码
    [self changeCurrentPageWithOffset:offsetX];
    //向右滚动
    if (offsetX < self.width * 2) {
        self.backImageView.frame = CGRectMake(self.width, 0, self.width, self.height);
        
        self.nextIndex = self.currIndex - 1;
        if (self.nextIndex < 0) self.nextIndex = self.dataSources.count - 1;
        CarouselModel *model = [self.dataSources objectAtIndex:self.nextIndex];
        [self.backImageView sd_setImageWithURL:[[NSURL alloc] initWithString:model.imageUrl] placeholderImage:[UIImage imageNamed:@"1"]];
        if (offsetX <= self.width) [self changeToNext];
        
        //向左滚动
    } else if (offsetX > self.width * 2){
        self.backImageView.frame = CGRectMake(CGRectGetMaxX(_currImageView.frame), 0, self.width, self.height);
        
        self.nextIndex = (self.currIndex + 1) % self.dataSources.count;
        CarouselModel *model = [self.dataSources objectAtIndex:self.nextIndex];
        [self.backImageView sd_setImageWithURL:[[NSURL alloc] initWithString:model.imageUrl] placeholderImage:[UIImage imageNamed:@"1"]];
        if (offsetX >= self.width * 3) [self changeToNext];
    }
}

- (void)changeToNext {
    //切换到下一张图片
    self.currImageView.image = self.backImageView.image;
    self.scrollView.contentOffset = CGPointMake(self.width * 2, 0);
    [self.scrollView layoutSubviews];
    self.currIndex = self.nextIndex;
    self.pageControl.currentPage = self.currIndex;
}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    if (self.autoScroll) {
        [self stopTimer];
    }
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    if(self.autoScroll)
    {
        [self startTimer];
    }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    CGPoint currPointInSelf = [_scrollView convertPoint:_currImageView.frame.origin toView:self];
    if (currPointInSelf.x >= -self.width / 2 && currPointInSelf.x <= self.width / 2)
        [self.scrollView setContentOffset:CGPointMake(self.width * 2, 0) animated:YES];
    else [self changeToNext];
}

#pragma mark- 懒加载
- (UIScrollView *)scrollView {
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc] init];
        _scrollView.scrollsToTop = NO;
        _scrollView.pagingEnabled = YES;
        _scrollView.bounces = NO;
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.showsVerticalScrollIndicator = NO;
        _scrollView.delegate = self;
        //添加手势监听图片的点击
        [_scrollView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imageClick)]];
        _currImageView = [[UIImageView alloc] init];
        _currImageView.clipsToBounds = YES;
        [_scrollView addSubview:_currImageView];
        _backImageView = [[UIImageView alloc] init];
        _backImageView.clipsToBounds = YES;
        [_scrollView addSubview:_backImageView];
    }
    return _scrollView;
}

- (UIPageControl *)pageControl {
    if (!_pageControl) {
        _pageControl = [[UIPageControl alloc] init];
        _pageControl.userInteractionEnabled = NO;
        _pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];
        _pageControl.pageIndicatorTintColor = [UIColor grayColor];
    }
    return _pageControl;
}

@end

VC中使用

self.automaticallyAdjustsScrollViewInsets = NO;
    
    NSMutableArray *dataList = [[NSMutableArray alloc]init];
    NSMutableArray *dataArr = [[NSMutableArray alloc]initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"carouselArr.plist" ofType:nil]];
    for (NSDictionary *dic in dataArr) {
        CarouselModel *model = [[CarouselModel alloc]init];
        model.imageUrl = [dic objectForKey:@"imageUrl"];
        model.contentUrl = [dic objectForKey:@"contentUrl"];
        model.labelText = [dic objectForKey:@"textLable"];
        [dataList addObject:model];
    }
    
    CarouselView2 *view1 = [[CarouselView2 alloc]initWithFrame:CGRectMake(20, 100, self.view.frame.size.width - 40, (self.view.frame.size.width - 40) * 0.5)];
    view1.delegate = self;
    view1.dataSources = dataList;
    [view1 startAutoScroll];
    [self.view addSubview:view1];