XZ_Swift之苹果原生自动布局的使用
- 自动布局核心公式
“view1.attr1 = view2.attr2 * multiplier + constant”
核心概念：即 任何一个视图 的 属性 都可以 参照 其他视图 的 某一个属性 乘以 乘积 加上一个 常数
relatedBy relation (等于/大于等于/小于等于）
constant（在x轴：负数向左，正数向右；在y轴：负数向上，正数向下） - 自动布局构造函数
self.addConstraint(NSLayoutConstraint.init(item: 视图,
attribute: 约束属性,
relatedBy: 约束关系,
toItem: 参照视图,
attribute: 参照属性,
multiplier: 乘积,
constant: 约束数值))- 如果指定 宽 / 高 约束
-参照视图设置为 nil
-参照属性选择 .notAnAttribute - 自动布局类函数
self.addConstraint(NSLayoutConstraint.constraints(withVisualFormat: VFL公式,
options: [],
metrics: 约束数值字典[String: 数值],
views: 视图字典[String: 子视图]))- VFL 可视化格式语言
· H 水平方向
· V 水平方向
· I 边界
· [ ] 包含控件的名称字符串,对应关系在 views 字典中定义
· ( ) 定义控件的宽/高，可以在 metrics 中指定
提示：VFL 通常用于连续参照关系，如果遇到居中对齐，通常直接使用参照；
居中对齐使用VFL不好表示，居中很难说怎么居中，居中使用构造函数比较合适
注意：代码的原生的自动布局，需要取消 autoresizing；
autoresizing 和 autolayout 是不能共存的，纯代码的使用 autoresizing， xib 布局使用 autolayout；先使用下列代码取消autoresizing，自动布局才会起作用。
// 取消自动布局
for subview in subviews {
subview.translatesAutoresizingMaskIntoConstraints = false
}使用原生代码实现下图布局 
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//
setupUI()
}
// MARK: - 私有控件
// 圈
private lazy var imgIcon = UIImageView(image: UIImage.init(named: "visitordiscover_feed_image_smallicon"))
// 主页图片
private lazy var imgHouse = UIImageView(image: UIImage.init(named: "visitordiscover_feed_image_house"))
// 注册按钮
private lazy var btnRegister = UIButton(title: "注册", font: 16, normalColor: .orange, highlightedColor: .black, bgImg: "common_button_white_disable")
// 登录按钮
private lazy var btnLogin = UIButton(title: "登录", font: 16, normalColor: .darkGray, highlightedColor: .black, bgImg: "common_button_white_disable")
}
// MARK: - 设置页面
extension ViewController {
func setupUI() {
view.backgroundColor = .white
// 1.添加到视图
view.addSubview(imgIcon)
view.addSubview(imgHouse)
view.addSubview(btnRegister)
view.addSubview(btnLogin)
// 2.取消自动布局
for subview in view.subviews {
subview.translatesAutoresizingMaskIntoConstraints = false
}
// 3.给图片添加自动布局
// 1>圈
view.addConstraint(NSLayoutConstraint.init(item: imgIcon,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0))
view.addConstraint(NSLayoutConstraint.init(item: imgIcon,
attribute: .centerY,
relatedBy: .equal,
toItem: view,
attribute: .centerY,
multiplier: 1,
constant: 0))
// 2> 主页
view.addConstraint(NSLayoutConstraint.init(item: imgHouse,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0))
view.addConstraint(NSLayoutConstraint.init(item: imgHouse,
attribute: .centerY,
relatedBy: .equal,
toItem: view,
attribute: .centerY,
multiplier: 1,
constant: 0))
// 3> 登录
view.addConstraint(NSLayoutConstraint.init(item: btnRegister,
attribute: .right,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: -30))
view.addConstraint(NSLayoutConstraint.init(item: btnRegister,
attribute: .top,
relatedBy: .equal,
toItem: imgIcon,
attribute: .bottom,
multiplier: 1,
constant: 30))
view.addConstraint(NSLayoutConstraint.init(item: btnRegister,
attribute: .width,
relatedBy: .equal,
toItem: nil,
attribute: .notAnAttribute,
multiplier: 1,
constant: 100))
view.addConstraint(NSLayoutConstraint.init(item: btnRegister,
attribute: .height,
relatedBy: .equal,
toItem: nil,
attribute: .notAnAttribute,
multiplier: 1,
constant: 35))
// 登录
view.addConstraint(NSLayoutConstraint.init(item: btnLogin,
attribute: .left,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 30))
view.addConstraint(NSLayoutConstraint.init(item: btnLogin,
attribute: .top,
relatedBy: .equal,
toItem: btnRegister,
attribute: .top,
multiplier: 1,
constant: 0))
view.addConstraint(NSLayoutConstraint.init(item: btnLogin,
attribute: .width,
relatedBy: .equal,
toItem: btnRegister,
attribute: .width,
multiplier: 1,
constant: 0))
view.addConstraint(NSLayoutConstraint.init(item: btnLogin,
attribute: .height,
relatedBy: .equal,
toItem: btnRegister,
attribute: .height,
multiplier: 1,
constant: 0))
}
}
VFL布局格式代码示例
// views: 定义 VFL 中的控件名称和实际名称映射关系
// metrics: 定义 VFL 中 () 指定的常数映射关系
let views = ["imgMask": imgMask, "btnRegister": btnRegister] as [String : Any]
let metrics = ["spacing": -35]
// imgMask设置水平方向距离左边界和右边界都是0 addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[imgMask]-0-|",
options: [],
metrics: nil,
views: views))
// imgMask设置竖直方向距离上边界0、底部和btnRegister的top向下35, addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[imgMask]-(spacing)-[btnRegister]",
options: [],
metrics: metrics,
views: views))