IOS学习之Layout

好长一段时间以来，总是用storyboard和xib布局，很少使用代码写约束进行布局。正好，近段时间手上没项目忙，于是就对代码写约束进行了简单的研究。

---

布局所使用的也就是NSLayoutConstraint，非常简单，苹果也提供了两种写代码布局的方式

• 使用NSLayoutConstraint的实例
• 使用NSLayoutConstraint的类方法，也就是使用VFL(Visual Format Language)

使用NSLayoutConstraint的实例

public convenience init(item view1: Any, attribute attr1: NSLayoutAttribute, relatedBy relation: NSLayoutRelation, toItem view2: Any?, attribute attr2: NSLayoutAttribute, multiplier: CGFloat, constant c: CGFloat)

说到底，就是调用上面的初始化方法。想必大家都用过，不必多说。

使用VFL

VFL的语法，整理了一下：
1.视图都需要用[]括起来，例如”[view1]”
2.用 - 代表两元素之间的距离，如果要指定两元素之间的距离需要用两个-，中间加一个数值进行指定。例如 “[view1]-[view2]”，“[view1]-50-[view2]”
3.如果没有 - 则两元素之间的距离为0，紧挨在一起。例如:”[view1][view2]”
4.在视图后紧跟小括号，小括号内输入元素的尺寸。在小括号内可以使用”==”,”>=”,”<=”等操作符，用以表达尺寸与当前视图的关系 例如：“H:[view1(30)]”，意思是宽度为30，又比如：“H:[view1(==view2)]”表示view1的宽度与view2的宽度相等
5.水平用”H:”表示,垂直方向用“V:”表示
6.优先级用 @数字 进行指定，优先级最大是1000，数字越大，优先级越高

使用NSLayoutConstraint的实例与使用使用VFL的关系

按我的理解，这两种方法相辅相承。VFL不能完成的NSLayoutConstraint的实例可以实现，而使用NSLayoutConstraint的实例不好实现的，VFL能实现。

代码布局其实比较简单，而很多人不用代码布局无外乎不好排查问题原因。其实只要记住一个原则就好，那就是一个视图是否能被正确显示，取决于两点：

• 视图是否被固定了，也就是说他在父级视图上是否只有唯一的一个位置，唯一的大小去显示它。比如你固定了它的左边距和上边距，又固定了它的宽和高，那么它就唯一了，或者你指定了它上，下，左，右距离其父级视图的距离，那它也就唯一了。

• 一个方向的约束是否相互冲突。比如你在一个视图里指定了它距父级视图的右边距为20，而在别一个约束里指定（或者通过计算得出）其右边距为50，而且优先级一致，那它肯定满足不了这样的约束。
  在使用代码约束的时候，一定要注意，将视图的translatesAutoresizingMaskIntoConstraints设置为false.

  总体来说，代码写约束更多的是一个体力活，而非脑力活，所以我将繁琐的代码进行了一封装，效果还不错，感兴趣的朋友可以去github上下载https://github.com/webbzhao/LayoutExtDemo

下面是我用封装的代码做的一个小例子，代码很简单：

        view.topAlign(view1, 64)        view.leftAlign(view1, 80)        view1.ratioForVH(1.0)        view2.sizeEqual(view1, 0, 0)        view2.topEqual(view1, 0)        view2.rightSpace(view1, 20)        view3.sizeEqual(view1, 0, 0)        view3.topEqual(view1, 0)        view3.rightSpace(view2, 20)        view4.sizeEqual(view1, 0, 0)        view.topAlign(view4, 64)        view4.rightSpace(view3, 20)        view.rightAlign(view4, 80)        view5.sizeEqual(view1, 0, 0)        view5.leftEqual(view2, 0)        view5.topSpace(view2, 20)

效果如下图所示：