iOS開發之多圖片無縫滾動組件封裝與使用，ios無縫

iOS開發之多圖片無縫滾動組件封裝與使用，ios無縫

　　經常有園友會問"博主，有沒有圖片無限滾動的Demo呀？"， 正兒八經的圖片滾動的Demo我這兒還真沒有，今天呢就封裝一個可以在項目中直接使用的圖片輪播。沒看過其他iOS圖片無限輪播的代碼，也不瞭解他們的原理，我今天封裝這個圖片無限輪播是借鑒Web前端中的做法，因為之前寫Web前端的時候，實現投影片就是這麼做的，今天就在iPhone上搞搞。下面的東西是自己寫的了，關於輪播的東西這個開源項目也是相當不錯的https://github.com/nicklockwood/iCarousel ,感興趣的可以看一下。那是相當的強大，雖然沒必要重複造輪子但是原理還是有必要理解的。今天的部落格就介紹圖片輪播的一種解決方案，下篇部落格中在介紹另一種圖片輪播的解決方案。

　　一、Demo運行效果、原理及調用方式

　　　　1.運行效果

　　　　下面的GIF呢就是Demo的運行效果，一定間隔後，圖片會自動切換，當然也支援手指滑動。切換到相應圖片時，點擊圖片，會通過Block回調的方式給出該圖片的Index, 在Demo中使用提示框給出Index, 當然在項目中拿到Index你可以做很多事情的，Index就是圖片的Tag值，也就是標記著你點擊的是那張圖片。中是三張圖片進行輪播。

