UIScrollView的轮播在如今的app中用得十分广泛，最初实现的时候方式比较拙劣，滚动到最后一个视图时再返回到第一个看起来非常的不连贯。
今天查询UIScrollView轮播资料，总结两种比较喜欢也易于理解的方法：
1、UIScrollView显示的子视图左右各放一个多出来的子视图，如本来有A/B/C三张图片，在A前面放一个ImageView显示C，在C后天放一个ImageView显示A，即C/A/B/C/A。
初始化ScrollView的时候，contentoffset 从A开始，然后setContentOffset:offSetanimated:YES 依次轮播，当播放到C之后，跳转到A后，在
- (void)scrollViewDidScroll:(UIScrollView *)scrollView 中替换其contentoffset为第一个A的contentoffset。
代码如下：
- (void)viewDidLoad
{
[super viewDidLoad];
_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 0, 300, 300)];
_scrollView.frame = CGRectMake(10, 0, 300, 300);
_scrollView.contentSize = CGSizeMake(300*5, 300);
_scrollView.contentOffset = CGPointMake(300, 0);
_scrollView.delegate = self;
[self.view addSubview:_scrollView];
UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 300, 300)];
imageView1.image = [UIImage imageNamed:@"3.jpg"];
[_scrollView addSubview:imageView1];
UIImageView *imageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(300, 0, 300, 300)];
imageView2.image = [UIImage imageNamed:@"1.jpg"];
[_scrollView addSubview:imageView2];
UIImageView *imageView3 = [[UIImageView alloc] initWithFrame:CGRectMake(300*2, 0, 300, 300)];
imageView3.image = [UIImage imageNamed:@"2.jpg"];
[_scrollView addSubview:imageView3];
UIImageView *imageView4 = [[UIImageView alloc] initWithFrame:CGRectMake(300*3, 0, 300, 300)];
imageView4.image = [UIImage imageNamed:@"3.jpg"];
[_scrollView addSubview:imageView4];
UIImageView *imageView5 = [[UIImageView alloc] initWithFrame:CGRectMake(300*4, 0, 300, 300)];
imageView5.image = [UIImage imageNamed:@"1.jpg"];
[_scrollView addSubview:imageView5];
// 设置时钟动画 定时器
NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(update:) userInfo:nil repeats:YES];
// 将定时器添加到主线程
[[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
}
- (void)update:(NSTimer *)timer{
CGPoint offSet =self.scrollView.contentOffset;
offSet.x += 300;
[self.scrollView setContentOffset:offSet animated:YES];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat X =self.scrollView.contentOffset.x;
if (X == 0) {
self.scrollView.contentOffset = CGPointMake(300*3, 0);
}
if (X == 300*4) {
self.scrollView.contentOffset = CGPointMake(300, 0);
}
}
2、方法二是用固定的三个UIImageView控件，然后替换其图片来实现。
具体思路：先初始化三个图片控件，然后第一个控件放最后一张图，第二个图片放第一张图，第三个控件放第2张图。如轮播A/B/三个图片时，显示顺序是C/A/B。
后面的思路与上面类似，只不过要进行image替换。直接上代码：
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIScrollView *scrollView =[[UIScrollView alloc] init];
scrollView.frame = CGRectMake(0, 0, width, height);
[self.view addSubview:scrollView];
self.scrollView = scrollView;
[self.scrollView setContentSize:CGSizeMake(width * 3, height)];
// 设置隐藏横向条
self.scrollView.showsHorizontalScrollIndicator = NO;
// 设置自动分页
self.scrollView.pagingEnabled = YES;
// 设置代理
self.scrollView.delegate = self;
// 设置当前点
self.scrollView.contentOffset = CGPointMake(width, 0);
// 设置是否有边界
self.scrollView.bounces = NO;
// 初始化当前视图
UIImageView *currentImageView =[[UIImageView alloc] init];
currentImageView.image = [UIImage imageNamed:@"1.jpg"];
[self.scrollView addSubview:currentImageView];
self.currentImageView = currentImageView;
self.currentImageView.frame = CGRectMake(width, 0, width, height);
self.currentImageView.contentMode = UIViewContentModeScaleAspectFill;
// 初始化下一个视图
UIImageView *nextImageView = [[UIImageView alloc] init];
nextImageView.image = [UIImage imageNamed:@"2.jpg"];
[self.scrollView addSubview:nextImageView];
self.nextImageView = nextImageView;
self.nextImageView.frame = CGRectMake(width * 2, 0, width, height);
self.nextImageView.contentMode = UIViewContentModeScaleAspectFill;
// 初始化上一个视图
UIImageView *preImageView =[[UIImageView alloc] init];
preImageView.image = [UIImage imageNamed:@"3.jpg"];
preImageView.frame = CGRectMake(0, 0, width, height);
[self.scrollView addSubview:preImageView];
self.preImageView = preImageView;
self.preImageView.contentMode =UIViewContentModeScaleAspectFill;
// 设置时钟动画 定时器
self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(update:) userInfo:nil repeats:YES];
// 将定时器添加到主线程
[[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
- (void)update:(NSTimer *)timer{
//定时移动
if (_isDragging == YES) {
return ;
}
CGPoint offSet =self.scrollView.contentOffset;
offSet.x +=offSet.x;
[self.scrollView setContentOffset:offSet animated:YES];
}
// 开始拖动
- (void) scrollViewDidScroll:(UIScrollView *)scrollView{
static int i =1; // 当前展示的是第几张图片
float offset = self.scrollView.contentOffset.x;
if (self.nextImageView.image == nil || self.preImageView.image == nil) {
// 加载下一个视图
NSString *imageName1 = [NSString stringWithFormat:@"%d.jpg",i == KOUNT ? 1:i +1];
_nextImageView.image = [UIImage imageNamed:imageName1];
// 加载上一个视图
NSString *imageName2 = [NSString stringWithFormat:@"%d.jpg",i==1 ? KOUNT :i-1];
_preImageView.image = [UIImage imageNamed:imageName2];
}
if(offset ==0){
_currentImageView.image = _preImageView.image;
scrollView.contentOffset = CGPointMake(width, 0);
_preImageView.image = nil;
if (i == 1) {
i =KOUNT;
}else{
i-=1;
}
}
if (offset == width * 2) {
_currentImageView.image = _nextImageView.image;
scrollView.contentOffset = CGPointMake(width, 0);
_nextImageView.image = nil;
if (i == KOUNT) {
i =1 ;
}else{
i +=1 ;
}
}
}
主要思路都是在滑动的动画执行完毕后，在用非动画方法移动的相同区域。
网友评论