需要设计师知道的一个小细节

当产品经理将这个版本的需求明确之后，攻城狮在梳理逻辑的同时，应该就收到了设计师交给我们的标注图。虽然我觉得千篇一律的基础控件写起来没有干劲儿，但就是这些最常使用的基础控件，还是会让我们耗费很多时间来调整。

难道我写错了？

现在开发者通常会用AutoLayout来写UI，主要的参考元素是控件四边(edges)距离其他控件的距离(offset)。

然而，当我们完全按照标注图搞出了一个视图后，得意洋洋的把效果图发给设计师后，设计却过来说：和标注图不一样！
(程序猿内心：掀桌(╯‵□′)╯︵┻━┻)

等等，在我们召唤九尾出来进入暴走状态之前，先想想原因：我的确是按照标注图设置的间距，为什么和效果图不一样呢？难道我写错了？（黑人疑问脸）

可能的原因

其实很有可能是标注图中有文字需要用UILabel来实现，而其实很多设计师给你的标注图都是“错的”。

(并且大家都知道：AutoLayout约束Label只需要两个定量确定UILabel的origin即可，size Label会根据文字自我适配。下文中的栗子也是以Label自适应size为基础的)

举个栗子🌰

假设你的设计师，给你一张这样的标注图：

看上去没毛病，文字的颜色、字体大小、top、padding都已经明确的标注出来了，图中都是px(像素)的标注，iOS使用pt(也就是point，pt = px/2)，四个标题规格相同，最顶部和最底部的标题offset都是21pt，文字间距是15pt，cell高度为140pt。

可是，完全按照标注图的标注使用AutoLayout从上到下约束后，模拟器效果图却是这样的:

模拟器效果图中，黑色部分是使用MMPlaceHolder将标题间距离用pt尺寸显示了出来，可以看得出，Label间的间距的确是如标注图中的一样，top = 21pt，padding = 15pt，但是row = 0的cell底部间距超出了cell很大一部分。

Why?

A:因为UILabel每个字号都存在一个“最小高度值”。这个最小高度值会保证当前字号下，任何字符串都不会超出UILabel所在的区域。这个机制就导致如果UI设计师如上图所示一样标注文字与其他视图间的标注，会让我们完成的效果图与预期有很大的偏差。
用图表示会更直观一些：

上图中，灰色区域为UILabel，可以看出，不同文字的top距离UILabel的top有不同的间距，细想之下，这是一个十分合理的设计。假设标注图中，title的位置，将@"标题1："用三个中文“一”@"一一一："来表示的话，那标注图简直…

需要注意的一个小点是：UILabel多行自适应时，其高度height = n(行数) * aLineHeight(单行高度)

最后

简单搞了一个常用字号和对应最小高度关联的图表，便于让你跟你的设计师沟通，说请这件事，只需要让设计师在做图或标注的时候，将文字对应字号的高度预留出来，就可以免除开发和设计很多不必要的时间开销。