iOS中, 控件的布局方式有两种, 一种是通过frame设置控件位置, 另一种就是通过自动布局来设置控件位置
自动布局核心公式
view.attr1 = view2.attr2 * multiplier + constant
- 自动布局构造函数
NSLayoutConstraint(item: 视图,
attribute: 约束属性,
relatedBy: 约束关系,
toItem: 参照视图,
attribute: 参照属性,
multiplier: 乘积,
constant: 约束数值)
如果指定宽高的约束, 参数值图设置为nil, 参照属性选择.notAnAttribute
- 示例代码
// 间距
let margin : CGFloat = 20.0
// 布局子控件tipLabel的centerX属性值 = 自身的centerX属性值 * 1 + 0
addConstraint(NSLayoutConstraint(item: tipLabel,
attribute: .centerX,
relatedBy: .equal,
toItem: self,
attribute: .centerX,
multiplier: 1.0,
constant: 0))
// 布局子控件tipLabel的top属性值 = 子控件iconView的bottom属性值 * 1 + margin(margin = 20.0)
addConstraint(NSLayoutConstraint(item: tipLabel,
attribute: .top,
relatedBy: .equal,
toItem: iconView,
attribute: .bottom,
multiplier: 1.0,
constant: margin))
// 布局子控件tipLabel的width属性值 = 236, 因为但是设置宽, 所以toItem设为nil, attribute设为NSLayoutAttribute.notAnAttribute
addConstraint(NSLayoutConstraint(item: tipLabel,
attribute: .width,
relatedBy: .equal,
toItem: nil,
attribute: NSLayoutAttribute.notAnAttribute,
multiplier: 1.0,
constant: 236))
VFL
- 自动布局类函数
NSLayoutConstraint.constraints(
withVisualFormat: VLF公式
options: [],
metrics: 约束数值字典[Strong : 数值],
views: 视图字典[String : 子视图])
-
VLF 可视化格式语言
- H : 水平方向
- V : 垂直方向
- | 边界
- [] 包含空间的名称字符串, 对应关系在views字典中定义
- () 定义空间的宽/高, 可以再metrics中指定, 具体是宽还是高, 看布局方向
示例代码
// metrics: 定义 VFL 中 () 指定的参数映射关系
// views: 定义VFL 中的控件名称和实际名称的映射关系
let viewDic = ["maskIconView" : maskIconView,
"registerButton" : registerButton
] as [String : Any]
let metrics = ["spacing" : -35]
// 设置约束: 左边界 - 零间距 - 视图maskIconView - 零间距 - 右边界
addConstraints(NSLayoutConstraint.constraints(
withVisualFormat: "H:|-0-[maskIconView]-0-|",
options: [],
metrics: nil,
views: viewDic))
// 设置约束: 上边界 - 零间距 - 视图maskIconView(高100) - (间距-35) - 视图registerButton - 右边界
addConstraints(NSLayoutConstraint.constraints(
withVisualFormat: "V:|-0-[maskIconView(100)]-(spacing)-[registerButton]-|",
options: [],
metrics: metrics,
views: viewDic))
