UIScrollView循环滚动1

现在基本每一个商业APP都会有循环滚动视图,放一些轮播广告之类的,都是放在UIScrollView之上。假如我要实现N张图片的轮播,我借鉴了几个博文,得到两种方法实现:

【第一种】:如下图(图片来源于kenshin cui‘s的博客),假如要实现3张图片轮播,我们就设置UIScrollView上的imageView为3+2个,图片顺序为31231。

初始加载UIScrollView时候,滚动到第二个imageView上。

当滚动到最后一个imageview时候,设置UIScrollView的ContentOffset到第二个imageView。

当往前滚动到第一个imageview时候,设置UIScrollView的ContentOffset到倒数第二个imageview。

具体代码如下:

 1 #import "ViewController.h"
 2 //定义宏,获取屏幕宽高
 3 #define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
 4 #define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
 5 
 6 @interface ViewController ()<UIScrollViewDelegate>
 7 /** 滚动视图*/
 8 @property (nonatomic,strong)UIScrollView *scrollView;
 9 /** 图片数组*/
10 @property (nonatomic,strong)NSMutableArray *imageArray;
11 @end
12 
13 @implementation ViewController
14 //懒加载滚动视图
15 -(UIScrollView *)scrollView{
16     if (!_scrollView) {
17         _scrollView = [[UIScrollView alloc]init];
18     }
19     return _scrollView;
20 }
21 //懒加载图片数组
22 -(NSMutableArray *)imageArray{
23     if (!_imageArray) {
24         _imageArray = [NSMutableArray array];
25     }
26     return _imageArray;
27 }
28 
29 
30 - (void)viewDidLoad {
31     [super viewDidLoad];
32     //先加载图片
33     [self loadImageArray];
34     //再设置滚动视图
35     [self setupScrollview];
36 }
37 //加载图片,假设有3张图片 welcome1 welcome2 welcome3
38 -(void)loadImageArray{
39     for (NSInteger i = 0 ; i<3; i++) {
40         UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"welcome%ld",i+1]];
41         [self.imageArray addObject:image];
42     }
43 }
44 //设置scrollview
45 -(void)setupScrollview{
46     //设置可见区域
47     self.scrollView.frame = self.view.bounds;
48     //设置容量
49     self.scrollView.contentSize = CGSizeMake(SCREEN_WIDTH*(self.imageArray.count + 2), SCREEN_HEIGHT);
50     //翻页模式
51     self.scrollView.pagingEnabled = YES;
52     //代理
53     self.scrollView.delegate = self;
54     //边缘不能弹跳
55     self.scrollView.bounces = NO;
56     //隐藏水平滚动条
57     self.scrollView.showsHorizontalScrollIndicator = NO;
58     [self.view addSubview:self.scrollView];
59     //循环添加imageView
60     for (NSInteger i = 0; i < self.imageArray.count + 2; i++) {
61         UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(i *SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
62         if (i == 0) {//0->lastObject
63             imageView.image = self.imageArray.lastObject;
64         }else if (i == self.imageArray.count + 1){//4->firstObject
65             imageView.image = self.imageArray.firstObject;
66         }else{//1->0 2->1 3->2
67             imageView.image = self.imageArray[i-1];
68         }
69         [self.scrollView addSubview:imageView];
70     }
71     //设置初始滚动的位置为第二个imageView
72     self.scrollView.contentOffset = CGPointMake(SCREEN_WIDTH, 0);
73 }
74 //当停止滚动时候,重新设置 scrollview的ContentOffset
75 -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
76     CGPoint point = scrollView.contentOffset;
77     if (point.x/SCREEN_WIDTH > self.imageArray.count) {//当滚动到最后的时候
78         [self.scrollView setContentOffset:CGPointMake(SCREEN_WIDTH, 0) animated:NO];
79     }else if (point.x/SCREEN_WIDTH < 1){//当滚动到最前的时候
80         [self.scrollView setContentOffset:CGPointMake(SCREEN_WIDTH*self.imageArray.count, 0) animated:NO];
81     }
82 }

可以新建项目,直接复制该代码,在loadImageArray方法里面修改成加载自己的图片,运行即可。

【第二种】:假如有100张图片或者更多,就得加载100+2个imageview,显然对性能要求就得更高,因此衍生出了第二种。

就是无论你有多少张图片,imageview始终只有3个。

无论你怎么滚动,当滚动完毕的时候,UIScrollView的ContentOffset都是中间的一个imageview。

只是我们在UIScrollView的代理方法里面不断改变每一个imageview.image的图片而已。

第二种源码我会在后续博文补充。

其实,这个循环滚动学的不是会敲代码,而是一种思路。

最后推荐一个github很好用的类似第三方类库SDCycleScrollView,星星两千多,很不错。

posted @ 2016-06-13 11:15  wolfhous  阅读(537)  评论(0编辑  收藏  举报