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