ScrollView实现自动循环滚动(IOS系统)
上传者:任楠|上传时间:2016-10-14|密次下载
ScrollView实现自动循环滚动(IOS系统)
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
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
下载文档
热门试卷
- 2016年四川省内江市中考化学试卷
- 广西钦州市高新区2017届高三11月月考政治试卷
- 浙江省湖州市2016-2017学年高一上学期期中考试政治试卷
- 浙江省湖州市2016-2017学年高二上学期期中考试政治试卷
- 辽宁省铁岭市协作体2017届高三上学期第三次联考政治试卷
- 广西钦州市钦州港区2016-2017学年高二11月月考政治试卷
- 广西钦州市钦州港区2017届高三11月月考政治试卷
- 广西钦州市钦州港区2016-2017学年高一11月月考政治试卷
- 广西钦州市高新区2016-2017学年高二11月月考政治试卷
- 广西钦州市高新区2016-2017学年高一11月月考政治试卷
- 山东省滨州市三校2017届第一学期阶段测试初三英语试题
- 四川省成都七中2017届高三一诊模拟考试文科综合试卷
- 2017届普通高等学校招生全国统一考试模拟试题(附答案)
- 重庆市永川中学高2017级上期12月月考语文试题
- 江西宜春三中2017届高三第一学期第二次月考文科综合试题
- 内蒙古赤峰二中2017届高三上学期第三次月考英语试题
- 2017年六年级(上)数学期末考试卷
- 2017人教版小学英语三年级上期末笔试题
- 江苏省常州西藏民族中学2016-2017学年九年级思想品德第一学期第二次阶段测试试卷
- 重庆市九龙坡区七校2016-2017学年上期八年级素质测查(二)语文学科试题卷
- 江苏省无锡市钱桥中学2016年12月八年级语文阶段性测试卷
- 江苏省无锡市钱桥中学2016-2017学年七年级英语12月阶段检测试卷
- 山东省邹城市第八中学2016-2017学年八年级12月物理第4章试题(无答案)
- 【人教版】河北省2015-2016学年度九年级上期末语文试题卷(附答案)
- 四川省简阳市阳安中学2016年12月高二月考英语试卷
- 四川省成都龙泉中学高三上学期2016年12月月考试题文科综合能力测试
- 安徽省滁州中学2016—2017学年度第一学期12月月考高三英语试卷
- 山东省武城县第二中学2016.12高一年级上学期第二次月考历史试题(必修一第四、五单元)
- 福建省四地六校联考2016-2017学年上学期第三次月考高三化学试卷
- 甘肃省武威第二十三中学2016—2017学年度八年级第一学期12月月考生物试卷
网友关注
- [新版]船舶避碰智能决策主动化研究
- 中国汽车技术研究中心2010年应届毕业生招聘需求
- 食品机械设备安全常识
- 家电行业的市场竞争分析@
- [宝典]家居生活用品——高级家居保热鞋
- 我国造纸质量体系认证工作发展迅速
- 081-电广传媒-员工职业发展手册200309
- 新媒体时代中国传媒社会参和的角色重构——社会公共管理的重要中介
- 国内造纸工业产销形势分析
- 传媒品牌运作研究
- 宿迁市纺织服装业发展情况的调查
- 造纸纤维原料来源的发展趋势
- 毕业论文 家电行业营销方式创新性研究
- _船舶货运_课程实践教学环节的研究与设计
- 四印刷基础常识[资料]
- PCC在造纸中应用的探讨
- 我国酒店餐饮成本控制研究
- “船舶辅机”双语教学的探索与思考
- 110309航海自动化基础第一篇
- 精品传媒集团《世界》风尚小姐大赛商业活动赞助策划方案
- 劳动保护用品配备和管理制度
- [教学]我国展会业的概略
- 航海技术课件
- 台湾海峡两岸直航船舶监督治理暂行办法[精华]
- 试论酒店展会产品的拓展和对策
- 思美传媒2014年半年报
- 家电行业如何应对金融危机的影响
- 造纸用施胶剂AKD系列造纸化学品和氨基酸保护剂A酯A胺保
- 2011-2015年中国印刷行业运行市场发展趋势及投资潜力预测报告
- 20150126-海通证券-纺织服装 行业跟踪报告
网友关注视频
- 北师大版小学数学四年级下册第15课小数乘小数一
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案,安徽省
- 冀教版小学数学二年级下册第二周第2课时《我们的测量》宝丰街小学庞志荣.mp4
- 8 随形想象_第一课时(二等奖)(沪教版二年级上册)_T3786594
- 二年级下册数学第三课 搭一搭⚖⚖
- 化学九年级下册全册同步 人教版 第18集 常见的酸和碱(二)
- 30.3 由不共线三点的坐标确定二次函数_第一课时(市一等奖)(冀教版九年级下册)_T144342
- 3月2日小学二年级数学下册(数一数)
- 沪教版牛津小学英语(深圳用)五年级下册 Unit 1
- 冀教版英语四年级下册第二课
- 二年级下册数学第二课
- 冀教版小学数学二年级下册第二单元《余数和除数的关系》
- 冀教版小学数学二年级下册第二单元《租船问题》
- 二次函数求实际问题中的最值_第一课时(特等奖)(冀教版九年级下册)_T144339
- 第4章 幂函数、指数函数和对数函数(下)_六 指数方程和对数方程_4.7 简单的指数方程_第一课时(沪教版高一下册)_T1566237
- 沪教版牛津小学英语(深圳用) 五年级下册 Unit 10
- 青岛版教材五年级下册第四单元(走进军营——方向与位置)用数对确定位置(一等奖)
- 外研版英语三起5年级下册(14版)Module3 Unit1
- 七年级英语下册 上海牛津版 Unit5
- 苏教版二年级下册数学《认识东、南、西、北》
- 苏科版八年级数学下册7.2《统计图的选用》
- 沪教版牛津小学英语(深圳用) 四年级下册 Unit 4
- 8.练习八_第一课时(特等奖)(苏教版三年级上册)_T142692
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,辽宁省
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案,安徽省
- 冀教版英语三年级下册第二课
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,天津市
- 冀教版小学数学二年级下册第二单元《有余数除法的简单应用》
- 冀教版小学数学二年级下册第二单元《有余数除法的整理与复习》
- 第五单元 民族艺术的瑰宝_15. 多姿多彩的民族服饰_第二课时(市一等奖)(岭南版六年级上册)_T129830
精品推荐
- 2016-2017学年高一语文人教版必修一+模块学业水平检测试题(含答案)
- 广西钦州市高新区2017届高三11月月考政治试卷
- 浙江省湖州市2016-2017学年高一上学期期中考试政治试卷
- 浙江省湖州市2016-2017学年高二上学期期中考试政治试卷
- 辽宁省铁岭市协作体2017届高三上学期第三次联考政治试卷
- 广西钦州市钦州港区2016-2017学年高二11月月考政治试卷
- 广西钦州市钦州港区2017届高三11月月考政治试卷
- 广西钦州市钦州港区2016-2017学年高一11月月考政治试卷
- 广西钦州市高新区2016-2017学年高二11月月考政治试卷
- 广西钦州市高新区2016-2017学年高一11月月考政治试卷
分类导航
- 互联网
- 电脑基础知识
- 计算机软件及应用
- 计算机硬件及网络
- 计算机应用/办公自动化
- .NET
- 数据结构与算法
- Java
- SEO
- C/C++资料
- linux/Unix相关
- 手机开发
- UML理论/建模
- 并行计算/云计算
- 嵌入式开发
- windows相关
- 软件工程
- 管理信息系统
- 开发文档
- 图形图像
- 网络与通信
- 网络信息安全
- 电子支付
- Labview
- matlab
- 网络资源
- Python
- Delphi/Perl
- 评测
- Flash/Flex
- CSS/Script
- 计算机原理
- PHP资料
- 数据挖掘与模式识别
- Web服务
- 数据库
- Visual Basic
- 电子商务
- 服务器
- 搜索引擎优化
- 存储
- 架构
- 行业软件
- 人工智能
- 计算机辅助设计
- 多媒体
- 软件测试
- 计算机硬件与维护
- 网站策划/UE
- 网页设计/UI
- 网吧管理