VFL布局问题的解决方法（包括垂直居中和水平居中）

VFL是什么就不多说，在这里主要记录下在项目使用VFL时遇到的一些问题！

1、多控件的水平布局问题

这里设置了水平约束，以及控件的宽高约束，且三个控件的centerY是相等的

// 这里有三个控件，需要让它们处于水平布局状态
addSubview(previousBtn)
addSubview(textLabel)
addSubview(nextBtn)

var cons = NSLayoutConstraint
      .constraints(withVisualFormat: "H:|-[previousBtn(30)]-20-[textLabel]-20-[nextBtn(30)]-|",
                   options: .alignAllCenterY,
                   metrics: nil,
                   views: views)
        
cons += NSLayoutConstraint
      .constraints(withVisualFormat: "V:[previousBtn(30)]",
                   options: [],
                   metrics: nil,
                   views: views)
   
cons += NSLayoutConstraint
      .constraints(withVisualFormat: "V:[nextBtn(30)]",
                   options: [],
                   metrics: nil,
                   views: views)

2、控件居中问题

上面的三个控件需要设置垂直居中，（由于水平方向上已经有相关的约束，所以可以不设置），我这里只设置textLabel的垂直约束（那个都可以，因为他们的centerY已经有相等约束）
这里的实现有两套方案

A、VFL约束与Apple封装的约束混合使用

let views: [String: Any] = ["previousBtn": previousBtn,
                          "textLabel": textLabel,
                          "nextBtn": nextBtn]

添加垂直居中约束

var cons = NSLayoutConstraint
      .constraints(withVisualFormat: "H:|-[previousBtn(30)]-20-[textLabel]-20-[nextBtn(30)]-|",
                   options: .alignAllCenterY,
                   metrics: nil,
                   views: views)
        
cons += NSLayoutConstraint
      .constraints(withVisualFormat: "V:[previousBtn(30)]",
                   options: [],
                   metrics: nil,
                   views: views)
   
cons += NSLayoutConstraint
      .constraints(withVisualFormat: "V:[nextBtn(30)]",
                   options: [],
                   metrics: nil,
                   views: views)

// 混合约束                   
cons += [NSLayoutConstraint.init(item: textLabel,
                                  attribute: .centerY,
                                  relatedBy: .equal,
                                  toItem: self,
                                  attribute: .centerY,
                                  multiplier: 1,
                                  constant: 0)]
addConstraints(cons)

B、纯VFL约束。

最后必须同时添加水平居中约束和垂直居中约束，否则会报错

let views: [String: Any] = ["previousBtn": previousBtn,
                          "textLabel": textLabel,
                          "nextBtn": nextBtn,
                          "superview": self]

var cons = NSLayoutConstraint
      .constraints(withVisualFormat: "H:|-[previousBtn(30)]-20-[textLabel]-20-[nextBtn(30)]-|",
                   options: .alignAllCenterY,
                   metrics: nil,
                   views: views)
   
cons += NSLayoutConstraint
      .constraints(withVisualFormat: "V:[previousBtn(30)]",
                   options: [],
                   metrics: nil,
                   views: views)
   
cons += NSLayoutConstraint
      .constraints(withVisualFormat: "V:[nextBtn(30)]",
                   options: [],
                   metrics: nil,
                   views: views)
   
// VFL设置居中 必须设置水平居中和垂直居中
cons += NSLayoutConstraint
      .constraints(withVisualFormat: "H:[textLabel]-(<=0)-[superview]",
                   options: .alignAllCenterY,
                   metrics: nil,
                   views: views)
   
cons += NSLayoutConstraint
      .constraints(withVisualFormat: "V:[textLabel]-(<=0)-[superview]",
                   options: .alignAllCenterX,
                   metrics: nil,
                   views: views)
addConstraints(cons)

Enjoy :)