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); } }这是方法1。里面的图片是随意在网上找的。
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 ; } } }主要思路都是在滑动的动画执行完毕后,在用非动画方法移动的相同区域。