iOS回顾笔记(04) -- UIScrollView的基本使用详解

前言

本文主要讲述了 UIScrollView 的一些常用的属性和方法、引申了delegate的思想和UIScrollView的缩放。这篇文章着重介绍UIScrollView的基本知识,关于UIScrollView的实例使用我会在下一篇iOS回顾笔记(05)中着重讲解。

UIScrollView

  • UIScrollView :顾名思义就是 可以滚动的 UIView。
  • 由于手机的屏幕比较小,所以直接可以展示在用户眼前的内容极其有限
  • 当展示的内容较多且超出一个屏幕时,用户可以通过手势滑动来查看屏幕以外的东西
  • 普通的UIView不具备滚动的功能,所以不适合展示较多的内容
  • UIScrollView就是一个可以滚动的UIView,用来展示大量的内容,并且可以通过滚动来展示所有内容
  • UIScrollView实例:手机上可上下滑动的页面都是,如QQ聊天页面

UIScrollView的基本使用

UIScrollView的使用很简单,基本使用方式如下:

  • 将需要展示的内容添加到UIScrollView中
  • 设置UIScrollView的 contentSize属性,告诉它它内容的尺寸,也就是设置它的可滚动范围
// 1.创建滚动视图
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.frame = CGRectMake(0,0,375,150);
[self addSubview:scrollView];
        
// 2. 设置内容
[scrollView addSubview:[UIImageView new]];
        
// 3. 设置滚动范围
scrollView.contentSize = CGSizeMake(ImageViewCount * self.bounds.size.width, 0);

UIScrollView的显示内容的小细节

  • 超过UIScrollView边界的内容会被自动隐藏
  • 用户可以用过拖拽手势来查看超出UIScrollView边界被隐藏的内容

UIScrollView无法滚动可能的原因

  • 未设置 contentSize,不知滚动的范围
  • scrollEnable = NO; 可滚动属性设置为NO
  • userInteractionEnable = NO; 未接受用户事件

UIScrollView的常用属性

  • 内容偏移量:contentOffset
@property(nonatomic) CGPoint contentOffset;  // default CGPointZero

contentOffset用来表示UIScrollView的滚动位置。

具体为内容原点与UIScrollView左上角原点的间距值。

  • 内容大小:contentSize
@property(nonatomic) CGPoint contentSize;  // default CGSizeZero

contentSize:表示UIScrollView的内容的尺寸,用来设置UIScrollView的滚动范围。

  • 额外滚动区域:contentInset
@property(nonatomic) UIEdgeInsets contentInset; // default UIEdgeInsetsZero. add additional scroll area around content

contentInset:可以在UIScrollView的四周增加额外的滚动区域。可以用来避免UIScrollView的内容被其他控件挡住。

以上属性效果如图:

Snip20170305_3.png

UIScrollView的其他属性

  • 弹簧效果
@property(nonatomic) BOOL bounces; // default YES. if YES, bounces past edge of content and back again
  • 是否能滚动
@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled; // default YES. turn off any dragging temporarily
  • 是否显示水平滚动条
@property(nonatomic) BOOL showsHorizontalScrollIndicator; // default YES. show indicator while we are tracking. fades out after tracking
  • 是否显示垂直滚动条
@property(nonatomic) BOOL showsVerticalScrollIndicator; // default YES. show indicator while we are tracking. fades out after tracking
  • UIScrollView的Delegate(代理)
@property(nullable,nonatomic,weak) id<UIScrollViewDelegate> delegate; // default nil. weak reference

UIScrollView的Delegate

Deleagate 是一个很重要的属性,同时也是一个重要的知识点,所以拿出来着重说一下。

代理思想的引入

  • 通常,我们会在UIScrollView 正在滚动、滚到到某个位置、停止滚动等情况下做一些特定的操作
  • 若想完成以上操作,需要对UIScrollView的各个状态进行“监听”,这个监听者就是我们说的代理
  • 当UIScrollView发生一系列滚动操作时,会自动发送消息给它的代理对象,通知它当下的实时滚动状态。
  • 总结一下就是,如果想要监听UIScrollView的实时滚动状况,我们就要给它设置代理,然后通过代理来得知它的实时滚动情况

实际上UIScrollView通知delegate自己的相关状态就是通过给代理发消息实现的如图:


Snip20170305_4.png

所以想成为UIScrollView的代理是需要遵循如下条件的

@property(nullable,nonatomic,weak) id<UIScrollViewDelegate> delegate;
  • UIScrollView把代理需要实现的方法都定义在了UIScrollViewDelegate当中
  • 成为代理必须遵守UIScrollViewDelegate这个协议,其本身可以是 id 类型的对象(任意类型对象)
  • 代理对象必须实现UIScrollViewDelegate中相对应的方法,才能监听UIScrollView相应的状态

设置UIScrollView的步骤

  • 通常情况下UIScrollView的代理都是控制器,设置方法有两种
    • 代码: scrollView.delegate = self;
    • storyBoard/Xib拖线:


      Snip20170305_5.png
  • 控制器UIScrollViewDelegate
@interface ViewController ()<UIScrollViewDelegate>
  • 实现相对应的代理方法,进行监听
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    // 监听代码
}
- (void)scrollViewDidZoom:(UIScrollView *)scrollView NS_AVAILABLE_IOS(3_2){
    // 监听代码
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    // 监听代码
}

···

UIScrollView内容的缩放

UIScrollView不仅能够展示大量的内容还能进行内容的缩放。

常见场景

图库里面的图片我们可以通过手势来进行缩放

Snip20170305_6.png

要实现这样的功能,我们只需要将图片放到UIScrollView中去,然后设置缩放比例和要缩放的内容

缩放原理

  • 当用户在UIScrollView身上使用捏合手势的时候,UIScrollView会调用delegate的viewForZoomingInScollView方法,方法的返回值就是要进行缩放的控件。
Snip20170305_7.png

缩放实现步骤

  • 设置UIScrollView的代理对象
  • 设置minimumZoomScale;// default is 1.0 最小缩放比例
  • 设置maximumZoomScale;// default is 1.0. 最大缩放比例
  • 代理实现viewForZoomingInScrollView方法返回要进行缩放的控件

缩放相关的两个方法

// 将要开始缩放
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view NS_AVAILABLE_IOS(3_2); // called before the scroll view begins zooming its content

// 结束缩放
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale; // scale between minimum and maximum. called after any 'bounce' animations

小结

UIScrollView是iOS开发中常常用到的一个控件,通常用来展示比较多的内容,我们可以通过给他设置代理实现它的代理方法进行监听,通过监听不同的状态来做对应的一些操作。
它可以监听用户手势来缩放自己内部子控件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容

  • 关于UIStrollview: UIScrollView无法滚动可能的原因及解决办法: Ø没有设置contentS...
    4d49353c3819阅读 1,305评论 0 0
  • 掌握 UIScrollView的常见属性 UIScrollView的常用代理方法 UIScrollView的缩放 ...
    JonesCxy阅读 2,618评论 1 12
  • 什么是UIScrollView? 移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限 当展示的...
    游某人阅读 591评论 0 2
  • - 什么是UISCrollView + 当手机屏幕需要展示的内容较多超出一个屏幕时,用户可以通过滚动手势来查看屏幕...
    洋子总阅读 21,925评论 2 19
  • 看不透的世事,看别人的爱恨纠葛,有时候也会觉得可惜与无奈。爱的背后要有多少信任才能厮守,背叛的背后要有多少堕落才会...
    阅客听阅读 86评论 0 0