Swift31：AutoLayout

前言

Apple提供的API有两套：

• 一套是iOS9之前用的使用 NSLayoutConstraint，Apple可能是因为发现了使用NSLayoutConstraint代码过长的问题

• 在iOS9推出了 NSLayoutAnchor，不仅让约束声明更加清晰明了，而且还通过静态类型检查以确保约束能够正常工作。

关闭autoresizing布局方式

• AutoLayout 又名 自动布局。使用 AutoLayout 可以轻易写出目前主流的所有页面布局.

• 在 iOS 中默认使用 autoresizing 布局方式，做了相对父控件大小的伸缩，使用不方便。

• 关闭 aotoresizing 布局，translatesAutoresizingMaskIntoConstraints = false，可以开启 自动布局

NSLayoutConstraint

只需要创建一个 NSLayoutConstraint，然后激活，添加到对应的view即可。不过，是每一个约束都要创建，所以代码较长。创建一个NSLayoutConstraint只需要一个方法，为了方便，我们对每一个参数进行注释：

NSLayoutConstraint.init(item: Any, //要约束的目标(比如 redView)

attribute: NSLayoutAttribute, //要约束的属性（比如top）

relatedBy: NSLayoutRelation, //约束类型（比如equal）

toItem: Any?,//相对于哪个目标（比如superView）

attribute: NSLayoutAttribute, //相对于这个目标的属性（比如bottom）

multiplier: CGFloat, //倍数（比如一半为0.5）

constant: CGFloat)//常数（差值，比如-10）

举例添加一个view到界面上，距上距左各20，宽200，高100.

// 创建一个红色的view添加到界面上
let redView = UIView()
redView.backgroundColor = .red
redView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(redView)
        
// 添加距离顶部20
let topConstraint = NSLayoutConstraint.init(item: redView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 20)
topConstraint.isActive = true
        
// 添加距离左边20
let leftConstraint = NSLayoutConstraint.init(item: redView, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1.0, constant: 20)
leftConstraint.isActive = true
        
// 添加宽为200
let widthConstraint = NSLayoutConstraint.init(item: redView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 200)
widthConstraint.isActive = true
        
// 添加高为100
let heightConstraint = NSLayoutConstraint.init(item: redView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 100)
heightConstraint.isActive = true

NSLayoutAnchor

iOS9.0之后，Apple推出了 NSLayoutAnchor。

使用方式有两种：

1. 第一种方式

• 创建 UIImageView 视图，闭包初始化

let imgV: UIImageView = {
    let imgV = UIImageView(image: UIImage(named: "logo_icon"))
    imgV.backgroundColor = .blue
    imgV.translatesAutoresizingMaskIntoConstraints = false
    imgV.contentMode = .scaleAspectFill
    return imgV
}()

• 添加到 ViewController 中

view.addSubview(imgV)

• 添加一个约束

// 第一种写法：激活，数组
NSLayoutConstraint.activate([
    imgV.topAnchor.constraint(equalTo: view.topAnchor, constant: 200),
    imgV.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    imgV.widthAnchor.constraint(equalToConstant: 100),
    imgV.heightAnchor.constraint(equalToConstant: 100),
])

2. 第二种方式

• 在 imgV 下方创建一个 文本

let lab: UILabel = {
    let lab = UILabel()
    lab.translatesAutoresizingMaskIntoConstraints = false
    lab.backgroundColor = .red
    lab.text = "加入我们，游戏和乐趣"
    lab.textColor = .green
    lab.font = .systemFont(ofSize: 20, weight: .bold)
    lab.textAlignment = .center
    return lab
}()

• 添加 lab 到 ViewController 上

view.addSubview(lab)

• 添加约束

// 另一种写法：需要激活
lab.topAnchor.constraint(equalTo: imgV.bottomAnchor, constant: 50).isActive = true
lab.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
lab.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
lab.heightAnchor.constraint(equalToConstant: 50).isActive = true