IOS開發學習筆記036-UIScrollView-循環自動滾動

實現scrollView的自動循環滾動，須要實現幾個方法。

其中scrollView中始終保存三張圖片，其餘的圖片在滾動到時再進行加載。

循環的實現主要是在setUpdate 中，若是索引爲0是第一個，索引爲2是最後一個，這是對索引值進行改變。第一個後接着顯示最後一個，最後一個後接着顯示第一個。依次循環。

分析過程爲：

 

 

一、首先是set方法 setImageNames

 1 #pragma mark - setter方法重寫
 2 - (void)setImageNames:(NSArray *)imageNames
 3 {
 4     _imageNames = imageNames;
 5     
 6     // 刪除以前的全部圖片,若是沒有這句話圖片會重複添加
 7     [self.scrollView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
 8     
 9     //NSLog(@"setImageNames----%@",imageNames);
10     // 添加圖片
11     for (int i = 0 ; i < kCount; i ++ )
12     {
13         UIImageView *imageView = [[UIImageView alloc] init];
14         [self.scrollView addSubview:imageView];
15     }
16     
17     // 設置pageControl的頁數
18     self.pageControl.numberOfPages = _imageNames.count;
19 
20     // 更新內容
21     [self setUpdate];
22 }

二、而後實現更新內容的方法 setUpdate

 1 // 更新內容
 2 - (void)setUpdate
 3 {
 4     NSLog(@"setUpdate---%ld",self.scrollView.subviews.count);
 5     //NSInteger index = 0;
 6     // 更新數據，圖片內容
 7     for (int i = 0 ; i < self.scrollView.subviews.count; i ++)
 8     {
 9         UIImageView *ima = self.scrollView.subviews[i]; // 獲取圖片
10         NSInteger index = self.pageControl.currentPage; // 當前索引
11         
12         if (i == 0) { // 最左邊圖片,第一個，共三個
13             index --;
14         }
15         else if(i == 2) // 最右邊圖片，第二個，共三個
16         {
17             index ++;
18         }
19         
20         if (index < 0) { // 若是是最左邊，顯示最後一張圖片，總得圖片個數，_imageNames.Count;
21             index = self.pageControl.numberOfPages - 1; //
22         }
23         else if(index >=  self.pageControl.numberOfPages) // 若是是最右邊，就顯示第一張圖片
24         {
25             index = 0;
26         }
27         
28         ima.tag = index; // 設置tag爲計算索引值
29         ima.image = [UIImage imageNamed:self.imageNames[index]]; // 從新設置圖片
30 
31     }
32     // NSLog(@"setUpdate--index--%ld",index);
33     // 設置scrollView偏移量
34     self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);
35 }

三、而後設置控件frame

 1 #pragma mark - 計算控件的frame
 2 // layout ,計算控件的frame
 3 - (void)layoutSubviews
 4 {
 5     [super layoutSubviews];
 6     
 7     // 設置scrollView的frame
 8     self.scrollView.frame = self.bounds;
 9     //view的高度和寬度
10     CGFloat viewW = self.scrollView.frame.size.width;
11     CGFloat viewH = self.scrollView.frame.size.height;
12     
13     // view 的位置
14     self.scrollView.contentSize = CGSizeMake(viewW * kCount, 0);
15     
16     // 計算圖片的 frame
17     for(int i = 0; i < kCount ; i ++)
18     {
19         UIImageView *imageView = self.scrollView.subviews[i];
20         imageView.frame = CGRectMake(i * viewW, 0, viewW, viewH);
21     }
22     
23     // pageControl 的frame
24     self.pageControl.frame = CGRectMake(viewW - 100, viewH - 20, 100, 20);
25 }

