UIScrollView无限滚动和轮播效果

XX问我一个问题,就是以前做过的无线滚动,-_-||,突然发现没什么印象了,于是赶紧做了个Demo熟悉一下,其实也挺简单的

原理:改变数组,重新加载图片,偏移量1,2,3达到3瞬间回到2,达到2,瞬间回到1

利用3个UIImageView多次利用

贴代码:

//
//  ViewController.m
//  测试-滚动
//
//  Created by lanqs on 15/2/7.
//  Copyright (c) 2015年 Tanqihong. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic,strong)UIScrollView *scrollView;
@property (nonatomic,strong)NSMutableArray *array;
@property (nonatomic,strong)NSMutableArray *imageArray;
@property (nonatomic,strong)NSTimer *timer;
@end

@implementation ViewController

#pragma mark - 懒加载

- (NSMutableArray *)array {
    if (!_array) {
        _array = [[NSMutableArray alloc]initWithObjects:@"QQ20150207-2.png",@"QQ20150207-3.png",@"QQ20150207-4.png",@"QQ20150207-5.png",@"QQ20150207-6.png", nil];
    }
    return _array;
}

- (NSMutableArray *)imageArray {
    if (!_imageArray) {
        _imageArray = [[NSMutableArray alloc]init];
    }
    return _imageArray;
}

#pragma mark - viewDidLoad

- (void)viewDidLoad {
    [super viewDidLoad];
    _scrollView = [[UIScrollView alloc]initWithFrame:self.view.bounds];
    _scrollView.backgroundColor = [UIColor grayColor];
    _scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.view.bounds)*3, CGRectGetHeight(self.view.bounds));
    _scrollView.pagingEnabled = YES;
    _scrollView.delegate = self;
    [self.view addSubview:_scrollView];
    
    for (int i = 0; i < 3; i ++) {
        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(i * CGRectGetWidth(self.view.bounds), 0, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds))];
        [imageView setImage:[UIImage imageNamed:self.array[i]]];
        imageView.layer.borderWidth = 1;
        [_scrollView addSubview:imageView];
        
        //在imageArray上添加3个imageView
        [self.imageArray addObject:imageView];
    }
    
    //设置这个是为了自动轮播做准备
    _scrollView.contentOffset = CGPointMake(CGRectGetWidth(self.view.bounds), 0);
    
    _timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(processTimer) userInfo:nil repeats:YES];
    
}

#pragma mark - Timer

- (void)processTimer {
    //有滑动效果的
    //当他到CGRectGetWidth(self.view.bounds) *2 这个偏移量的时候就会触发滚动视图的滚动方法
    //效果是,回到中间,然后再偏移,再回到,循环滚动就完成了
    [_scrollView setContentOffset:CGPointMake(CGRectGetWidth(self.view.bounds) *2, 0) animated:YES];
}

#pragma mark - 重新加载数组里面的图片

- (void)setImageToImageView {
    NSInteger i = 0;
    //因为只有3个所以循环3呲牙
    for (UIImageView *imageView in self.imageArray) {
        //给imageArray 添加改变后的图片(向左或者向右移动一张图片的)
        //遍历,你改变遍历里面的元素,self.imageArray会改变的
        [imageView setImage:[UIImage imageNamed:self.array[i]]];
        i ++;
    }
}

#pragma mark - 

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    if (scrollView.contentOffset.x >= 2 * CGRectGetWidth(self.view.bounds)) {
         //向右滚动
        //a,b,c三个位置
        //当滑动的超过这个距离的时候其实已经瞬间回到b的位置了
        //就相当于你拉着b在向c滑动
        
        //复制数组中第一张图
        id fisrtImageName = [self.array[0] mutableCopy];
        //删除数组中第一张图
        [self.array removeObjectAtIndex:0];
        //添加这张图,到数组的末尾
        [self.array addObject:fisrtImageName];
        
    }else if (scrollView.contentOffset.x <= 0) {
        //向左滚动
        //同上...
        id lastImageName = [self.array.lastObject mutableCopy];
        [self.array removeLastObject];
        [self.array insertObject:lastImageName atIndex:0];
        
    }else {
        return;
    }
    
    [self setImageToImageView];
    scrollView.contentOffset = CGPointMake(CGRectGetWidth(self.view.bounds), 0);
}

@end

效果图:

UIScrollView无限滚动和轮播效果_第1张图片

UIScrollView无限滚动和轮播效果_第2张图片

你可能感兴趣的:(UI基础)