Swift: 苹果原生自动布局介绍

• 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))