在Swift中使用AutoLayout(AutoLayout笔记) (2)

设置水平方向的布局, view1距离superView左边20个单位, view1的宽度是50, view1的右边是view2, view1和view2的距离是11个单位长度, view2距离superView右边20个单位长度.

列子2:H:[wideView(>=60@700)]

wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束条件越先被满足）

`例子3:V:|-20-[redBox(50)]-20-[yellowBox(==redBox)]``

垂直方向上, redBox距离上面20个单位, redBox的高度是50个单位, redBox右边20个单位之外是yellowBox, yellowBox的高度和redBox的高度相等.

4.2 代码示例

NSLayoutConstraint.constraints在API中的定义如下所示,

/* Create an array of constraints using an ASCII art-like visual format string. */ open class func constraints(withVisualFormat format: String, options opts: NSLayoutFormatOptions = [], metrics: [String : Any]?, views: [String : Any]) -> [NSLayoutConstraint] /* This macro is a helper for making view dictionaries for +constraintsWithVisualFormat:options:metrics:views:. NSDictionaryOfVariableBindings(v1, v2, v3) is equivalent to [NSDictionary dictionaryWithObjectsAndKeys:v1, @"v1", v2, @"v2", v3, @"v3", nil]; */ format：VFL语句 opts：约束类型 metrics：VFL语句中用到的具体数值 views：VFL语句中用到的控件 创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义 NSDictionaryOfVariableBindings(...)

如下是设置redView和greenView的一个代码示例, VFL支持同时设置多个view的约束, 也支持设置相对约束.

let redView = UIView() redView.backgroundColor = UIColor.red redView.translatesAutoresizingMaskIntoConstraints = false let blueView = UIView() blueView.backgroundColor = UIColor.blue blueView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(redView) view.addSubview(blueView) //设置redView的constraints view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-10-[view(200)]", options: NSLayoutFormatOptions(), metrics: nil, views: ["view": redView])) view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-20-[view(200)]", options: NSLayoutFormatOptions(), metrics: nil, views: ["view": redView])) //设置blueView的约束, 此时blueView的约束是相对于redView来设置 //实际上, 可以同时设置redView和blueView的约束, 这里拆开是为了测试VFL支持相对约束 let hMetrics = ["middleSpace": 10, "rightSpace": 20] let hViews = ["redView": redView, "blueView": blueView] let hVFL = "H:[redView]-middleSpace-[blueView]-rightSpace-|" view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: hVFL, options: NSLayoutFormatOptions() metrics: hMetrics, views: hViews)) let vMetrics = ["topSpace": 10, "height": 80] let vViews = hViews let vVFL = "V:[redView]-topSpace-[blueView(height)]" view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: vVFL, options: NSLayoutFormatOptions() metrics: vMetrics, views: vViews))

4.3 使用规则(来自网络) |: 表示父视图 -:表示距离 V: :表示垂直 H: :表示水平 = :表示视图间距、宽度和高度必须大于或等于某个值 <= :表示视图间距、宽度和高度必须小宇或等于某个值 == :表示视图间距、宽度或者高度必须等于某个值 @ :>=、<=、== 限制 最大为 1000 |-[view]-|: 视图处在父视图的左右边缘内 |-[view] : 视图处在父视图的左边缘 |[view] : 视图和父视图左边对齐 -[view]- : 设置视图的宽度高度 |-30.0-[view]-30.0-|: 表示离父视图 左右间距 30 [view(200.0)] : 表示视图宽度为 200.0 |-[view(view1)]-[view1]-| :表示视图宽度一样，并且在父视图左右边缘内 V:|-[view(50.0)] : 视图高度为 50 V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示离父视图的距离 为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。 [wideView(>=60@700)] :视图的宽度为至少为60 不能超过 700 如果没有声明方向默认为 水平 V:

转载请注明出处!