您的位置:首页 > 产品设计 > UI/UE

UIScrollView无限滚动和轮播效果

2015-02-07 21:07 363 查看
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 ()<UIScrollViewDelegate>

@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 - <UIScrollViewDelegate>

- (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


效果图:



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: