IOS實現自動迴圈滾動廣告--ScrollView的最佳化和封裝

IOS實現自動迴圈滾動廣告--ScrollView的最佳化和封裝

一、問題分析

　　在許多App中，我們都會見到迴圈滾動的視圖，比如廣告，其實想實現這個功能並不難，用ScrollView就可以輕鬆完成，但是在製作的過程中還存在幾個小問題，如果能夠正確的處理好這些小問題，無論從效果還是效能上都會得到最佳化。

問題一

　　第一個問題是如何用ScrollView來展示N個視圖。想要實現這個效果，可以把N個視圖依次按順序添加到ScrollView上，然後把 ScrollView的contentSize設定為N個視圖的尺寸，通過滑動ScrollView來查看加在上面的視圖。

問題二

　　第二個問題是如何完成圖片的迴圈滾動，也就是展示完最後一張之後會接著展示第一張，形成圖片的迴圈展示。想要實現這個效果，首先需要讓ScrollView實現自動分頁，這樣可以保證滑動結束展示的是完整的視圖；其次，需要根據當前展示的頁數來設定ScrollView的contentOffset。

　　對於第一個問題的解決是用的最簡單的方式，但實際上忽略了一個很重要的問題，那就是如果要展示的視圖數量N非常大的時候，我們該如何做呢？假設通過ScrollView來展示的每個視圖的寬度恰好是螢幕的寬度，那麼在展示的時候，其實能夠呈現在我們眼前的最多隻有兩個視圖，也就是要麼是完整的一個視圖，要麼是兩個不完整的視圖。因此，我們只需要有三個視圖，就能夠完成迴圈的展示。

問題三

　　第三個問題是在迴圈滾動的過程中，希望知道當前的頁數，這個頁數可以通過contentOffset.x來計算，通常會用UIPageControl來表示。此外，當點擊某一個視圖的時候，要能夠知道當前點擊的視圖是哪一個。

問題四

　　第四個問題是自動展示下一頁的功能，這個需要寫好跳到下一頁的方法，然後通過NSTimer定時器來完成。

　　除了上面的幾個問題，大家也可以為其添加更多的功能。那麼對於ScrollView自動翻頁這樣通用的功能，最好的方式是將其封裝起來，這樣可以大大的提高效率。下面的代碼是把UIScrollView、UIPageControl封裝到了一個UIView中，而其中的ScrollView用來迴圈展示多張圖片。

二、功能實現

1、封裝Scrollview代碼.h：

//  WHScrollAndPageView.h//  迴圈滾動視圖////  Created by jereh on 15-3-15.//  Copyright (c) 2015年 jereh. All rights reserved.//#import @protocol WHcrollViewViewDelegate;@interface WHScrollAndPageView : UIView {    __unsafe_unretained id  _delegate;}@property (nonatomic, assign) id  delegate;@property (nonatomic, assign) NSInteger currentPage;@property (nonatomic, strong) NSMutableArray *imageViewAry;@property (nonatomic, readonly) UIScrollView *scrollView;@property (nonatomic, readonly) UIPageControl *pageControl;-(void)shouldAutoShow:(BOOL)shouldStart;@end@protocol WHcrollViewViewDelegate @optional- (void)didClickPage:(WHScrollAndPageView *)view atIndex:(NSInteger)index;@end

2、封裝Scrollview代碼.m:

