AutoLayout-Start

开发过程

在开发过程中我经历了从 magic number －> size mask -> autolayout 的过程。其中项目过程从纯代码编写过渡到了代码结合xib文件布局编写。最近一个项目完全采用StoryBoard来编写。

但是完全使用 StoryBoard ＋ AutoLayout 布局形式完成界面开发，在高效的同时存在一些弊端，就是无法精确控制加载时机，仍旧需要在一些时间针对不同的界面数据元素来进行约束条件的更新，代码会显的有些混乱。也从一些资料中得到 StoryBoard 在多人协作开发时容易产生冲突的问题。正好项目部分功能界面要进行较大的改动。决定采取 AutoLayout 纯代码手写布局，并使用了Masonry。在此做一个记录。

有关AutoLayout的一些事

AutoLayout核心是加在view上的约束，这项技术会根据加载在view上的约束来动态计算view在整个窗口系统中的大小和位置。例如登陆界面想防治一个logo，你可以让这个logo的图片垂直水平居中。然后放置一个输入框在距离logo底部10dp的地方，然后让输入框和logo水平中心一致。

这种方式能够让你一次编写的界面布局在内部、外部变化中都有良好的表现：

外部变化

外部变化发生在当你布局的superview的大小和形状发生变化的时候。下面的每一种变化都会要求我们的界面布局合理的更新内容的大小彼此间的留白。这样的界面布局才能说的上强壮的界面布局。

• 用户改变了窗口大小(OS X)
• 用户进入或离开Split View的时候(iPad)
• 设备旋转的时候（iOS）
• 通话和音频录制状态条出现和消失的时候（iOS）
• 想要支持不同size classes
• 想要支持不同的屏幕尺寸

这其中的多数变化都是发生在运行的时候。需要开发出的App能够动态的响应。

内部变化

内部变化来自用户交互引起的界面变化。

• app内容的显示区域变化了
  这种情况会经常发生，比如本来显示图片的区域由于没有图片显示文字了。比如一个标题Lable要根据标题内容开调整位置。
• 应用支持国际化
  不同语言表达相同意思所占字长可能有很大区别。
  针对不同的地域文化可能在开发中要采用完全不同的界面布局。
• 应用支持动态类型（Dynamic Type）
  如果应用支持Dynamic Type，那系统字体会根据用户的设置而改变。

深入理解Constraint

其实视图约束就是一些列等式构成的，他们一起构成了这种布局的一种可能方案，并展示出来。比如下面的例子:

这个约束的意思是红色view的leading edge必须在距离蓝色view的trailing view 8points的地方。他的方程会有很多本分组成:

• item1 这是方程的第一个参数，他必须是一个view或者一个layout guide，比如top的，或者bottom的。
• attribute 1 这是约束会加在item1上，在图中的例子里是leading edge。
• relationship 这个方程的左右两边之间的relationship可以有三种取值，包括（＝，>=,<=）。
• multiplier attribute2的一个乘数
• item2 第二个参数，这个可以是空，比如设置redview的高度约束
• attrite2 当item2是空的时候，这里也就没有属性的概念了
• constant 偏移量

AutoLayout的Attributes

Attribute通常定义一个可以被约束的属性。通常来说，包括四条边（Top、Bottom、Leading、Trailing）。还有高度（height）、宽度（width），水平垂直中心，文本对象还会有baseLine。

可以翻看NSLayoutAttribute来了解一下详细内容。