关于Autolayout的暖心tips (一)

刚开始写UI界面的时候, 经验丰富的iOS程序猿都会推荐用纯代码手写UI, 并指出Autolayout诸多不足之处: 1)不好维护 2)产品脑洞大开时, 以前写的约束很可能要推翻重来 .

其实, 除了这些缺点, 相信大家也越来越多的发现, 其实Autolayout还是很好用的, 好用到根本不想手写代码了...

不过, 对于iPhone不同设备的屏幕适配, 依旧是个棘手的问题...因为每次去面试都会被问到这个问题, "你是如何用autolayout进行适配的?"

这里讨论一个比较常见的情况.

Example 1: TableViewCell里的两个label并列

(a) 理想中的UI界面:

图1 理想中的UI界面

(b) 实际中的UI界面, 原因: 1) 两个label的文字宽度偏长 2) 屏幕偏小

图2 实际中的UI界面

图3 增加label间距的不等式约束

(d) 此时若希望label1优先被压缩, 加省略号..

点击label1, 在size inspector中, 在添加的各种约束下方, 可以找到Content Hugging Priority & Content Compression Resistance Priority. 其中, Content Compression Resistance Priority 是"抗压缩的优先级". 默认为750. 把优先级调小, 那么就是抗压缩的等级变小, 容易被压缩. 反之, 优先级高, 不容易被压缩. 因此, 调小label1的"抗压缩的优先级",设为749; label2的不变, 仍为750.

图4 调小label1的抗压缩优先级

最后, 得到我们想要的UI界面:

图5 label1优先被压缩

(e) 接着,考虑一种极端情况, 如果label2的文字特别特别长, 可能就把label1挤没了... 这并不是我们想要的结果. 虽然label1优先压缩, 但完全被压缩,或者被压缩的太小, 都不是我们想要看到的.

图6 label2的文字特别长, label1会被挤掉

可以给label1再增加一个宽度Width的约束, 设置最小宽度minWidth

图7 设置label1的最小宽度

得到我们想要的UI界面:

图8 label1 优先压缩且有最小宽度

(f) 这时处女座不乐意了, minWidth怎么可以是固定值呢? 说好的要屏幕适配, minWidth也要跟着屏幕宽度变化! OK, 这个时候要用上Equal Widths来建立label1与superView的关系.

图9 label1与superView的关系, 选择Equal Widths

点击Equal Widths, 并在size inspector中找到该约束, 双击, 出现下面界面:

图10 label1的EqualWidths约束

可以看到, First Item是label.width, Second Item是Cell.width. 将Multiplier改为0.3, Relation改为Greater than or equal. 所以, 此时label1与superView的倍数关系式为 label.width >= 0.3*Cell.width. 成功实现了最小宽度随着屏幕宽度变化的要求.

下节我们会聊聊不等式约束和妙用优先级.

(版权归作者所有, 未经允许, 禁止转载, 违者必究)

经作者授权, 这篇文章也发表在 swiftcn.io/topics/32 , Swift中国是个很不错的社区.

关于Autolayout的暖心tips (一)

推荐阅读更多精彩内容