四、實現代理方法 scrollViewDidScroll

 1 #pragma mark - 代理方法
 2 // 代理方法
 3 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
 4 {
 5    // NSLog(@"scrollViewDidScroll----%ld",self.scrollView.subviews.count);
 6 
 7     // 計算最中間的那個imageView位置
 8     NSLog(@"scrollViewDidScroll----%ld",self.scrollView.subviews.count);
 9     NSInteger page = 0;
10     CGFloat minDistance = MAXFLOAT;
11     
12     for (int i = 0 ; i < self.scrollView.subviews.count;  i++)
13     {
14         UIImageView *ima = self.scrollView.subviews[i]; // 獲取圖片
15         CGFloat distance = 0;
16         // 計算當前image視圖中圖片相對與整個scrollView的絕對距離
17         distance = ABS(ima.frame.origin.x - self.scrollView.contentOffset.x);
18         //
19         if (distance < minDistance)
20         {
21             minDistance = distance; // 最小值
22             page = ima.tag;
23         }
24     }
25     NSLog(@"scrollViewDidScroll--pageIndex-%ld",page);
26     self.pageControl.currentPage = page; // 顯示最新的頁碼
27 }

五、設置滾動下一頁的方法

1 - (void)nextPage
2 {
3     // 設置新的偏移量，直接對寬度乘以2，不用擔憂越界
4     [self.scrollView setContentOffset:CGPointMake(2 * self.scrollView.frame.size.width, 0) animated:YES];
5 }

 

 

 

