iOS-利用UIScrollView实现展示图片的无限滚动及自动滚动

  在很多应用中，都有利用UIScrollView实现图片的无限滚动及自动滚动效果，下面我就跟大家分享下我是如何实现这种效果的。

//
//  GXViewController.m
//  自动滚动及无线循环
//
//  Created by 郭晓 on 14-3-7.
//  Copyright (c) 2014年 郭晓. All rights reserved.
//

#import "GXViewController.h"

#define kCount 6  //图片总张数

static long step = 0; //记录时钟动画调用次数

@interface GXViewController () <UIScrollViewDelegate>
{
    UIScrollView *_scrollView;
    UIImageView     *_currentImageView; //当前视图
    UIImageView     *_nextImageView;    //下一个视图
    UIImageView     *_previousView;     //上一个视图
    CADisplayLink   *_timer;            //定时器
    
    BOOL _isDraging; //当前是否正在拖拽
}

@end

@implementation GXViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    CGFloat width = self.view.bounds.size.width;
    CGFloat height = self.view.bounds.size.height;
    
    _scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    _scrollView.contentSize = CGSizeMake(3 * width, 0);
    _scrollView.showsHorizontalScrollIndicator = NO;
    _scrollView.pagingEnabled = YES;
    _scrollView.delegate = self;
    _scrollView.bounces = NO;
    _scrollView.contentOffset = CGPointMake(width, 0);
    [self.view addSubview:_scrollView];
    
    //初始化当前视图
    _currentImageView = [[UIImageView alloc] init];
    _currentImageView.image = [UIImage imageNamed:@"01.jpg"];
    _currentImageView.frame = CGRectMake(width, 0, width, height);
    _currentImageView.contentMode = UIViewContentModeScaleAspectFill;
    [_scrollView addSubview:_currentImageView];
    
    //初始化下一个视图
    _nextImageView = [[UIImageView alloc] init];
    _nextImageView.image = [UIImage imageNamed:@"02.jpg"];
    _nextImageView.frame = CGRectMake(width * 2, 0, width, height);
    _nextImageView.contentMode = UIViewContentModeScaleAspectFill;
    [_scrollView addSubview:_nextImageView];
    
    //初始化上一个视图
    _previousView = [[UIImageView alloc] init];
    _previousView.image = [UIImage imageNamed:@"06.jpg"];
    _previousView.frame = CGRectMake(0, 0, width, height);
    _previousView.contentMode = UIViewContentModeScaleAspectFill;
    [_scrollView addSubview:_previousView];
    
    // 时钟动画
    _timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(update:)];
    [_timer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
    
}

#pragma mark 时钟动画调用方法
- (void)update:(CADisplayLink *)timer
{
    step++;
    
    if ((step % 120 != 0) || _isDraging) {
        return;
    }
    
    CGPoint offset = _scrollView.contentOffset;
    
    offset.x += 320;
    if (offset.x > 640) {
        offset.x = 320;
    }
    
    [_scrollView setContentOffset:offset animated:YES];
}

#pragma mark - 代理方法
#pragma mark 准备开始拖动
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    _isDraging = YES;
}

#pragma mark 视图停止滚动
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    _isDraging = NO;
    step = 0;
}

#pragma mark 已经拖动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    static int i = 1;//当前展示的是第几张图片
    
    float offset = scrollView.contentOffset.x;
    if (_nextImageView.image == nil || _previousView.image == nil) {
        
        //加载下一个视图
        NSString *imageName1 = [NSString stringWithFormat:@"0%d.jpg", i == kCount ? 1 : i + 1];
        _nextImageView.image = [UIImage imageNamed:imageName1];
        
        //加载上一个视图
        NSString *imageName2 = [NSString stringWithFormat:@"0%d.jpg", i == 1 ? kCount : i - 1];
        _previousView.image = [UIImage imageNamed:imageName2];
    }
    
    if (offset == 0) {
        _currentImageView.image = _previousView.image;
        scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width, 0);
        _previousView.image = nil;
        
        if (i == 1) {
            i = kCount;
        }else{
            i -= 1;
        }
        
    }
    
    if (offset == scrollView.bounds.size.width * 2) {
        _currentImageView.image = _nextImageView.image;
        scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width, 0);
        _nextImageView.image = nil;
        
        if (i == kCount) {
            i = 1;
        }else{
            i += 1;
        }
        
    }
}

@end

注意：在代码中，使用到了6张用于展示的图片，图片名分别为01、02、03、04、05、06.

  通过以上代码，就可以实现图片的无限滚动及自动滚动功能，之所以用CADisplayLink而不用NSTimer是因为NSTimer的时间不够准确。