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，星星兩千多，很不錯。