iOS开发这几年, UI布局工具从frame到Masonry到SnapKit, sb和xib的AutoLayout也用过, 但是代码版本的AutoLayout倒是没用过, 最近一年, 频频发现一些三方UI组件布局的bug, 作为三方组件不可能去依赖另一个三方的kayout仓库, 所以只能通过代码的AutoLayout来解决. 好吧, 最近我忍不了了, 于是乎就开始学习代码版本的AutoLayout.
学习目标: 不追求用的多么熟练, 至少要会用, 能够看懂别人的布局代码是怎么回事, 能够找别人布局代码的问题出在哪里.
2.入门首先需要知道, 在cocoa touch中, 有三种布局方式: Manual layout，Autoresizing，Autolayout, 这里要讲解的是第三个AutoLayout. 要想使用代码布局AutoLayout, 首先需要设置translatesAutoresizingMaskIntoConstraints=false, 原因见API注释:
/* By default, the autoresizing mask on a view gives rise to constraints that fully determine the view's position. This allows the auto layout system to track the frames of views whose layout is controlled manually (through -setFrame:, for example). When you elect to position the view using auto layout by adding your own constraints, you must set this property to NO. IB will do this for you. */ @available(iOS 6.0, *) open var translatesAutoresizingMaskIntoConstraints: Bool // Default YES如果不这样设置, 则在运行时候会得到如下的警告(没有编译警告):
API中NSLayoutConstraint.init的方法如下定义如下所示:
/* //NSLayoutConstraint初始化方法在API中的定义: /* Create constraints explicitly. Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant" If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute. */ public convenience init(item view1: Any, attribute attr1: NSLayoutAttribute, relatedBy relation: NSLayoutRelation, toItem view2: Any?, attribute attr2: NSLayoutAttribute, multiplier: CGFloat, constant c: CGFloat) item: 指定约束左边的视图view1 attribute: 指定view1的属性attr1，具体见上述枚举值。 relatedBy: 指定左右两边的视图的关系relation，具体见上述枚举值。 toItem: 指定约束右边的视图view2 (可以设置为nil,则attribute=.attribute) attribute: 指定view2的属性attr2，具体见上述枚举值。 multiplier: 指定一个与view2属性相乘的乘数multiplier constant: 指定一个与view2属性相加的浮点数constant */ public enum NSLayoutRelation : Int { case lessThanOrEqual case equal case greaterThanOrEqual } public enum NSLayoutAttribute : Int { case left //左边 case right case top //顶部 case bottom case leading //前面 case trailing //后面 case width case height case centerX case centerY case lastBaseline @available(iOS 8.0, *) case firstBaseline @available(iOS 8.0, *) case leftMargin @available(iOS 8.0, *) case rightMargin @available(iOS 8.0, *) case topMargin @available(iOS 8.0, *) case bottomMargin @available(iOS 8.0, *) case leadingMargin @available(iOS 8.0, *) case trailingMargin @available(iOS 8.0, *) case centerXWithinMargins @available(iOS 8.0, *) case centerYWithinMargins case notAnAttribute }left和leading的不同之处, 详见stackoverflow: Difference between NSLayoutAttributeLeft vs NSLayoutAttributeLeading
一个简单的,设置view约束的示例:
let leftLayout = NSLayoutConstraint(item: blueView, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1, constant: 20) let topLayout = NSLayoutConstraint(item: blueView, attribute: .top, relatedBy: .equal, toItem: redView, attribute: .bottom, multiplier: 1, constant: 30) let heightLayout = NSLayoutConstraint(item: blueView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 100) let rightLayout = NSLayoutConstraint(item: blueView, attribute: .right, relatedBy: .equal, toItem: view, attribute: .right, multiplier: 1, constant: -10) view.addConstraints([leftLayout, topLayout, heightLayout, rightLayout])毋庸置疑, NSLayoutConstraint非常强大, 但是代码量也同样非常大, 简单一个view的约束就要写将近30行代码. 其实cocoa touch团队已经想到了这点, 他们为我们提供了另一种更简单的方法, 那就是VFL !
4.第二种实现AutoLayout的方法: VFL(Visual Format Language)VFL是苹果公司为了简化autolayout的编码而推出的抽象语言。
4.1 了解VFLVFL（Visual Format Language）: “可视化格式语言”, 苹果公司为了简化autolayout的编码而推出的抽象语言.
基本语法表
功能 表达式水平方向 H:
垂直方向 V:
Views [view]
关系 >=,==,<=
SuperView |
空间，间隙 - -
优先级 @value
举几个列子:
例子1: H:|-20-[view1(50)]-11-[view2]-20-|