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
效果图:
原理:改变数组,重新加载图片,偏移量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
效果图:
相关文章推荐
- (原创)自定义view(view的绘制过程)、无限轮播并触碰停止轮播的viewpage、水平和垂直滚动的TextView、仿QQ滑动删除、下拉刷新上拉加载view、毛玻璃效果、低版本水波纹、圆环头像图
- iOS利用UIScrollView实现无限滚动效果
- 我自己写的Uiscrollview无限滚动
- 【学习ios之路:UI系列】实现轮播图效果(UIImageView,UIScrollView,UIPageControl,NSTimer相结合)
- iOS-利用UIScrollView实现展示图片的无限滚动及自动滚动
- UIScrollView配合定时器和手动实现图片轮播无限循环
- iOS-利用UIScrollView实现展示图片的无限滚动及自动滚动 - 郭晓
- iOS-利用UIScrollView实现展示图片的无限滚动及自动滚动
- 源码推荐(11.11):基础的 UIscrollView 例子,Swift/Objc滚动悬停效果实现
- iOS 简易无限滚动的图片轮播器-SDCycleScrollView
- UIScrollView实现图片轮播器的无限滚动
- 给UIScrollView添加category实现UIScrollView的轮播效果
- UIScrollView实现轮播效果
- iOS 简易无限滚动的图片轮播器-SDCycleScrollView
- 滚动视图(UIScrollView)无限无缝左右切换图片,自动顺序加逆序循环播放图片
- UIScrollView的无限左滑轮播一点也不难
- UIScrollView的无限左滑轮播一点也不难
- Android 使用ViewPager自动滚动循环轮播效果
- iOS无限轮播图片的实现-仅仅用了三个UIImageView实现多图的轮播效果