1 -(void) addZLImageViewDisPlayView{ 2 3 //擷取要顯示的位置 4 CGRect screenFrame = [[UIScreen mainScreen] bounds]; 5 6 CGRect frame = CGRectMake(10, 60, screenFrame.size.width - 20, 200); 7 8 NSArray *imageArray = @[@"01.jpg", @"02.jpg", @"03.jpg"]; 9 10 //初始化控制項11 ZLImageViewDisplayView *imageViewDisplay = [ZLImageViewDisplayView zlImageViewDisplayViewWithFrame:frame WithImages:imageArray];12 13 //設定輪播時間14 imageViewDisplay.scrollInterval = 2;15 16 //圖片滾動的時間17 imageViewDisplay.animationInterVale = 0.6;18 19 //把該視圖添加到相應的父視圖上20 [self.view addSubview:imageViewDisplay];21 22 [imageViewDisplay addTapEventForImageWithBlock:^(NSInteger imageIndex) {23 NSString *str = [NSString stringWithFormat:@"我是第%ld張圖片", imageIndex];24 UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"提示" message:str delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];25 [alter show];26 }];27 28 }

 

　　二、核心代碼介紹

　　　　1.組件的便利初始化方法如下，傳入的參數是組件的frame, 和要顯示的圖片名字數組。在便利初始化方法中初始化一些屬性和調用相關初始化方法。初始化內容如下：

 1 #pragma -- mark 遍曆初始化方法 2 - (instancetype)initWithFrame: (CGRect)frame 3                WithImages: (NSArray *) images 4 { 5     self = [super initWithFrame:frame]; 6     if (self) { 7         //擷取滾動視圖的寬度 8         _widthOfView = frame.size.width; 9         10         //擷取滾動視圖的高度11         _heightView = frame.size.height;12         13         _scrollInterval = 3;14         15         _animationInterVale = 0.7;16         17         //當前顯示頁面18         _currentPage = 1;19         20         _imageViewcontentModel = UIViewContentModeScaleAspectFill;21         22         self.clipsToBounds = YES;23         24         //初始化滾動視圖25         [self initMainScrollView];26         27         //添加ImageView28         [self addImageviewsForMainScrollWithImages:images];29         30         //添加timer31         [self addTimerLoop];32         33         [self addPageControl];34         35     }36     return self;37 }

 

　　　　2.便利構造器

　　　　為我們的組件添加上便利構造器，便利構造器當然是類方法了，傳的參數和便利初始化方法一樣，該方法主要就是類的初始化，然後調用便利初始化方法， 並返回類的對象。代碼如下：

#pragma -- 便利構造器+ (instancetype) zlImageViewDisplayViewWithFrame: (CGRect) frame                                      WithImages: (NSArray *) images{    ZLImageViewDisplayView *instance = [[ZLImageViewDisplayView alloc] initWithFrame:frame WithImages:images];    return instance;}

 

　　　　3.初始化ScrollView

　　　　往我們自訂群組件視圖上添加ScrollView, ScrollView的的大小和我們自訂群組件的大小一樣，並且設定相關屬性，設定代理方法，代碼如下：

 1 #pragma -- mark 初始化ScrollView 2 - (void) initMainScrollView{ 3      4     _mainScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, _widthOfView, _heightView)]; 5      6     _mainScrollView.contentSize = CGSizeMake(_widthOfView, _heightView); 7      8     _mainScrollView.pagingEnabled = YES; 9     10     _mainScrollView.showsHorizontalScrollIndicator = NO;11     12     _mainScrollView.showsVerticalScrollIndicator = NO;13     14     _mainScrollView.delegate = self;15     16     [self addSubview:_mainScrollView];17 }

 

　　　　4.添加PageControl

　　　　　　初始化PageControl, 配置相關屬性，並添加到我們的自訂群組件上，代碼如下：

 1 #pragma 添加PageControl 2 - (void) addPageControl{ 3     _imageViewPageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, _heightView - 20, _widthOfView, 20)]; 4      5     _imageViewPageControl.numberOfPages = _imageViewArray.count; 6      7     _imageViewPageControl.currentPage = _currentPage - 1; 8      9     _imageViewPageControl.tintColor = [UIColor blackColor];10     11     [self addSubview:_imageViewPageControl];12 }

 

　　　　5.添加ImageView和Image

　　　　往ScrollView上添加ImageView和Image, 下面這個方法也是核心代碼，我們根據是第幾張圖片來計算圖片的Frame進行布局，每張圖片的大小就是我們組件的大小，根據上面原理的介紹，ScrollView上的第一張圖片和最後一張圖片一樣，你想顯示的第一張圖片放到ScrollView上的第二張，並改變Scollview的Contentoffset顯示ScrollView上的第二張圖片，代碼如下：

 1 #pragma -- mark 給ScrollView添加ImageView 2 -(void) addImageviewsForMainScrollWithImages: (NSArray *) images{ 3     //設定ContentSize 4     _mainScrollView.contentSize = CGSizeMake(_widthOfView * (images.count+1), _heightView); 5      6     _imageViewArray = images; 7      8     for ( int i = 0; i < _imageViewArray.count + 1; i ++) { 9         10         CGRect currentFrame = CGRectMake(_widthOfView * i, 0, _widthOfView, _heightView);11         12         UIImageView *tempImageView = [[UIImageView alloc] initWithFrame:currentFrame];13         14         tempImageView.contentMode = _imageViewcontentModel;15         16         tempImageView.clipsToBounds = YES;17         18         NSString *imageName;19         20         if (i == 0) {21             imageName = [_imageViewArray lastObject];22         } else {23             imageName = _imageViewArray[i - 1];24         }25         26         UIImage *imageTemp = [UIImage imageNamed:imageName];27         [tempImageView setImage:imageTemp];28         29         [_mainScrollView addSubview:tempImageView];30     }31     32     _mainScrollView.contentOffset = CGPointMake(_widthOfView, 0);33     34 }

　　　　

　　　　6.添加定時器

　　　　想讓圖片自己動起來，是少不了定時器的，為我們的組件添加定時器，下面的方法就是初始化定時器方法：

1 - (void) addTimerLoop{2     3     if (_timer == nil) {4         _timer = [NSTimer scheduledTimerWithTimeInterval:_scrollInterval target:self selector:@selector(changeOffset) userInfo:nil repeats:YES];5     }6 }

　　　　

　　　　7.定時器執行的方法

　　　　下面的方法就是定時器執行的方法，當時間到時，自動改變ScrollView的ContentOffset.x的值，有動畫的切換到下一張圖片。如果目前是最後一張圖片則無動畫的切換到ScrollView的第一張圖片，因為第一張圖片和最後一張圖片是一樣的，所以使用者看不到這個無動畫的切換，切換後，圖片有開始從第一個開始滾動，所以就可以無限迴圈的滾動了，下面也是核心代碼：

 1 -(void) changeOffset{ 2      3     _currentPage ++; 4      5     if (_currentPage == _imageViewArray.count + 1) { 6         _currentPage = 1; 7     } 8      9     [UIView animateWithDuration:_animationInterVale animations:^{10         _mainScrollView.contentOffset = CGPointMake(_widthOfView * _currentPage, 0);11     } completion:^(BOOL finished) {12         if (_currentPage == _imageViewArray.count) {13             _mainScrollView.contentOffset = CGPointMake(0, 0);14         }15     }];16     17      _imageViewPageControl.currentPage = _currentPage - 1;18     19 }

 

　　　　8.手動切換

　　　　上面介紹的是使用NSTimer來實現自動切換，那麼如何讓組件支援手動切換呢？ 要支援手動切換就得在我們ScrollView的回調中進行處理了。在使用者手動滑動後的方法中去做我們要做的事情，也就是判斷是不是最後一張圖片，然後在暫停一下定時器即可，對應的回調方法如下：

 1 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{ 2     NSInteger currentPage = scrollView.contentOffset.x / _widthOfView; 3      4     if(currentPage == 0){ 5         _mainScrollView.contentOffset = CGPointMake(_widthOfView * _imageViewArray.count, 0); 6         _imageViewPageControl.currentPage = _imageViewArray.count; 7         _currentPage = _imageViewArray.count; 8     } 9     10     if (_currentPage + 1 == currentPage || currentPage == 1) {11         _currentPage = currentPage;12         13         if (_currentPage == _imageViewArray.count + 1) {14             _currentPage = 1;15         }16         17         if (_currentPage == _imageViewArray.count) {18             _mainScrollView.contentOffset = CGPointMake(0, 0);19         }20         21         _imageViewPageControl.currentPage = _currentPage - 1;22         [self resumeTimer];23         return;24     }25     26     27 }

 

　　　　9.暫停定時器

　　　　手動滑動後要暫停定時器一段時間，因為不暫停話，你手動切換完，有時會立刻切換到下一張圖片，下面是暫停定時器的方法，然後在過一段時間後自動啟用定時器。方法如下

 1 #pragma 暫停定時器 2 -(void)resumeTimer{ 3      4     if (![_timer isValid]) { 5         return ; 6     } 7      8     [_timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:_scrollInterval-_animationInterVale]]; 9     10 }

 

　　　　經過上面的這些程式碼群組件就可以被調用了，你的圖片就可以使用了，最後在給出該組件留出的對外介面：

 1 // 2 //  ZLImageViewDisplayView.h 3 //  ZLImageViewDisplay 4 // 5 //  Created by Mr.LuDashi on 15/8/14. 6 //  Copyright (c) 2015年 ludashi. All rights reserved. 7 // 8  9 #import <UIKit/UIKit.h>10 11 //點擊圖片的Block回調，參數當前圖片的索引，也就是當前頁數12 typedef void(^TapImageViewButtonBlock)(NSInteger imageIndex);13 14 @interface ZLImageViewDisplayView : UIView15 16 17 //切換圖片的時間間隔，可選，預設為3s18 @property (nonatomic, assign) CGFloat scrollInterval;19 20 //切換圖片時，運動時間間隔,可選，預設為0.7s21 @property (nonatomic, assign) CGFloat animationInterVale;22 23 /**********************************24  *功能：便利構造器25  *參數：滾動視圖的Frame, 要顯示圖片的數組26  *傳回值：該類的對象27  **********************************/28 + (instancetype) zlImageViewDisplayViewWithFrame: (CGRect) frame29                                       WithImages: (NSArray *) images;30 31 /**********************************32  *功能：便利初始化函數33  *參數：滾動視圖的Frame, 要顯示圖片的數組34  *傳回值：該類的對象35  **********************************/36 - (instancetype)initWithFrame: (CGRect)frame37                    WithImages: (NSArray *) images;38 39 40 41 /**********************************42  *功能：為每個圖片添加點擊時間43  *參數：點擊按鈕要執行的Block44  *傳回值：無45  **********************************/46 - (void) addTapEventForImageWithBlock: (TapImageViewButtonBlock) block;47 48 @end

 

　　

　　三.組件和Demo分享

　　　　下面給出了Demo和組件在GitHub上的分享地址：

　　　　https://github.com/lizelu/ZLImageViewDisplay 

 

　　上面的Demo是圖片輪播的解決方案之一，下篇部落格會使用兩個ImageView複用的形式來實現圖片的無限輪播的解決方案。Demo寫的比較著急，難免會有紕漏的地方，望大家批評指正。