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

  常常有園友會問"博主,有沒有圖片無限滾動的Demo呀?", 正兒八經的圖片滾動的Demo我這兒還真沒有,今天呢就封裝一個能夠在項目中直接使用的圖片輪播。沒看過其餘iOS圖片無限輪播的代碼,也不瞭解他們的原理,我今天封裝這個圖片無限輪播是借鑑Web前端中的作法,由於以前寫Web前端的時候,實現幻燈片就是這麼作的,今天就在iPhone上搞搞。下面的東西是本身寫的了,關於輪播的東西這個開源項目也是至關不錯的https://github.com/nicklockwood/iCarousel ,感興趣的能夠看一下。那是至關的強大,雖然不必重複造輪子可是原理仍是有必要理解的。今天的博客就介紹圖片輪播的一種解決方案,下篇博客中在介紹另外一種圖片輪播的解決方案。
前端

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

    1.運行效果github

    下面的GIF呢就是Demo的運行效果,必定間隔後,圖片會自動切換,固然也支持手指滑動。切換到相應圖片時,點擊圖片,會經過Block回調的方式給出該圖片的Index, 在Demo中使用提示框給出Index, 固然在項目中拿到Index你能夠作不少事情的,Index就是圖片的Tag值,也就是標記着你點擊的是那張圖片。下圖中是三張圖片進行輪播。數組

  2.原理函數

  下面是實現圖片無限輪播的原理圖(借鑑Web前端幻燈片的寫法,歡迎你們提出好的解決方案),原理用一句話歸納:若是顯示3張圖片的話,就往ScrollView上貼4張圖順序是3-1-2-3。首次顯示1的位置,而後滑動,等滑動到最後一個3時,無動畫切換到第一個3的位置,而後在滾動。原理圖以下,就能夠按着下面的原理圖來佈局和實例化控件了。oop

  3.組件調用方式佈局

    下面這段代碼是組件的初始化和屬性的設置,分爲以下幾部:動畫

      (1):肯定組件的位置atom

      (2):生成圖片名字數組spa

      (3):經過便利構造器初始化控件,並傳入imageName數組

      (4):設置屬性(可選), scrollInterval-圖片切換間隔,animationInterVale-圖片運動時間

      (5):addTapEventForImageWithBlock:圖片點擊後的回調

 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 }

 

  2、核心代碼介紹

    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         //添加ImageView
28         [self addImageviewsForMainScrollWithImages:images];
29         
30         //添加timer
31         [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 : UIView
15 
16 
17 //切換圖片的時間間隔,可選,默認爲3s
18 @property (nonatomic, assign) CGFloat scrollInterval;
19 
20 //切換圖片時,運動時間間隔,可選,默認爲0.7s
21 @property (nonatomic, assign) CGFloat animationInterVale;
22 
23 /**********************************
24  *功能:便利構造器
25  *參數:滾動視圖的Frame, 要顯示圖片的數組
26  *返回值:該類的對象
27  **********************************/
28 + (instancetype) zlImageViewDisplayViewWithFrame: (CGRect) frame
29                                       WithImages: (NSArray *) images;
30 
31 /**********************************
32  *功能:便利初始化函數
33  *參數:滾動視圖的Frame, 要顯示圖片的數組
34  *返回值:該類的對象
35  **********************************/
36 - (instancetype)initWithFrame: (CGRect)frame
37                    WithImages: (NSArray *) images;
38 
39 
40 
41 /**********************************
42  *功能:爲每一個圖片添加點擊時間
43  *參數:點擊按鈕要執行的Block
44  *返回值:無
45  **********************************/
46 - (void) addTapEventForImageWithBlock: (TapImageViewButtonBlock) block;
47 
48 @end

 

  

  三.組件和Demo分享

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

    https://github.com/lizelu/ZLImageViewDisplay 

 

  上面的Demo是圖片輪播的解決方案之一,下篇博客會使用兩個ImageView複用的形式來實現圖片的無限輪播的解決方案。Demo寫的比較着急,不免會有紕漏的地方,望你們批評指正。

相關文章
相關標籤/搜索