关于 Autolayout 的暖心 tips (一)

iOSclyyuanzi • 于 2015-10-09 23:01:46 +0800 • 最后由 kelby2015-11-05 20:35:21 +0800 7663 阅读

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

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

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

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

Example 1: TableViewCell里的两个label并列

(a) 理想中的UI界面:

file

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

file

(c) 增加不等式约束: label1的trailing 与 label2的leading 的水平距离 >= 15; 增加约束后, 默认label2 被压缩, 加省略号...

file

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

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

file

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

file

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

file

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

file

得到我们想要的UI界面, label1 优先压缩且有最小宽度:

file

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

file

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

file

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

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

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

这篇文章也可以在作者的简书主页上查看. http://www.jianshu.com/p/921c8121b8a3

回复: 15
  • iBcker 2015-10-09 23:13:21 +0800

    代码写得好,关键还是个萌妹子~ :+1:

  • leostc 2015-10-09 23:40:25 +0800

    干货,写的不错啊,竟然还是妹子

  • ZhaoXM324 2015-10-09 23:44:12 +0800

    顶起~坐等下一篇~帮助处女座以及强迫症治病的tips

  • gexiao 2015-10-10 03:28:56 +0800

    第一句话里可能稍微有点概念偏差:Auto Layout 也可以是纯手写 UI。与手写相对应的是 IB 布局。

  • IvanLing 2015-10-10 16:15:53 +0800

    cool.

  • XueSeason 2015-10-10 16:24:35 +0800

    图文并茂,就是内容少了点。
    期待下一篇教程。😀

  • clyyuanzi 2015-10-10 18:20:43 +0800

    @iBcker swift大神, 我正在看你的文章 :bowtie:

  • clyyuanzi 2015-10-10 18:21:36 +0800

    @leostc 主要是学代码的妹子偏少, 不然妹子编起程来也不差的 :smile:

  • clyyuanzi 2015-10-10 18:22:26 +0800

    @ZhaoXM324 哈哈, 好的, 会有下一篇的 :relaxed:

  • clyyuanzi 2015-10-10 18:23:20 +0800

    @gexiao 啊啊..有道理...让我想想该怎么改...

  • clyyuanzi 2015-10-10 18:24:14 +0800

    @IvanLing :blush:

  • clyyuanzi 2015-10-10 18:24:58 +0800

    @XueSeason 嗯嗯...其实加上截图切图...有点工作量的...下一篇争取多写一点

  • hugrup 2015-10-25 01:00:13 +0800

    这是写给男票的?

  • selforder 2015-11-02 20:42:08 +0800

    @hugrup 被你看出来了

  • kelby 2015-11-05 20:35:21 +0800

    @clyyuanzi 后面的文章呢?

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,见 Emoji cheat sheet
  • @name 会链接到用户页面,并会通知他
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
Ctrl+Enter