自动布局技巧篇-scrollView的自动布局

情景:

项目中的滑动视图,随处可见,可能大家一般的做法是只要是滑动视图,都采用tableView做,但是我想说的是,其实很多滑动视图都可用在xib上用scrollView做,而不需要用表,比如设置页面,个人中心,商品详情页,所有的只要它的内容不是动态加载的,或者不需要重用的,都可以在xib上用scrollView做,在项目中,我很多都是是这么干的,只要不需要重用的列表,统统采用xib在scrollView上做,

好处:不需要像表那样,每个区域都要定制一个cell,然后还要写一堆代理,并且判断不同的行返回不同的cell。

缺点:如果要在列表上加一块区域(需求什么的)确实没有表方便,因为表的cell是分开的,而xib上的scrollView都是集中在内容视图上的,它只有那么一块空间,当然也有解决方法,就是把新加的一块拿出来放到一个view里面,然后用代码把它加在scrollView预留的一块很小区域,运行的时候改变这块区域高度就可以

切入正题,看下面两种情况

一横向滚动

这个可以直接在xib上画,如下

contentView是拖上去的,不是自带的,那么为什么要拖一个内容视图上去呢,其实scrollView的滚动完全是靠内容视图实现的,假如scrollView是横向滚动,那么只有当内容视图的宽度大于scrollView的宽度时,它才能横向滑动,小于或者等于的话,它是滑不了的,这和表创建时的原理类似,先看有多少个cell,在看每个cell的高度,其实就是计算所有cell所占的内容视图的高度来决定表是否可滑,只有当所有cell的高度之和大于表的高度时候,表才可以滑动,不然是滑动不了的

要想滑动视图可以滑动,以可以横向滑动为例,那么必须满足两个条件

1 contentView所占的区域最终是确定的(也就是contentView的宽度和高度),就是contentSize最终要确定

2 contentView的width也就是contentSize.width必须大于滑动视图的宽度

contentView的宽高要确定,通过谁来确定,肯定是通过contentView上面的子视图,利用它的子视图把它的宽度或者高度给撑起来,就像之前一篇讲的自动布局技巧篇-文字横向扩展父视图跟随横向扩展,下图,这个label的父视图的宽度就是通过label撑起来的,它的父视图宽度是没有给的,换句话说,它的父视图的宽度是通过子视图label确定的,那么理解了这一点,那么scrollView的contentView的宽高(contentSize)的确定和这个本质上是一样的,只不过这里label只确定了父视图的宽度,而父视图的高度不是由它确定的,要改简单,直接把父视图的高度约束去掉,把label垂直居中约束去掉,给它上面下面各一个固定约束就可以确定父视图的高度,


所以按照这个思路,让scrollView横向滑动,给scrollView里面的contentView的子视图设置约束只需要遵守下面的约定即可:

横向:每个子视图的宽度要确定(不管你是给固定值,还是相对于屏幕,或者参照view来确定),各个子视图之间左右距离要给定,最左边和最右边子view距离contentView的距离给定,所有子视图横向约束之和一定要大于滑动视图的宽度

纵向:每个子视图的高度要确定(不管你是给固定值,还是相对于屏幕,或者参照view来确定),各个子视图距离contentView的上下距离给定,纵向有多个子视图,每个子视图都有一个纵向约束之和(每个子视图高度+上下距离),那么要求最大的那个和小于等于滑动视图的高度

如下:

上面是scrollView横向滚动,再来看纵向滚动


具体操作如下:

横向:每个子视图的宽度要确定(不管你是给固定值,还是相对于屏幕,或者参照view来确定),各个子视图距离contentView的两边距离给定,横向有多个子视图,每个子视图都有一个横向约束之和(每个子视图宽度+左右距离),那么要求最大的那个和小于等于滑动视图的宽度

纵向:每个子视图的高度要确定(不管你是给固定值,还是相对于屏幕,或者参照view来确定),每个子视图之间上下距离要给定,最上边和最下边子视图距离contentView距离给定,所有子视图纵向约束之和一定要大于滑动视图的高度

如下:

而其他要注意的约束就是contentView距离父视图scrollView的约束,一般都是上下左右距离都为0,当然如果你要在scrollView里面一部分区域滑的话,那就不是0,就是具体的值,

demo地址https://github.com/aszkj/KJAutoLayoutSillDemo

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

推荐阅读更多精彩内容

  • 翻译自“Auto Layout Guide”。 1 入门 1.1 理解自动布局 自动布局根据视图层级结构中视图上的...
    lakerszhy阅读 3,555评论 3 26
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • HTML5中包含一系列新的缺陷,而且比一般标准更脆弱、更容易出现,其中包括安全配置错误问题、跨站点脚本攻击(XSS...
    一只dororo阅读 547评论 0 1
  • 有些人,可能很大一部分人(包括自己),茌渴望成长的旅途上,都走过这样的弯路:买了很多书,也读了很多书;订了很多课程...
    _德成阅读 302评论 1 1
  • 青玉案·咏絮 垂柳相映灯火路。忽明灭,行人驻。 孤星自落满芳树。 风摇影动,云起星逸,竞华翩翩舞。 日日扬起心如絮...
    逸川阅读 632评论 10 15