iOS - UIScrollView
前言
NS_CLASS_AVAILABLE_IOS(2_0) @interface UIScrollView : UIView <NSCoding>@available(iOS 2.0, *) public class UIScrollView : UIView, NSCoding
移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限。当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容。普通的 UIView 不具备滚动功能,不适合显示过多的内容,UIScrollView 是一个能够滚动的视图控件,可以用来展示大量的内容,并且可以通过滚动查看所有的内容。
UIScrollView 的用法很简单,将需要展示的内容添加到 UIScrollView 中,设置 UIScrollView 的 contentSize 属性,告诉 UIScrollView 所有内容的尺寸,也就是告诉它滚动的范围。超出 UIScrollView 边框的内容会被自动隐藏,用户可以用过手势拖动来查看超出边框并被隐藏的内容。
UIScrollView 不仅能滚动显示大量内容,还能对其内容进行缩放处理,也就是说,要完成缩放功能的话,只需要将需要缩放的内容添加到 UIScrollView 中。
- 如果 UIScrollView 无法滚动,可能是以下原因:
- 没有设置 contentSize
- scrollEnabled = NO
- 没有接收到触摸事件 userInteractionEnabled = NO
UIScrollView 的各种尺寸
1、UIScrollView 的创建
Objective-C
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(30, 60, [[UIScreen mainScreen] bounds].size.width - 60, 490)];// 将 scrollView 添加到屏幕[self.view addSubview:scrollView];// 向滚动视图中添加显示内容,将 imageView 添加到 scrollView,所有 UIView 子类都可以添加UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"13"]];[scrollView addSubview:imageView];// 设置滚动的范围大小,包含隐藏的部分,contentSize 的大小一般大于 frame 属性设置的可视区的大小scrollView.contentSize = imageView.bounds.size;
Swift
let scrollView:UIScrollView = UIScrollView(frame: CGRectMake(30, 60, UIScreen.mainScreen().bounds.size.width - 60, 490))// 将 scrollView 添加到屏幕self.view.addSubview(scrollView)// 向滚动视图中添加显示内容,将 imageView 添加到 scrollView,所有 UIView 子类都可以添加let imageView:UIImageView = UIImageView(image: UIImage(named: "13"))scrollView.addSubview(imageView)// 设置滚动的范围大小,包含了隐藏的部分,contentSize 的大小一般大于 frame 属性设置的可视区的大小scrollView.contentSize = imageView.bounds.size
Storyboard
- 在 Storyboard 上添加 Scroll View 控件,在 Scroll View 控件上添加其它控件,如 ImageView 控件。
- 在 Storyboard 中设置的 Scroll View 控件背景在程序运行时才能显示出来。
将 Scroll View 控件拖线到 View Controller 代码中,设置 contentSize 的大小。
@interface ViewController ()@property (nonatomic, weak) IBOutlet UIScrollView *scrollView;@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];// 设置滚动的范围大小self.scrollView.contentSize = CGSizeMake(364, 364);}@end
运行显示效果
- 在 Storyboard 上添加 Scroll View 控件,在 Scroll View 控件上添加其它控件,如 ImageView 控件。
2、UIScrollView 的设置
Objective-C
// 设置滚动条的风格/*UIScrollViewIndicatorStyleDefault, // 灰色样式,默认UIScrollViewIndicatorStyleBlack, // 黑色样式UIScrollViewIndicatorStyleWhite // 白色样式*/scrollView.indicatorStyle = UIScrollViewIndicatorStyleDefault;// 设置是否显示滚动条scrollView.showsHorizontalScrollIndicator = YES; // 水平方向scrollView.showsVerticalScrollIndicator = YES; // 垂直方向// 设置滚动的范围大小/*告诉 UIScrollView 所有内容的尺寸,也就是告诉它滚动的范围内容的大小包含了隐藏的部分,contentSize 的大小一般大于 frame 属性设置的可视区的大小某个值等于 0 时,则 UIScrollView 在此方向上不能滚动,如 CGSizeMake(0, 364),在 x 方向上不能滚动*/scrollView.contentSize = CGSizeMake(364, 364);// 设置四周额外的滚动区域/*在 UIScrollView 的 4 周增加额外的滚动区域一般用来避免 scrollView 的内容被其他控件挡住UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)*/scrollView.contentInset = UIEdgeInsetsMake(64, 20, 30, 10);// 设置偏移量/*用来表示 UIScrollView 滚动的位置其实就是内容左上角与 scrollView 左上角的间距值CGPointZero 相当于 CGPointMake(0, 0)*/scrollView.contentOffset = CGPointMake(100, 200);[scrollView setContentOffset:CGPointZero animated:YES];// 获取偏移量CGPoint contentOffset = scrollView.contentOffset;// 获取子视图/*水平和垂直滚动条也是 scrollView 的子视图*/NSArray *subviews = scrollView.subviews;// 获取显示内容的高度/*CGRectGetMaxY(CGRect rect) 自动计算最大 Y 坐标值注意 水平和垂直滚动条也是 scrollView 的子视图,会产生计算错误*/// 由最后一个控件计算CGFloat contentH = lastView.frame.origin.y + lastView.frame.size.height;// 使用系统方法计算CGFloat contentH = CGRectGetMaxY(lastView.frame);// 设置点击状态栏能否滚动到画面最顶端/*也可以在协议方法中设置*/scrollView.scrollsToTop = YES;// 设置是否允许手动滚动scrollView.scrollEnabled = YES;// 设置是否整页移动scrollView.pagingEnabled = NO;// 设置是否开启弹簧效果scrollView.bounces = YES;// 关闭下沉效果/* 如果 viewController 在导航里,这个 viewController 的第一个子视图是 ScrollView 或其子类,系统会让 ScrollView 有个下沉的效果,有时这个效果会跟自己的代码冲突,通常会把它关掉*/// 判断是否实现了下沉效果if ([self respondsToSelector:@selector(setAutomaticallyAdjustsScrollViewInsets:)]) {// 关闭下沉效果self.automaticallyAdjustsScrollViewInsets = NO;}// 设置缩放倍数/*需要遵守 <UIScrollViewDelegate> 协议,并实现 viewForZoomingInScrollView 协议方法如果是在模拟器中测试,需要按住 option 键再拖动内容*/scrollView.maximumZoomScale = 3; // 放大倍数, scrollView.minimumZoomScale = 0.1; // 缩小倍数// 获取当前缩放倍数CGFloat zoomScale = scrollView.zoomScale;// 设置代理,需要遵守协议 <UIScrollViewDelegate>scrollView.delegate = self;
Swift
// 设置滚动条的风格/*case Default // 灰色样式,默认case Black // 黑色样式case White // 白色样式*/scrollView.indicatorStyle = .Default// 设置是否显示滚动条scrollView.showsHorizontalScrollIndicator = true // 水平方向scrollView.showsVerticalScrollIndicator = true // 垂直方向// 设置滚动的范围大小/*告诉 UIScrollView 所有内容的尺寸,也就是告诉它滚动的范围内容的大小包含了隐藏的部分,contentSize 的大小一般大于 frame 属性设置的可视区的大小某个值等于 0 时,则 UIScrollView 在此方向上不能滚动,如 CGSizeMake(0, 364),在 x 方向上不能滚动*/scrollView.contentSize = CGSizeMake(364, 364)// 设置四周额外的滚动区域/*在 UIScrollView 的 4 周增加额外的滚动区域一般用来避免 scrollView 的内容被其他控件挡住UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)*/scrollView.contentInset = UIEdgeInsetsMake(64, 20, 30, 10)// 设置偏移量/*用来表示 UIScrollView 滚动的位置其实就是内容左上角与 scrollView 左上角的间距值CGPointZero 相当于 CGPointMake(0, 0)*/scrollView.contentOffset = CGPointMake(100, 200)scrollView.setContentOffset(CGPointZero, animated: true)// 获取偏移量let contentOffset:CGPoint = scrollView.contentOffset// 获取子视图/*水平和垂直滚动条也是 scrollView 的子视图*/let subviews:Array = scrollView.subviews// 获取显示内容的高度/*CGRectGetMaxY(CGRect rect) 自动计算最大 Y 坐标值注意 水平和垂直滚动条也是 scrollView 的子视图,会产生计算错误*/// 由最后一个控件计算let contentH = lastView.frame.origin.y + lastView.frame.size.height// 使用系统方法计算let contentH = CGRectGetMaxY(lastView.frame)// 设置点击状态栏能否滚动到画面最顶端/*也可以在协议方法中设置*/scrollView.scrollsToTop = true// 设置是否允许手动滚动scrollView.scrollEnabled = true// 设置是否整页移动scrollView.pagingEnabled = false// 设置是否开启弹簧效果scrollView.bounces = true// 关闭下沉效果/* 如果 viewController 在导航里,这个 viewController 的第一个子视图是 ScrollView 或其子类,系统会让 ScrollView 有个下沉的效果,有时这个效果会跟自己的代码冲突,通常会把它关掉*/// 判断是否实现了下沉效果if self.respondsToSelector(Selector("setAutomaticallyAdjustsScrollViewInsets:")) {// 关闭下沉效果self.automaticallyAdjustsScrollViewInsets = true}// 设置缩放倍数/*需要遵守 UIScrollViewDelegate 协议,并实现 viewForZoomingInScrollView 协议方法如果是在模拟器中测试,需要按住 option 键再拖动内容*/scrollView.maximumZoomScale = 3 // 放大倍数scrollView.minimumZoomScale = 0.1 // 缩小倍数// 获取当前缩放倍数let zoomScale:CGFloat = scrollView.zoomScale// 设置代理,需要遵守协议 UIScrollViewDelegatescrollView.delegate = self
3、向 scrollView 添加图片集
3.1 添加少量图片
每次添加一张图片的时候都会创建一个 UIImageView 对象,如果添加的图片过多或图片太大会占用大量的内存。
Objective-C
#define WIDTH [UIScreen mainScreen].bounds.size.width#define HEIGHT [UIScreen mainScreen].bounds.size.height// 设置 scrollView 的尺寸CGFloat w = WIDTH - 20;CGFloat h = HEIGHT - 40;// 设置图片数量int count = 5;UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 30, w, h)];scrollView.pagingEnabled = YES;[self.view addSubview:scrollView];// 设置 contentSize,水平方向能滚动scrollView.contentSize = CGSizeMake(count * w, 0);// 添加少量图片for (int i = 0; i < count; i++) {UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i * w, 0, w, h)];imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg", i]];// 将 imageView 添加到 scrollView 上[scrollView addSubview:imageView];}
Swift
let WIDTH = UIScreen.mainScreen().bounds.size.widthlet HEIGHT = UIScreen.mainScreen().bounds.size.height// 设置 scrollView 的尺寸let w = WIDTH - 20let h = HEIGHT - 40// 设置图片数量let count:Int = 5let scrollView:UIScrollView = UIScrollView(frame: CGRectMake(10, 30, w, h))scrollView.pagingEnabled = trueself.view.addSubview(scrollView)// 设置 contentSize,水平方向能滚动scrollView.contentSize = CGSizeMake(count * w, 0)// 添加少量图片for i in 0 ..< count {let imageView:UIImageView = UIImageView(frame: CGRectMake(CGFloat(i) * w, 0, w, h))imageView.image = UIImage(named: String(format: "%d.jpg", i))// 将 imageView 添加到 scrollView 上scrollView.addSubview(imageView)}
3.2 添加大量图片
只创建 3 个 UIImageView 对象,向 scrollView 添加图片时复用这 3 个 UIImageView 对象。
Objective-C
4、UIScrollView 的协议方法
需遵守协议 UIScrollViewDelegate,并设置代理
设置代理方法:
通过代码
// self 就是控制器self.scrollView.delegate = self;
通过 storyboard 拖线
Objective-C
拖拽
// 将要开始拖拽- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {}// 将要结束拖拽- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {}// 已经结束拖拽,decelerate 松手后 是否有惯性滚动 0:没有,1:有- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {}
滚动
// 滚动过程中,只要滚动就会触发- (void)scrollViewDidScroll:(UIScrollView *)scrollView { }// 已经结束滚动,滚动动画停止时执行,代码改变时触发,也就是 setContentOffset 改变时- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {}
惯性滚动
// 将要开始惯性滚动- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView {}// 已经结束惯性滚动- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {}
滚到顶端
// 设置点击状态栏时是否滚到顶端- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView {return YES;}// 已经滚到顶端,点击状态栏时调用- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView {}
缩放
// 设置被缩放的空间,一个 scrollView 中只能有一个子控件被缩放,如果有很多个子控件缩放时会引起错乱- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {return [scrollView.subviews[0] viewWithTag:100];}// 将要开始缩放- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view {}// 已经结束缩放- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale {}// 缩放过程中,只要缩放就会触发- (void)scrollViewDidZoom:(UIScrollView *)scrollView {}
Swift
拖拽
// 将要开始拖拽func scrollViewWillBeginDragging(scrollView: UIScrollView) {}// 将要结束拖拽func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {}// 已经结束拖拽,decelerate 松手后 是否有惯性滚动 0:没有,1:有func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {}
滚动
// 滚动过程中,只要滚动就会触发,只要滚动就会触发func scrollViewDidScroll(scrollView: UIScrollView) {}// 已经结束滚动,滚动动画停止时执行,代码改变时触发,也就是 setContentOffset 改变时func scrollViewDidEndScrollingAnimation(scrollView: UIScrollView) {}
惯性滚动
// 将要开始惯性滚动func scrollViewWillBeginDecelerating(scrollView: UIScrollView) {}// 已经结束惯性滚动func scrollViewDidEndDecelerating(scrollView: UIScrollView) {}
滚到顶端
// 设置点击状态栏时是否滚到顶端func scrollViewShouldScrollToTop(scrollView: UIScrollView) -> Bool {return true}// 已经滚到顶端,点击状态栏时调用func scrollViewDidScrollToTop(scrollView: UIScrollView) {}
缩放
// 设置被缩放的空间,一个 scrollView 中只能有一个子控件被缩放,如果有很多个子控件缩放时会引起错乱func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {return scrollView.subviews[0].viewWithTag(100)}// 将要开始缩放func scrollViewWillBeginZooming(scrollView: UIScrollView, withView view: UIView?) {}// 已经结束缩放func scrollViewDidEndZooming(scrollView: UIScrollView, withView view: UIView?, atScale scale: CGFloat) {}// 缩放过程中,只要缩放就会触发func scrollViewDidZoom(scrollView: UIScrollView) {}
5、Storyboard 中设置
在 Storyboard 场景中设置
Scroll View
Style 滚动条颜色类型 Scroll Indicators -- Shows Horizontal Indicator 显示水平滚动条 -- Shows Vertical Indicator 显示垂直滚动条 Scrolling -- Scolling Enabled 可以滚动 -- Paging Enabled 按页面滚动 -- Direction Lock Enabled 滚动方向固定 Bounce -- Bounces 启动弹簧效果 -- Bounce Horizontal 水平弹簧效果 -- Bounce Vertical 垂直弹簧效果 Zoom 最小/最大缩放值 Touch -- Bounces Zoom -- Delays Content Touches -- Cancellable Content Touches Keyboard 键盘设置
在 Storyboard 场景绑定的 Controller 中设置
在 Storyboard 添加的 ScrollView 上需在其上添加子视图作为 ContentView,并添加子视图的约束,ScrollView 才能够计算 contentSize 的大小,子视图才能够滚动。
若要在 Storyboard 的 ScrollView 上添加一个不随 ContentView 滚动的视图,需在 ViewController 上添加一个和 ScrollView 相同位置大小的视图,并设置不滚动视图相对于该视图的约束。
转载于:https://www.cnblogs.com/QianChia/p/5753169.html
iOS - UIScrollView相关推荐
- FreeEIM 来点新知识iOS UIScrollView详解
老程序员FreeEIM 来点新知识iOS UIScrollView详解 UIScrollView 顾名思义也知道这个是和滚动相关的控件,在Android开发时遇到过ScrollView,当内容的 ...
- iOS UIScrollView和缩放
In this tutorial, we'll be implementing the UIScrollView along with the Zoom feature in our iOS Appl ...
- IOS UIScrollView (转)
UIScrollView 类负责所有基于 UIKit 的滚动操作. 一.创建 1 CGRect bounds = [ [ UIScreen mainScreen ] applicationFrame ...
- iOS UIScrollView的简单使用
本文代码下载 http://vdisk.weibo.com/s/BDn59yfnBVMAJ // // ViewController.m // ScrollView_T1119 // // Creat ...
- iOS uiscrollView 嵌套 问题 的解决
苹果官方文档里面提过,最好不要嵌套scrollView,特别提过UITableView和UIWebView,因为在滑动时,无法知道到底是希望superScrollView滑动还是subScrollVi ...
- ios UIScrollView 基础属性
转 UIScrollView 原理 在滚动过程当中,其实是在修改原点坐标.当手指触摸后, scroll view会暂时拦截触摸事件,使用一个计时器.假如在计时器到点后没有发生手指移动事件,那么 scr ...
- IOS UIScrollView 滚动视图的使用和文档
UIScrollView 是一个可滚动的视图列表,在app中非常常见.下面简单的介绍一下UIScrollView 的用法.可实现代理UIScrollViewDelegate // 实例化UIScrol ...
- iOS UIScrollview 取消弹簧效果
解决UIScrollview 添加多个UITableView 左右滑动取消弹簧效果. // 禁止弹簧效果 _scrollView.bounces = NO;
- ios UIScrollView 中控件自动增加间隔
设置 self.automaticallyAdjustsScrollViewInsets=FALSE; 去除自动间隔功能 转载于:https://www.cnblogs.com/macroxu-198 ...
最新文章
- 如何一眼就分辨出本科、硕士和博士?
- tableview插入刷新_iOS中tableview的几种刷新
- 少儿编程python教材_少儿编程|Python环境安装
- 开关电源怎么测试文波_示波器测试开关电源纹波的方法
- 语音数据采集-实时语音数据可视化
- springboot接口签名统一效验_Python如何接入开放平台?签名验签、加密解密、授权认证测试实战...
- 4g ecgi 编码_4G学习之IMSI附着
- 统一过程(UP)定义了初启阶段、精化阶段、构建阶段、移交阶段和产生阶段,每个阶段以达到某个里程碑时结束,其中()的里程碑是生命周期架构。 A.初启阶段 B.精化阶段 C.构建阶段 D.移交阶段
- Arithmetic图像处理halcon算子持续更新
- 解决父类加载iframe,src参数过大导致加载失败
- PPT 各行各业素材 10000套 讲解
- mui 框架跨域_MUI框架学习(5)–AJAX跨域问题
- 写乐100道练习题_【写乐钢笔使用】_摘要频道_什么值得买
- 借助计算机音乐,计算机音乐制作在高校作曲教学中的应用
- thinningopencv
- 常用的局域网的网络拓扑有哪些种类?现在最流行的是哪种结构?为什么早期的以太网选择总线拓扑结构而不是星形拓扑结构,但现在却改为使用星形拓扑结构?
- Hyperledger Fabric的网络拓扑图与交易流程
- Go string类型及其使用
- HTML(进阶核心标签)
- 什么是单例模式,单例模式的作用,单例模式的用法 一站式解决单例模式
热门文章
- html5css3js文件作业,HTML5 CSS3 JavaScriptWeb前端开发自测试卷2.docx
- android项目编码规范,Android 项目规范
- java蓝桥暑假班_Java实现 蓝桥杯VIP 算法提高 班级排名
- 网页版的svn怎样同步代码_学会使用Hdlbits网页版Verilog代码仿真验证平台
- Jmeter BeanShell学习(一) - BeanShell取样器(一)
- node oauth2验证_如何设置和使用护照OAuth Facebook身份验证(第2部分)| Node.js
- java 根据类名示例化类_Java类类getEnclosingClass()方法及示例
- 2016年湖南省第十二届大学生计算机程序设计竞赛
- linux操作系统之exec函数族
- windows下 , py运用了 进程池, 将py打包成exe,出现错误的 解决思路之一