IOS实现自动循环滚动广告--ScrollView的优化和封装

作者:乐学网
2015-04-20 05:43:02
0

一、问题分析

在许多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
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 ()<WHcrollViewViewDelegate>
{
  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<NUM; i++) {
    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"image%i.jpg",i]];
    [tempAry addObject:imageView];
  }
  //把imageView数组存到whView里
  [_whView setImageViewAry:tempAry];
  //把图片展示的view加到当前页面
  [self.view addSubview:_whView];
  //开启自动翻页
  [_whView shouldAutoShow:YES];
  //遵守协议
  _whView.delegate = self;
}
#pragma mark 协议里面方法，点击某一页
-(void)didClickPage:(WHScrollAndPageView *)view atIndex:(NSInteger)index
{
  NSLog(@"点击了第%li页",index);
}
#pragma mark 界面消失的时候，停止自动滚动
-(void)viewDidDisappear:(BOOL)animated
{
  [_whView shouldAutoShow:NO];
}
@end

分类：IOS
标签： IOS开发 ScrollView

0 0

上一篇：开发高性能的MongoDB应用：浅谈MongoDB性能优化下一篇：SQL Prompt v10+破解

IOS实现自动循环滚动广告--ScrollView的优化和封装

相关文章