主要代碼以下：

  1 //
  2 //  SLQPageScroll.m
  3 //  UIScrollView-分頁練習
  4 //
  5 //  Created by Christian on 15/5/31.
  6 //  Copyright (c) 2015年 slq. All rights reserved.
  7 //
  8 // 滾動圖片個數
  9 #define kCount 3
 10 
 11 #import "SLQPageScroll.h"
 12 
 13 
 14 @interface SLQPageScroll  () <UIScrollViewDelegate> // 遵照協議
 15 
 16 @property (strong, nonatomic) IBOutlet UIScrollView *scrollView; // scrollView
 17 @property (weak, nonatomic) IBOutlet UIPageControl *pageControl; // pageControl
 18 @property (strong, nonatomic ) NSTimer *timer;
 19 
 20 @end
 21 
 22 @implementation SLQPageScroll
 23 
 24 + (instancetype)pageScroll
 25 {
 26     // NSStringFromClass 將類名轉換成字符串,xib文件名和類名同樣
 27     return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];
 28 }
 29 
 30 #pragma mark - 計算控件的frame
 31 // layout ,計算控件的frame
 32 - (void)layoutSubviews
 33 {
 34     [super layoutSubviews];
 35     
 36     // 設置scrollView的frame
 37     self.scrollView.frame = self.bounds;
 38     //view的高度和寬度
 39     CGFloat viewW = self.scrollView.frame.size.width;
 40     CGFloat viewH = self.scrollView.frame.size.height;
 41     
 42     // view 的位置
 43     self.scrollView.contentSize = CGSizeMake(viewW * kCount, 0);
 44     
 45     // 計算圖片的 frame
 46     for(int i = 0; i < kCount ; i ++)
 47     {
 48         UIImageView *imageView = self.scrollView.subviews[i];
 49         imageView.frame = CGRectMake(i * viewW, 0, viewW, viewH);
 50     }
 51     
 52     // pageControl 的frame
 53     self.pageControl.frame = CGRectMake(viewW - 100, viewH - 20, 100, 20);
 54 }
 55 
 56 #pragma mark - setter方法重寫
 57 - (void)setImageNames:(NSArray *)imageNames
 58 {
 59     _imageNames = imageNames;
 60     
 61     // 刪除以前的全部圖片,若是沒有這句話圖片會重複添加
 62     [self.scrollView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
 63     
 64     //NSLog(@"setImageNames----%@",imageNames);
 65     // 添加圖片
 66     for (int i = 0 ; i < kCount; i ++ )
 67     {
 68         UIImageView *imageView = [[UIImageView alloc] init];
 69         [self.scrollView addSubview:imageView];
 70     }
 71     
 72     // 設置pageControl的頁數
 73     self.pageControl.numberOfPages = _imageNames.count;
 74 
 75     // 更新內容
 76     [self setUpdate];
 77 }
 78 
 79 #pragma mark - 代理方法
 80 // 代理方法
 81 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
 82 {
 83    // NSLog(@"scrollViewDidScroll----%ld",self.scrollView.subviews.count);
 84 
 85     // 計算最中間的那個imageView位置
 86     NSLog(@"scrollViewDidScroll----%ld",self.scrollView.subviews.count);
 87     NSInteger page = 0;
 88     CGFloat minDistance = MAXFLOAT;
 89     
 90     for (int i = 0 ; i < self.scrollView.subviews.count;  i++)
 91     {
 92         UIImageView *ima = self.scrollView.subviews[i]; // 獲取圖片
 93         CGFloat distance = 0;
 94         // 計算當前image視圖中圖片相對與整個scrollView的絕對距離
 95         distance = ABS(ima.frame.origin.x - self.scrollView.contentOffset.x);
 96         //
 97         if (distance < minDistance)
 98         {
 99             minDistance = distance; // 最小值
100             page = ima.tag;
101         }
102     }
103     // NSLog(@"scrollViewDidScroll--pageIndex-%ld",page);
104     self.pageControl.currentPage = page; // 顯示最新的頁碼
105 }
106 
107 // 更新內容
108 - (void)setUpdate
109 {
110     //NSLog(@"setUpdate---%ld",self.scrollView.subviews.count);
111     // 更新數據，圖片內容
112     for (int i = 0 ; i < self.scrollView.subviews.count; i ++)
113     {
114         UIImageView *ima = self.scrollView.subviews[i]; // 獲取圖片
115         NSInteger index = self.pageControl.currentPage; // 當前索引
116         
117         if (i == 0) { // 最左邊圖片,第一個，共三個
118             index --;
119         }
120         else if(i == 2) // 最右邊圖片，第二個，共三個
121         {
122             index ++;
123         }
124         
125         if (index < 0) { // 若是是最左邊，顯示最後一張圖片，總得圖片個數，_imageNames.Count;
126             index = self.pageControl.numberOfPages - 1; //
127         }
128         else if(index >=  self.pageControl.numberOfPages) // 若是是最右邊，就顯示第一張圖片
129         {
130             index = 0;
131         }
132         
133         ima.tag = index; // 設置tag爲計算索引值
134         ima.image = [UIImage imageNamed:self.imageNames[index]]; // 從新設置圖片
135 
136     }
137     // NSLog(@"setUpdate--index--%ld",index)
138     // 設置scrollView偏移量
139     self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);
140 }
141 
142 // 中止拖動
143 - (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
144 {
145     [self setUpdate];
146 }
147 
148 // 拖動暫停狀態
149 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
150 {
151     [self setUpdate];
152 }
153 
154 - (void)setCurrentColor:(UIColor *)currentColor
155 {
156     _currentColor = currentColor;
157     self.pageControl.currentPageIndicatorTintColor = _currentColor;
158 }
159 - (void)setOtherColor:(UIColor *)otherColor
160 {
161     _otherColor = otherColor;
162     self.pageControl.pageIndicatorTintColor = _otherColor;
163 }
164 
165 // xib 初始化完畢會調用這個方法
166 - (void)awakeFromNib
167 {
168     self.pageControl.currentPage = 0;
169     self.scrollView.bounces = NO;
170     
171     // 開啓定時器
172     [self startTimer];
173 
174 }
175 
176 
177 - (void)nextPage
178 {
179     // 設置新的偏移量
180     [self.scrollView setContentOffset:CGPointMake(2 * self.scrollView.frame.size.width, 0) animated:YES];
181 }
182 
183 #pragma mark - 定時器
184 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
185 {
186     [self startTimer];
187 }
188 
189 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
190 {
191     [self stopTimer];
192 }
193 
194 
195 - (void)startTimer
196 {
197     //  建立定時器
198     self.timer = [NSTimer scheduledTimerWithTimeInterval:3.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
199     // 設置計時器線程的優先級和其餘線程同樣
200     [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
201 }
202 
203 
204 - (void)stopTimer
205 {
206     [self.timer invalidate]; // 中止計時器
207     self.timer = nil; //清空指針
208 }
209 @end