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

iOS利用UIScrollView实现无限滚动效果

2016-12-05 10:17 1136 查看

前言

众所周知UIScrollView 的无限滚动主要应用在图片轮播器、欢迎界面等场景。它的原理是在要显示的图片前后各加一张图片即在第一张图片之前放最后一张图片，在最后一张图片之后放第一张图片，然后在滚动到边缘的时候，巧妙的过渡一下就可以"瞒天过海"，"以假乱真"的造成无限滚动的假象。网络上有很多只用三张或两张图片实现的方法，效率比这个方法高，但实现起来稍微麻烦一点，有兴趣的可以去深入研究。

实现步骤

      1、根据需求准备几张图片，在网上找了5张图片，分别命名为 img_01，img_02，img_03，img_04，img_05 。

      2、代码实现，主要分为：添加UIScrollView，添加显示图片，添加UIPageControl，然后监听UIScrollView的滚动，根据滚动的位置来设置UIPageControl，最重要的是对于滚动到两个边缘时要特殊处理一下

代码如下：

#import "ViewController.h"
//屏幕宽度
#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
//图片高度
#define IMG_HEIGHT 180
//要显示的图片总数
#define MAX_SIZE 7
#import "ViewController.h"
@interface ViewController () <UIScrollViewDelegate>
//滚动视图
@property (strong, nonatomic) UIScrollView *loopScrollView;
//指示器
@property (strong, nonatomic) UIPageControl *pageIndicator;
//要展示的图片数组
@property(strong, nonatomic) NSMutableArray *imgArray;
@end
@implementation ViewController
//懒加载数组
-(NSMutableArray *)imgArray
{
if(_imgArray == nil)
{
_imgArray = [[NSMutableArray alloc]initWithCapacity:MAX_SIZE];
//在要展示的5张图片的前后各加一张图片，第一张前面加第五张，第五张后面加第一张
[_imgArray addObject:[UIImage imageNamed:@"img_05.jpg"]];
for (int i = 1; i< MAX_SIZE - 1; i++) {
NSString *imgName = [[NSString alloc]initWithFormat:@"img_0%d.jpg", i];
[_imgArray addObject:[UIImage imageNamed:imgName]];
}
[_imgArray addObject:[UIImage imageNamed:@"img_01.jpg"]];
}
return _imgArray;
}
- (void)viewDidLoad {
[super viewDidLoad];
[self setupScrollView];
[self setupPageControl];
}
/**
* 创建UIScrollView并设置其属性
*/
-(void)setupScrollView
{
UIScrollView *sc = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, IMG_HEIGHT)];
//创建UIImageView并添加到UIScrollView中
for (int i = 0; i< MAX_SIZE; i++) {
UIImageView *img = [[UIImageView alloc]initWithImage:[self.imgArray objectAtIndex:i]];
img.frame = CGRectMake(SCREEN_WIDTH * i, 0, SCREEN_WIDTH, IMG_HEIGHT);
[sc addSubview:img];
}
//设置UIScrollView的属性
sc.contentSize = CGSizeMake(SCREEN_WIDTH * self.imgArray.count, IMG_HEIGHT);
sc.showsHorizontalScrollIndicator = NO;
sc.pagingEnabled = YES;
//刚开始应该滚动到第二张显示，因为第一张其实是最后一张图片
[sc setContentOffset:CGPointMake(SCREEN_WIDTH, 0) animated:NO];
//设置代理并添加到当前view中
sc.delegate = self;
[self.view addSubview:sc];
self.loopScrollView = sc;
}
/**
* 创建UIPageControl并设置其属性
*/
-(void)setupPageControl
{
//注意frame，这样设置可以居中显示
UIPageControl *pc = [[UIPageControl alloc]initWithFrame:CGRectMake(self.view.center.x - 50, CGRectGetMaxY(self.loopScrollView.frame) - 25 , 100, 25)];
//设置UIPageControl的属性并添加到当前view中
pc.numberOfPages = MAX_SIZE - 2;
pc.currentPage = 0;
pc.pageIndicatorTintColor = [UIColor redColor];
[self.view addSubview:pc];
self.pageIndicator = pc;
}
//UIScrollView的代理方法，在该方法中改变UIPageControl并且处理边缘滚动
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//获取当前UIScrollView的位置
CGPoint offset = [scrollView contentOffset];
//算出滚动到第几页
int currentPage = offset.x/SCREEN_WIDTH;
//设置UIPageControl
self.pageIndicator.currentPage = currentPage - 1;
//对最后一张和第一张要进行特殊处理
//1、如果是第一张
if (currentPage == 0) {
//下面两个方法任选其一都可以达到效果，但是注意动画一定要设置为NO，不然会有视觉会有辣眼睛的感觉
//方法1
[self.loopScrollView setContentOffset:CGPointMake(SCREEN_WIDTH * (MAX_SIZE-2), 0) animated:NO];
//方法2，该方法要求设置contentSize时，任一方向就算不滚动也不能为0，否则无效
//[self.loopScrollView scrollRectToVisible:CGRectMake(SCREEN_WIDTH * (MAX_SIZE-2), 0, SCREEN_WIDTH, IMG_HEIGHT) animated:NO];
self.pageIndicator.currentPage = MAX_SIZE - 2;
}
//2、如果是最后一张
else if(currentPage == MAX_SIZE - 1) {
[self.loopScrollView setContentOffset:CGPointMake(SCREEN_WIDTH, 0) animated:NO];
//[self.loopScrollView scrollRectToVisible:CGRectMake(SCREEN_WIDTH, 0, SCREEN_WIDTH, IMG_HEIGHT) animated:NO];
self.pageIndicator.currentPage = 0;
}
}
@end

实现效果

总结

好了，以上就是这篇文章的全部内容了，其实实现轮播现在最好的方案应该是使用UICollectionView，因为它是利用重用机制来实现的，性能会好很多，代码写起来类似。希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ios uiscrollview 无限滚动
相关文章推荐
新的分享
章节导航