(WWDC) Auto Layout 的秘密, Part 1


内容概览:
  1. Maintainable Layouts(创建易维护的布局)
  2. Changing Constraints(改变约束)
  3. View Sizing(View的尺寸)
  4. Self-Sizing Table View Cells(尺寸自适应的TableViewCell)
  5. Priorities(优先级)
  6. Alignment(对齐)




本质上来说,使用AutoLayout就是先输入一组约束信息,然后系统会将其转换为一系列的方程,最后通过线性代数算出你想要的frame,并进行视图的布局。



Maintainable Layouts(创建易维护的布局)



这么多约束!如果,让你在星星控件和Essentials中间加一个控件,你会从哪里开始着手?
找到某些关键的约束,然后去掉,然后再添加新的控件和新的约束???很难受,对吧?

使用UIStackView (iOS 9) 和 NSStackView (OS X 10.9)可以更好地去解决这个问题!
Stack View的实现基于AutoLayout,它会帮你管理约束。


  • 水平、竖直布局方式



  • 对齐方式




  • 分布方式


Fill Proportionally基于subview的ContentSize。




使用Stack View进行布局的效果:



Changing Constraints (改变约束)



使用Activate和Deactivate,而不是Add和Remove。

  • 约束会找到自己所属的容器;
  • 更高效地添加约束;
  • 你不需要手动地去引用你的View来改变布局;



切记!永远不要对self.view.constraints进行deactivate操作。

  • 不是所有的约束都属于当前view;
  • 会有神奇的事情发生;
  • 一定不要这样做!

如果某个约束需要更改,引用这个约束,稍后更改即可。
如果需要基于约束做动画,就引用这个约束,然后在View的Animation中做动画即可。



View Sizing(View的尺寸)


  • 固有的内容尺寸(Intrinsic content size)
    某些View具有intrinsicContentSize属性,比如:Label和ImageView



    Size来源于内部的内容(Content)。
    系统会决定Size的约束。
    布局的Size是没有保证的,因为约束自适应会导致变形。


  • 定义明确的Size(Defining a particular view size)
    首先,使用约束。
    如果有需要,也可以重写intrinsicContentSize属性。比如:
    1. 你无法从约束中获得Size的信息;
    2. view需要绘制自定义的内容;
    3. 你需要自己把控约束,比如:本地化文本会有不同的文本长度,需要重新计算intrinsicContentSize;

Size Class的变更也会影响到size。


Self-Sizing Table View Cells(尺寸自适应的TableViewCell)


  • 尺寸的自适应依赖于约束;
  • 宽度由Cell来决定;
  • 约束必须决定高度(充分利用比例关系);
shorter text

longer text


Priorities(优先级)


Constraint Priorities
Constraint Priorities





本该出现在虚线框位置的View,却出现在了错误的位置,为什么?

因为,出现了不只一种布局方案:

  • 约束设置不到位
  • 约束的优先级设定有误

最终,系统会自行选择布局方案。



约束优先级的值可以设置为1到1000之间的任意值。

  • Required 为 1000
  • DefaultHigh 为 750
  • DefaultLow 为 250



你也可以通过代码来更改约束的优先级:

widthConstraint.priority = UILayoutPriorityDefaultHigh + 10;



Content Priorities
Content Priorities

Content Priorities的设定,决定了View如何处理它的内容。

Content Priorities默认设定不是Required。

  • 你也不要将它设定为Required级别;
  • 如果设定为Required,可能会导致约束不适用;



当然,相同的Content Priorities也可能会导致歧义。


  • Content Hugging Priority





可以发现,通过更改Content Hugging Priority的值来更改View的布局。
布局的最终结果依赖于View内部的内容。


  • Content Compression Resistance Priority

可以发现,更改Content Compression Resistance Priority的值也会影响View的布局。



总结一下,使用Priority的好处:

  • 可以使约束远离不适用的情况(但是要小心优先级之间的竞争);
  • 布局更加一致;
  • 可以得到正确的布局(Hugging priorities拥抱View的内容,Compression resistance防止被挤压);



Alignment(对齐)


  • firstBaseline 和 lastBaseline
    使用 firstBaseline 和 lastBaseline 比使用 top 和 bottom 更好地实现文本对齐。
    对于动态文本,效果更佳。
使用lastBaseline来对齐文本

使用firstBaseline来对齐文本


  • Leading and Trailing
使用left/right (英语) 使用left/right (阿拉伯语,阅读顺序是从右到左) 使用 leading/trailing

使用 leading/trailing 而不是 left/right。
可以更好地实现本地化。


  • Alignment Rects
transform前 transform后
  • Alignment Rects通常不等同于frame
  • 只包含最主要的部分
  • 就算view发生了transform也不会改变。

比如上图中,不包括阴影部分(按钮的阴影),也不包括那些次要的部分(勾的最上面部分)。

如果需要使用Alignment Rects,重写view的alignmentRectInsets属性即可。



可以通过Xcode调试,找到alignmentRectInsets。


勾选Show Alignment Rectangles之后,点击Capture View Hierarchy,即可看到Alignment Rectangles (黄颜色的矩形)。


也可以通过alignmentRectForFrame获取。


布局构建概览


总结

  • 使用Stack View帮助构建易维护的布局;
  • 使用activate和deactivate控制约束;
  • 用约束决定size(明智地重写intrinsicContentSize);
  • 使用Priority合理地解决布局问题;
  • 除了使用top, bottom, center进行布局,还可以使用baseline, leading, trailing等(记得做本地化适配);



继续阅读 (WWDC) Mysteries of Auto Layout, Part 2




参考文章:
Mysteries of Auto Layout, Part 1




转载请注明出处,谢谢~

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