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 <uikit uikit.h="">

 @protocol WHcrollViewViewDelegate;

 @interface WHScrollAndPageView : UIView <uiscrollviewdelegate>
 {
     __unsafe_unretained id <whcrollviewviewdelegate> _delegate;
 }

 @property (nonatomic, assign) id <whcrollviewviewdelegate> 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 <nsobject>

 @optional
 - (void)didClickPage:(WHScrollAndPageView *)view atIndex:(NSInteger)index;

 @end</nsobject></whcrollviewviewdelegate></whcrollviewviewdelegate></uiscrollviewdelegate></uikit>

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(, , _viewWidth, _viewHeight)];
         _scrollView.delegate = self;
         _scrollView.contentSize = CGSizeMake(_viewWidth * , _viewHeight);
         _scrollView.showsHorizontalScrollIndicator = NO;
         _scrollView.pagingEnabled = YES;
         _scrollView.backgroundColor = [UIColor blackColor];
         _scrollView.delegate = self;
         [self addSubview:_scrollView];

         //设置分页
         _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(, _viewHeight-, _viewWidth, )];
         _pageControl.userInteractionEnabled = NO;
         _pageControl.currentPageIndicatorTintColor = [UIColor redColor];
         _pageControl.pageIndicatorTintColor = [UIColor whiteColor];
         [self addSubview:_pageControl];

         //设置单击手势
         _tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];
         _tap.numberOfTapsRequired = ;
         _tap.numberOfTouchesRequired = ;
         [_scrollView addGestureRecognizer:_tap];
     }
     return self;
 }

 #pragma mark 单击手势
 -(void)handleTap:(UITapGestureRecognizer*)sender
 {
     if ([_delegate respondsToSelector:@selector(didClickPage:atIndex:)]) {
         [_delegate didClickPage:self atIndex:_currentPage+];
     }
 }

 #pragma mark 设置imageViewAry
 -(void)setImageViewAry:(NSMutableArray *)imageViewAry
 {
     if (imageViewAry) {
         _imageViewAry = imageViewAry;
         _currentPage = ; //默认为第0页

         _pageControl.numberOfPages = _imageViewAry.count;
     }

     [self reloadData];
 }

 #pragma mark 刷新view页面
 -(void)reloadData
 {
     [_firstView removeFromSuperview];
     [_middleView removeFromSuperview];
     [_lastView removeFromSuperview];

     //从数组中取到对应的图片view加到已定义的三个view中
     if (_currentPage==) {
         _firstView = [_imageViewAry lastObject];
         _middleView = [_imageViewAry objectAtIndex:_currentPage];
         _lastView = [_imageViewAry objectAtIndex:_currentPage+];
     }
     else if (_currentPage == _imageViewAry.count-)
     {
         _firstView = [_imageViewAry objectAtIndex:_currentPage-];
         _middleView = [_imageViewAry objectAtIndex:_currentPage];
         _lastView = [_imageViewAry firstObject];
     }
     else
     {
         _firstView = [_imageViewAry objectAtIndex:_currentPage-];
         _middleView = [_imageViewAry objectAtIndex:_currentPage];
         _lastView = [_imageViewAry objectAtIndex:_currentPage+];
     }

     //设置三个view的frame，加到scrollview上
     _firstView.frame = CGRectMake(, , _viewWidth, _viewHeight);
     _middleView.frame = CGRectMake(_viewWidth, , _viewWidth, _viewHeight);
     _lastView.frame = CGRectMake(_viewWidth*, , _viewWidth, _viewHeight);
     [_scrollView addSubview:_firstView];
     [_scrollView addSubview:_middleView];
     [_scrollView addSubview:_lastView];

     //设置当前的分页
     _pageControl.currentPage = _currentPage;

     //显示中间页
     _scrollView.contentOffset = CGPointMake(_viewWidth, );
 }

 #pragma mark scrollvie停止滑动
 -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
 {
     //手动滑动时候暂停自动替换
     [_autoScrollTimer invalidate];
     _autoScrollTimer = nil;
     _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval: target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES];

     //得到当前页数
     float x = _scrollView.contentOffset.x;

     //往前翻
     if (x<=) {
         if (_currentPage-<) {
             _currentPage = _imageViewAry.count-;
         }else{
             _currentPage --;
         }
     }

     //往后翻
     if (x>=_viewWidth*) {
         if (_currentPage==_imageViewAry.count-) {
             _currentPage = ;
         }else{
             _currentPage ++;
         }
     }

     [self reloadData];
 }

 #pragma mark 自动滚动
 -(void)shouldAutoShow:(BOOL)shouldStart
 {
     if (shouldStart)  //开启自动翻页
     {
         if (!_autoScrollTimer) {
             _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval: 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-) {
         _currentPage = ;
     }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 ()<whcrollviewviewdelegate>
 {
     WHScrollAndPageView *_whView;
 }

 @end

 @implementation ViewController

 - (void)viewDidLoad
 {
     [super viewDidLoad];

     //创建view （view中包含UIScrollView、UIPageControl，设置frame）
     _whView = [[WHScrollAndPageView alloc] initWithFrame:CGRectMake(, , , )];

     //把N张图片放到imageview上
     NSMutableArray *tempAry = [NSMutableArray array];
     for (int i=; i<num; _whview="" _whview.delegate="self;" animated="" imageview="[[UIImageView" imageview.image="[UIImage" index="" mark="" nsstring="" pragma="" pre="" self.view="" tempary="" uiimageview="" view="" whscrollandpageview=""><p> </p></num;></whcrollviewviewdelegate>