UIScrollView封装的无限循环图片轮播器

开发中实现图片轮播的方式有UICollectionView和UIScrollView

• UICollectionView系统本身提供了循环利用机制,在使用图片无限滚动时,我们实现起来比较简单,但是,由于需要设置很大的cell的数值,所以,性能幷没有UIScrollView好

• 在这里我是使用UIScrollView封装的无限循环图片轮播

  提供了图片数组,水平竖直滚动和自定义图片切换时间接口

图片轮播器.gif

直接上代码 在XHGInfiniteScrollView.h中

#import 

@interface XHGInfiniteScrollView : UIView
/**
 *  需要添加的图片数组
 */
@property (strong, nonatomic) NSArray *images;

/**
 *  控制水平竖直方向的滚动  默认为水平方向  设置为YES时为竖直方向
 */
@property (assign, nonatomic, getter=isInfiniteScrollVertical) BOOL infiniteScrollVertical;


/** 图片切换时间 */
@property(nonatomic, assign) CGFloat time;

@end

在XHGInfiniteScrollView.m中

#import "XHGInfiniteScrollView.h"
/** ImageView的个数 */
static int const ImageViewCount = 3;

@interface XHGInfiniteScrollView() 
@property (weak, nonatomic) UIScrollView *scrollView;
/* 定时器 */
@property (weak, nonatomic) NSTimer *timer;

@property (weak, nonatomic, readonly) UIPageControl *pageControl;
@end

@implementation XHGInfiniteScrollView
#pragma mark - 初始化
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        
        //图片默认切换时间
        self.time = 2;
        
        // 滚动视图
        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
{
    // 计算当前页码（找出当前显示在最中间的imageView）
    NSInteger page = 0;
    CGFloat minDistance = MAXFLOAT;
    for (int i = 0; i= self.pageControl.numberOfPages) {
            index = 0;
        }
        imageView.tag = index;
        imageView.image = self.images[index];
    }
    
    // 设置偏移量在中间
    if (self.isInfiniteScrollVertical) {
        self.scrollView.contentOffset = CGPointMake(0, self.scrollView.frame.size.height);
    } else {
        self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);
    }
}

#pragma mark - 定时器处理
- (void)startTimer
{
    NSTimer *timer = [NSTimer timerWithTimeInterval:self.time target:self selector:@selector(next) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
    self.timer = timer;
}

- (void)stopTimer
{
    [self.timer invalidate];
    self.timer = nil;
}
//下一张图片
- (void)next
{
    if (self.isInfiniteScrollVertical) {
        [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];
    }
}
@end

在ViewController.m中

#import "ViewController.h"
#import "XHGInfiniteScrollView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.title = @"无限滚动";
    
    //图片轮播
    [self setupInfiniteScrollView];
    
   
}
//图片轮播
- (void)setupInfiniteScrollView{
    //取消自动设置Inset
    self.automaticallyAdjustsScrollViewInsets = NO;
    //水平方向的滚动
    XHGInfiniteScrollView *scrollView = [[XHGInfiniteScrollView alloc] init];
    //尺寸
    scrollView.frame = CGRectMake(0, 64, self.view.frame.size.width, 180);
    //图片切换时间
    scrollView.time = 1;
    //图片数组
    scrollView.images = @[
                          [UIImage imageNamed:@"img_00"],
                          [UIImage imageNamed:@"img_01"],
                          [UIImage imageNamed:@"img_02"],
                          [UIImage imageNamed:@"img_03"],
                          [UIImage imageNamed:@"img_04"]
                          ];
    
    [self.view addSubview:scrollView];
    
    
    //竖直方向的滚动
    XHGInfiniteScrollView *scrollView1 = [[XHGInfiniteScrollView alloc] init];
    
    scrollView1.frame = CGRectMake(0, 250, self.view.frame.size.width, 100);
    scrollView1.images = @[
                          [UIImage imageNamed:@"img_00"],
                          [UIImage imageNamed:@"img_01"],
                          [UIImage imageNamed:@"img_02"],
                          [UIImage imageNamed:@"img_03"],
                          [UIImage imageNamed:@"img_04"]
                          ];
    
    [self.view addSubview:scrollView1];
    //设置竖直方向滚动
    scrollView1.infiniteScrollVertical = YES;
}
@end

在这里只需要创建XHGInfiniteScrollView幷添加图片设置属性添加即可

需要注意的是:在使用时要设置automaticallyAdjustsScrollViewInsets为NO

• automaticallyAdjustsScrollViewInsets会根据按所在界面的navigationBar自动调整scrollview的 inset,在视图中会出现向下的偏移,设置为NO，不让viewController调整

github XHGInfiniteScrollViewDemo地址