本帖最后由 竹林风 于 2018-12-8 17:59 编辑
文章导航
上一篇中我们简单介绍了UIScrollView的基本属性和方法,这一篇我们用UIScrollView实现一个无限轮播图。
先看效果
实现原理:
我们需要在第一张图片的位置摆放最后一张图片,然后我们依次摆放图片(从第一张到最后一张),最后在所有图片的尾部我们再放上第一张图片。这样我们就多放了两张图片(分别在首尾多放了一张图)看代码
[Objective-C] 纯文本查看 复制代码 //设置图片
-(void)setImages{
/// 在UIScrollView的最前面添加一张图片
UIImageView *firstImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.myScroll.frame), CGRectGetHeight(self.myScroll.frame))];
/// 图片名是最后一张图片
firstImageView.image = [UIImage imageNamed:self.aryImage.lastObject];
[self.myScroll addSubview:firstImageView];
/// 添加图片
for (NSInteger i = 0; i < self.aryImage.count; i ++) {
/// UIScrollView上的每一张图片
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake((i + 1) * CGRectGetWidth(self.myScroll.frame), 0, CGRectGetWidth(self.myScroll.frame), CGRectGetHeight(self.myScroll.frame))];
imageView.image = [UIImage imageNamed:self.aryImage[i]];
[self.myScroll addSubview:imageView];
self.myScroll.contentSize = CGSizeMake((i + 2) * self.myScroll.bounds.size.width, 0);
}
/// 在UIScrollView的最后面添加一张图片
UIImageView *lastImageView = [[UIImageView alloc] initWithFrame:CGRectMake((self.aryImage.count + 1) * CGRectGetWidth(self.myScroll.frame), 0, CGRectGetWidth(self.myScroll.frame), self.myScroll.frame.size.height)];
/// 图片名是第一张图片
lastImageView.image = [UIImage imageNamed:self.aryImage.firstObject];
[self.myScroll addSubview:lastImageView];
/// 设置UIScrollView的偏移量
self.myScroll.contentSize = CGSizeMake((self.aryImage.count + 2) * self.myScroll.bounds.size.width, 0);
/// 设置UIScrollView的起始偏移距离(将第一张图片跳过)
self.myScroll.contentOffset = CGPointMake(CGRectGetWidth(self.myScroll.frame), 0);
/// 图片总数
self.pageControl.numberOfPages = self.aryImage.count;
self.pageControl.currentPage = 0;
}
如果看到这里,应该就会大致明白无线轮播的实现原理了。接下来就是最后一步,在UIScrollView的代理方法里面写逻辑:判断UIScrollView的偏移量,当其滑动到首位时(显示的是最后一张图片),滑动停止,就把偏移量修改最后面图片的位置上(倒数第二张)。同理,当UIScrollView滑动到最后时(显示的是第一张图片),滑动停止,就把偏移量修改到第一张图片的位置上(正数第二张)。
[Objective-C] 纯文本查看 复制代码 #pragma mark - UIScrollViewDelegate
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
/// 当UIScrollView滑动到第一位停止时,将UIScrollView的偏移位置改变
if (scrollView.contentOffset.x == 0) {
scrollView.contentOffset = CGPointMake(self.aryImage.count * self.myScroll.bounds.size.width, 0);
self.pageControl.currentPage = self.aryImage.count;
/// 当UIScrollView滑动到最后一位停止时,将UIScrollView的偏移位置改变
} else if (scrollView.contentOffset.x == (self.aryImage.count + 1)* self.myScroll.bounds.size.width) {
scrollView.contentOffset = CGPointMake(self.myScroll.bounds.size.width, 0);
self.pageControl.currentPage = 0;
} else {
self.pageControl.currentPage = scrollView.contentOffset.x / self.myScroll.bounds.size.width - 1;
}
}
ok,原理其实就是这样。在首尾多加两张图片当做占位符,然后当UIScrollView滑动到占位符的位置时,改变UIScrollView的偏移量,简单且方便。
附件:
Test-UIScrollView无限轮播.zip
(318.05 KB, 下载次数: 0)
|