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:
1 // WHScrollAndPageView.h 2 // 循环滚动视图 3 // 4 // Created by jereh on 15-3-15. 5 // Copyright (c) 2015年 jereh. All rights reserved. 6 // 7 8 #import <uikit uikit.h=""> 9 10 @protocol WHcrollViewViewDelegate; 11 12 @interface WHScrollAndPageView : UIView <uiscrollviewdelegate> 13 { 14 __unsafe_unretained id <whcrollviewviewdelegate> _delegate; 15 } 16 17 @property (nonatomic, assign) id <whcrollviewviewdelegate> delegate; 18 19 @property (nonatomic, assign) NSInteger currentPage; 20 21 @property (nonatomic, strong) NSMutableArray *imageViewAry; 22 23 @property (nonatomic, readonly) UIScrollView *scrollView; 24 25 @property (nonatomic, readonly) UIPageControl *pageControl; 26 27 -(void)shouldAutoShow:(BOOL)shouldStart; 28 29 @end 30 31 @protocol WHcrollViewViewDelegate <nsobject> 32 33 @optional 34 - (void)didClickPage:(WHScrollAndPageView *)view atIndex:(NSInteger)index; 35 36 @end</nsobject></whcrollviewviewdelegate></whcrollviewviewdelegate></uiscrollviewdelegate></uikit>
2、封装Scrollview代码.m:
1 // WHScrollAndPageView.m 2 // 循环滚动视图 3 // 4 // Created by jereh on 15-3-15. 5 // Copyright (c) 2015年 jereh. All rights reserved. 6 // 7 8 #import "WHScrollAndPageView.h" 9 10 @interface WHScrollAndPageView () 11 { 12 UIView *_firstView; 13 UIView *_middleView; 14 UIView *_lastView; 15 16 float _viewWidth; 17 float _viewHeight; 18 19 NSTimer *_autoScrollTimer; 20 21 UITapGestureRecognizer *_tap; 22 } 23 24 @end 25 26 @implementation WHScrollAndPageView 27 28 - (id)initWithFrame:(CGRect)frame 29 { 30 self = [super initWithFrame:frame]; 31 if (self) { 32 33 _viewWidth = self.bounds.size.width; 34 _viewHeight = self.bounds.size.height; 35 36 //设置scrollview 37 _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, _viewWidth, _viewHeight)]; 38 _scrollView.delegate = self; 39 _scrollView.contentSize = CGSizeMake(_viewWidth * 3, _viewHeight); 40 _scrollView.showsHorizontalScrollIndicator = NO; 41 _scrollView.pagingEnabled = YES; 42 _scrollView.backgroundColor = [UIColor blackColor]; 43 _scrollView.delegate = self; 44 [self addSubview:_scrollView]; 45 46 //设置分页 47 _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, _viewHeight-30, _viewWidth, 30)]; 48 _pageControl.userInteractionEnabled = NO; 49 _pageControl.currentPageIndicatorTintColor = [UIColor redColor]; 50 _pageControl.pageIndicatorTintColor = [UIColor whiteColor]; 51 [self addSubview:_pageControl]; 52 53 //设置单击手势 54 _tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)]; 55 _tap.numberOfTapsRequired = 1; 56 _tap.numberOfTouchesRequired = 1; 57 [_scrollView addGestureRecognizer:_tap]; 58 } 59 return self; 60 } 61 62 #pragma mark 单击手势 63 -(void)handleTap:(UITapGestureRecognizer*)sender 64 { 65 if ([_delegate respondsToSelector:@selector(didClickPage:atIndex:)]) { 66 [_delegate didClickPage:self atIndex:_currentPage+1]; 67 } 68 } 69 70 #pragma mark 设置imageViewAry 71 -(void)setImageViewAry:(NSMutableArray *)imageViewAry 72 { 73 if (imageViewAry) { 74 _imageViewAry = imageViewAry; 75 _currentPage = 0; //默认为第0页 76 77 _pageControl.numberOfPages = _imageViewAry.count; 78 } 79 80 [self reloadData]; 81 } 82 83 #pragma mark 刷新view页面 84 -(void)reloadData 85 { 86 [_firstView removeFromSuperview]; 87 [_middleView removeFromSuperview]; 88 [_lastView removeFromSuperview]; 89 90 //从数组中取到对应的图片view加到已定义的三个view中 91 if (_currentPage==0) { 92 _firstView = [_imageViewAry lastObject]; 93 _middleView = [_imageViewAry objectAtIndex:_currentPage]; 94 _lastView = [_imageViewAry objectAtIndex:_currentPage+1]; 95 } 96 else if (_currentPage == _imageViewAry.count-1) 97 { 98 _firstView = [_imageViewAry objectAtIndex:_currentPage-1]; 99 _middleView = [_imageViewAry objectAtIndex:_currentPage]; 100 _lastView = [_imageViewAry firstObject]; 101 } 102 else 103 { 104 _firstView = [_imageViewAry objectAtIndex:_currentPage-1]; 105 _middleView = [_imageViewAry objectAtIndex:_currentPage]; 106 _lastView = [_imageViewAry objectAtIndex:_currentPage+1]; 107 } 108 109 //设置三个view的frame,加到scrollview上 110 _firstView.frame = CGRectMake(0, 0, _viewWidth, _viewHeight); 111 _middleView.frame = CGRectMake(_viewWidth, 0, _viewWidth, _viewHeight); 112 _lastView.frame = CGRectMake(_viewWidth*2, 0, _viewWidth, _viewHeight); 113 [_scrollView addSubview:_firstView]; 114 [_scrollView addSubview:_middleView]; 115 [_scrollView addSubview:_lastView]; 116 117 //设置当前的分页 118 _pageControl.currentPage = _currentPage; 119 120 //显示中间页 121 _scrollView.contentOffset = CGPointMake(_viewWidth, 0); 122 } 123 124 #pragma mark scrollvie停止滑动 125 -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView 126 { 127 //手动滑动时候暂停自动替换 128 [_autoScrollTimer invalidate]; 129 _autoScrollTimer = nil; 130 _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES]; 131 132 //得到当前页数 133 float x = _scrollView.contentOffset.x; 134 135 //往前翻 136 if (x<=0) { 137 if (_currentPage-1<0) { 138 _currentPage = _imageViewAry.count-1; 139 }else{ 140 _currentPage --; 141 } 142 } 143 144 //往后翻 145 if (x>=_viewWidth*2) { 146 if (_currentPage==_imageViewAry.count-1) { 147 _currentPage = 0; 148 }else{ 149 _currentPage ++; 150 } 151 } 152 153 [self reloadData]; 154 } 155 156 #pragma mark 自动滚动 157 -(void)shouldAutoShow:(BOOL)shouldStart 158 { 159 if (shouldStart) //开启自动翻页 160 { 161 if (!_autoScrollTimer) { 162 _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES]; 163 } 164 } 165 else //关闭自动翻页 166 { 167 if (_autoScrollTimer.isValid) { 168 [_autoScrollTimer invalidate]; 169 _autoScrollTimer = nil; 170 } 171 } 172 } 173 174 #pragma mark 展示下一页 175 -(void)autoShowNextImage 176 { 177 if (_currentPage == _imageViewAry.count-1) { 178 _currentPage = 0; 179 }else{ 180 _currentPage ++; 181 } 182 183 [self reloadData]; 184 } 185 186 @end
3、使用封装好的Scrollview代码.m:
1 // ViewController.m 2 // 循环滚动视图 3 // 4 // Created by jereh on 15-3-15. 5 // Copyright (c) 2015年 jereh. All rights reserved. 6 // 7 8 #import "ViewController.h" 9 #import "WHScrollAndPageView.h" 10 #define NUM 10 11 12 @interface ViewController ()<whcrollviewviewdelegate> 13 { 14 WHScrollAndPageView *_whView; 15 } 16 17 @end 18 19 @implementation ViewController 20 21 - (void)viewDidLoad 22 { 23 [super viewDidLoad]; 24 25 //创建view (view中包含UIScrollView、UIPageControl,设置frame) 26 _whView = [[WHScrollAndPageView alloc] initWithFrame:CGRectMake(0, 44, 320, 400)]; 27 28 //把N张图片放到imageview上 29 NSMutableArray *tempAry = [NSMutableArray array]; 30 for (int i=1; 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>