導語
在不少專案中，都會有圖片輪播這個功能，現在網上關於圖片輪播的框架層出不窮，千奇百怪，筆者根據自己的思路，用兩個imageView也實現了圖片輪播，這裡說說筆者的主要思路以及大概步驟，具體程式碼請看這裡，如果覺得好用，請獻上你的star
該輪播框架的優勢
1.檔案少，程式碼簡潔
2.不依賴任何其他第三方庫，耦合度低
3.同時支援本地圖片及網路圖片
4.可修改分頁控制元件位置，顯示或隱藏
5.自定義分頁控制元件的圖片，就是這麼個性
6.自帶圖片快取，一次載入，永久使用
7.效能好，佔用記憶體少，輪播流暢
實際使用
我們先看demo，程式碼如下
執行效果
輪播實現步驟
接下來，筆者將從各方面逐一分析
層級結構
最底層是一個UIView，上面有一個UIScrollView以及UIPageControl，scrollView上有兩個UIImageView，imageView寬高 = scrollview寬高 = view寬高
輪播原理
假設輪播控制元件的寬度為x高度為y，我們設定scrollview的contentSize.width為3x，並讓scrollview的水平偏移量為x，既顯示最中間內容
|
1 2 |
scrollView.contentSize = CGSizeMake(3x, y); scrollView.contentOffset = CGPointMake(x, 0); |
將imageView新增到scrollview內容檢視的中間位置
接下來使用代理方法scrollViewDidScroll來監聽scrollview的滾動，定義一個列舉變數來記錄滾動的方向
|
1 2 3 4 5 6 7 8 9 10 11 |
typedef enum{ DirecNone, DirecLeft, DirecRight } Direction; @property (nonatomic, assign) Direction direction; - (void)scrollViewDidScroll:(UIScrollView *)scrollView { self.direction = scrollView.contentOffset.x >x? DirecLeft : DirecRight; } |
使用KVO來監聽direction屬性值的改變
|
1 |
[self addObserver:self forKeyPath:@"direction" options:NSKeyValueObservingOptionNew context:nil]; |
判斷滾動的方向，當偏移量大於x，表示左移，則將otherImageView加在右邊，偏移量小於x，表示右移，則將otherImageView加在左邊
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context { //self.currIndex表示當前顯示圖片的索引，self.nextIndex表示將要顯示圖片的索引 //_images為圖片陣列 if(change[NSKeyValueChangeNewKey] == change[NSKeyValueChangeOldKey]) return; if ([change[NSKeyValueChangeNewKey] intValue] == DirecRight) { self.otherImageView.frame = CGRectMake(0, 0, self.width, self.height); self.nextIndex = self.currIndex - 1; if (self.nextIndex < 0) self.nextIndex = _images.count – 1; } else if ([change[NSKeyValueChangeNewKey] intValue] == DirecLeft){ self.otherImageView.frame = CGRectMake(CGRectGetMaxX(_currImageView.frame), 0, self.width, self.height); self.nextIndex = (self.currIndex + 1) % _images.count; } self.otherImageView.image = self.images[self.nextIndex]; } |
通過代理方法scrollViewDidEndDecelerating來監聽滾動結束，結束後，會變成以下兩種情況
此時，scrollview的偏移量為0或者2x，我們通過程式碼再次將scrollview的偏移量設定為x，並將currImageView的圖片修改為otherImageView的圖片
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { [self pauseScroll]; } - (void)pauseScroll { self.direction = DirecNone;//清空滾動方向 //判斷最終是滾到了右邊還是左邊 int index = self.scrollView.contentOffset.x / x; if (index == 1) return; //等於1表示最後沒有滾動，返回不做任何操作 self.currIndex = self.nextIndex;//當前圖片索引改變 self.pageControl.currentPage = self.currIndex; self.currImageView.frame = CGRectMake(x, 0, x, y); self.currImageView.image = self.otherImageView.image; self.scrollView.contentOffset = CGPointMake(x, 0); } |
那麼我們看到的還是currImageView，只不過展示的是下一張圖片，如圖，又變成了最初的效果
自動滾動
輪播的功能實現了，接下來新增定時器讓它自動滾動，相當簡單
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
- (void)startTimer { //如果只有一張圖片，則直接返回，不開啟定時器 if (_images.count <= 1) return; //如果定時器已開啟，先停止再重新開啟 if (self.timer) [self stopTimer]; self.timer = [NSTimer timerWithTimeInterval:self.time target:self selector:@selector(nextPage) userInfo:nil repeats:YES]; [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes]; } - (void)nextPage { //動畫改變scrollview的偏移量就可以實現自動滾動 [self.scrollView setContentOffset:CGPointMake(self.width * 2, 0) animated:YES]; } |
注意
setContentOffset:animated:方法執行完畢後不會呼叫scrollview的scrollViewDidEndDecelerating方法，但是會呼叫scrollViewDidEndScrollingAnimation方法，因此我們要在該方法中呼叫pauseScroll
|
1 2 3 |
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView { [self pauseScroll]; } |
拖拽時停止自動滾動
當我們手動拖拽圖片時，需要停止自動滾動，此時我們只需要讓定時器失效就行了，當停止拖拽時，重新啟動定時器
|
1 2 3 4 5 6 7 |
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { [self.timer invalidate]; } - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{ [self startTimer]; } |
載入圖片
實際開發中，我們很少會輪播本地圖片，大部分都是伺服器獲取的，也有可能既有本地圖片，也有網路圖片，那要如何來載入呢？
定義4個屬性
NSArray imageArray：暴露在.h檔案中，外界將要載入的圖片或路徑陣列賦值給該屬性
NSMutableArray images：用來存放圖片的陣列
NSMutableDictionary imageDic：用來快取圖片的字典，key為URL
NSMutableDictionary operationDic：用來儲存下載操作的字典，key為URL
判斷外界傳入的是圖片還是路徑，如果是圖片，直接加入圖片陣列中，如果是路徑，先新增一個佔點陣圖片，然後根據路徑去下載圖片
|
1 2 3 4 5 6 7 8 9 |
_images = [NSMutableArray array]; for (int i = 0; i < imageArray.count; i++) { if ([imageArray[i] isKindOfClass:[UIImage class]]) { [_images addObject:imageArray[i]];//如果是圖片，直接新增到images中 } else if ([imageArray[i] isKindOfClass:[NSString class]]){ [_images addObject:[UIImage imageNamed:@"placeholder"]];//如果是路徑，新增一個佔點陣圖片到images中 [self downloadImages:i]; //下載網路圖片 } } |
下載圖片，先從快取中取，如果有，則替換之前的佔點陣圖片，如果沒有，去沙盒中取，如果有，替換佔點陣圖片，並新增到快取中，如果沒有，開啟非同步執行緒下載
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
- (void)downloadImages:(int)index { NSString *key = _imageArray[index]; //從字典快取中取圖片 UIImage *image = [self.imageDic objectForKey:key]; if (image) { _images[index] = image;//如果圖片存在，則直接替換之前的佔點陣圖片 }else{ //字典中沒有從沙盒中取圖片 NSString *cache = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject]; NSString *path = [cache stringByAppendingPathComponent:[key lastPathComponent]]; NSData *data = [NSData dataWithContentsOfFile:path]; if (data) { //沙盒中有，替換佔點陣圖片，並加入字典快取中 image = [UIImage imageWithData:data]; _images[index] = image; [self.imageDic setObject:image forKey:key]; }else{ //字典沙盒都沒有，下載圖片 NSBlockOperation *download = [self.operationDic objectForKey:key];//檢視下載操作是否存在 if (!download) {//不存在 //建立一個佇列，預設為併發佇列 NSOperationQueue *queue = [[NSOperationQueue alloc] init]; //建立一個下載操作 download = [NSBlockOperation blockOperationWithBlock:^{ NSURL *url = [NSURL URLWithString:key]; NSData *data = [NSData dataWithContentsOfURL:url]; if (data) { //下載完成後，替換佔點陣圖片，存入字典並寫入沙盒，將下載操作從字典中移除掉 UIImage *image = [UIImage imageWithData:data]; [self.imageDic setObject:image forKey:key]; self.images[index] = image; //如果只有一張圖片，需要在主執行緒主動去修改currImageView的值 if (_images.count == 1) [_currImageView performSelectorOnMainThread:@selector(setImage:) withObject:image waitUntilDone:NO]; [data writeToFile:path atomically:YES]; [self.operationDic removeObjectForKey:key]; } }]; [queue addOperation:download]; [self.operationDic setObject:download forKey:key];//將下載操作加入字典 } } } } |
監聽圖片點選
當圖片被點選的時候，我們往往需要執行某些操作，因此需要監聽圖片的點選，思路如下
1.定義一個block屬性暴露給外界void(^imageClickBlock)(NSInteger index)
（不會block的可以用代理，或者看這裡）
2.設定currImageView的userInteractionEnabled為YES
3.給currImageView新增一個點選的手勢
4.在手勢方法裡呼叫block，並傳入圖片索引
結束語
上面是筆者的主要思路以及部分程式碼，需要原始碼的請前往筆者的github下載，https://github.com/codingZero/XRCarouselView，記得獻上你的星星哦