//  WHScrollAndPageView.m//  迴圈滾動視圖////  Created by jereh on 15-3-15.//  Copyright (c) 2015年 jereh. All rights reserved.//#import "WHScrollAndPageView.h"@interface WHScrollAndPageView (){    UIView *_firstView;    UIView *_middleView;    UIView *_lastView;        float _viewWidth;    float _viewHeight;        NSTimer *_autoScrollTimer;        UITapGestureRecognizer *_tap;}@end@implementation WHScrollAndPageView- (id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {            _viewWidth = self.bounds.size.width;        _viewHeight = self.bounds.size.height;                //設定scrollview        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, _viewWidth, _viewHeight)];        _scrollView.delegate = self;        _scrollView.contentSize = CGSizeMake(_viewWidth * 3, _viewHeight);        _scrollView.showsHorizontalScrollIndicator = NO;        _scrollView.pagingEnabled = YES;        _scrollView.backgroundColor = [UIColor blackColor];        _scrollView.delegate = self;        [self addSubview:_scrollView];                //設定分頁        _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, _viewHeight-30, _viewWidth, 30)];        _pageControl.userInteractionEnabled = NO;        _pageControl.currentPageIndicatorTintColor = [UIColor redColor];        _pageControl.pageIndicatorTintColor = [UIColor whiteColor];        [self addSubview:_pageControl];                //設定單擊手勢        _tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];        _tap.numberOfTapsRequired = 1;        _tap.numberOfTouchesRequired = 1;        [_scrollView addGestureRecognizer:_tap];    }    return self;}#pragma mark 單擊手勢-(void)handleTap:(UITapGestureRecognizer*)sender{    if ([_delegate respondsToSelector:@selector(didClickPage:atIndex:)]) {        [_delegate didClickPage:self atIndex:_currentPage+1];    }}#pragma mark 設定imageViewAry-(void)setImageViewAry:(NSMutableArray *)imageViewAry{    if (imageViewAry) {        _imageViewAry = imageViewAry;        _currentPage = 0; //預設為第0頁                _pageControl.numberOfPages = _imageViewAry.count;    }        [self reloadData];}#pragma mark 重新整理view頁面-(void)reloadData{    [_firstView removeFromSuperview];    [_middleView removeFromSuperview];    [_lastView removeFromSuperview];        //從數組中取到對應的圖片view加到已定義的三個view中    if (_currentPage==0) {        _firstView = [_imageViewAry lastObject];        _middleView = [_imageViewAry objectAtIndex:_currentPage];        _lastView = [_imageViewAry objectAtIndex:_currentPage+1];    }    else if (_currentPage == _imageViewAry.count-1)    {        _firstView = [_imageViewAry objectAtIndex:_currentPage-1];        _middleView = [_imageViewAry objectAtIndex:_currentPage];        _lastView = [_imageViewAry firstObject];    }    else    {        _firstView = [_imageViewAry objectAtIndex:_currentPage-1];        _middleView = [_imageViewAry objectAtIndex:_currentPage];        _lastView = [_imageViewAry objectAtIndex:_currentPage+1];    }        //設定三個view的frame，加到scrollview上    _firstView.frame = CGRectMake(0, 0, _viewWidth, _viewHeight);    _middleView.frame = CGRectMake(_viewWidth, 0, _viewWidth, _viewHeight);    _lastView.frame = CGRectMake(_viewWidth*2, 0, _viewWidth, _viewHeight);    [_scrollView addSubview:_firstView];    [_scrollView addSubview:_middleView];    [_scrollView addSubview:_lastView];        //設定當前的分頁    _pageControl.currentPage = _currentPage;        //顯示中間頁    _scrollView.contentOffset = CGPointMake(_viewWidth, 0);}#pragma mark scrollvie停止滑動-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{    //手動滑動時候暫停自動替換    [_autoScrollTimer invalidate];    _autoScrollTimer = nil;    _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES];        //得到當前頁數    float x = _scrollView.contentOffset.x;        //往前翻    if (x<=0) {        if (_currentPage-1<0) {            _currentPage = _imageViewAry.count-1;        }else{            _currentPage --;        }    }        //往後翻    if (x>=_viewWidth*2) {        if (_currentPage==_imageViewAry.count-1) {            _currentPage = 0;        }else{            _currentPage ++;        }    }        [self reloadData];}#pragma mark 自動滾動-(void)shouldAutoShow:(BOOL)shouldStart{    if (shouldStart)  //開啟自動翻頁    {        if (!_autoScrollTimer) {            _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES];        }    }    else   //關閉自動翻頁    {        if (_autoScrollTimer.isValid) {            [_autoScrollTimer invalidate];            _autoScrollTimer = nil;        }    }}#pragma mark 展示下一頁-(void)autoShowNextImage{    if (_currentPage == _imageViewAry.count-1) {        _currentPage = 0;    }else{        _currentPage ++;    }        [self reloadData];}@end

3、使用封裝好的Scrollview代碼.m:

//  ViewController.m//  迴圈滾動視圖////  Created by jereh on 15-3-15.//  Copyright (c) 2015年 jereh. All rights reserved.//#import "ViewController.h"#import "WHScrollAndPageView.h"#define NUM 10@interface ViewController (){    WHScrollAndPageView *_whView;}@end@implementation ViewController- (void)viewDidLoad{    [super viewDidLoad];        //建立view （view中包含UIScrollView、UIPageControl，設定frame）    _whView = [[WHScrollAndPageView alloc] initWithFrame:CGRectMake(0, 44, 320, 400)];        //把N張圖片放到imageview上    NSMutableArray *tempAry = [NSMutableArray array];    for (int i=1; i