iOS 布局（一）纯代码AutoLayout布局

iOS 用纯代码布局一般有两种方式，一种是通过设置frame布局，一种是采用AutoLayout技术，通过设置约束（Constraint）布局。
设置约束可以使用NSLayoutConstraintAPI和VFL（Visual Format Language，可视化格式语言），AutoLayout代码布局比较繁琐，好在一些第三方组件简化了很多步骤，比如SnapKit、PureLayout等。本文只介绍不使用第三方库的AutoLayout布局，使用第三方库的方法将在iOS 布局（二）通过第三方库纯代码AutoLayout布局介绍。

使用NSLayoutConstraint

Xcode

要实现上图的效果，纯代码是这样的。

func addViewByLayoutConstraints() {
  let bgView: UIView = UIView()
  bgView.backgroundColor = .groupTableViewBackground
  self.view.addSubview(bgView)
  bgView.translatesAutoresizingMaskIntoConstraints = false
  let top = NSLayoutConstraint.init(item: bgView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1.0, constant: 60)
  self.view.addConstraint(top)
  let left = NSLayoutConstraint.init(item: bgView, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1.0, constant: 16)
  self.view.addConstraint(left)
  let right = NSLayoutConstraint.init(item: bgView, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1.0, constant: -16)
  self.view.addConstraint(right)
  let height = NSLayoutConstraint.init(item: bgView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 60)
  bgView.addConstraint(height)

  let nameLabel = UILabel.init()
  nameLabel.translatesAutoresizingMaskIntoConstraints = false
  nameLabel.text = "Gavin Yang";
  bgView.addSubview(nameLabel)
  let labelTop = NSLayoutConstraint.init(item: nameLabel, attribute: .top, relatedBy: .equal, toItem: bgView, attribute: .top, multiplier: 1.0, constant: 0)
  bgView.addConstraint(labelTop)
  let labelLeft = NSLayoutConstraint.init(item: nameLabel, attribute: .leading, relatedBy: .equal, toItem: bgView, attribute: .leading, multiplier: 1.0, constant: 8)
  bgView.addConstraint(labelLeft)
  let labelBottom = NSLayoutConstraint.init(item: nameLabel, attribute: .bottom, relatedBy: .equal, toItem: bgView, attribute: .bottom, multiplier: 1.0, constant: 0)
  bgView.addConstraint(labelBottom)
  
  let addressLabel = UILabel.init()
  addressLabel.translatesAutoresizingMaskIntoConstraints = false
  addressLabel.text = "China";
  addressLabel.textColor = .darkGray
  bgView.addSubview(addressLabel)
  let addressTop = NSLayoutConstraint.init(item: addressLabel, attribute: .top, relatedBy: .equal, toItem: bgView, attribute: .top, multiplier: 1.0, constant: 0)
  bgView.addConstraint(addressTop)
  let addressLeft = NSLayoutConstraint.init(item: addressLabel, attribute: .leading, relatedBy: .equal, toItem: nameLabel, attribute: .trailing, multiplier: 1.0, constant: 20)
  bgView.addConstraint(addressLeft)
  let addressBottom = NSLayoutConstraint.init(item: addressLabel, attribute: .bottom, relatedBy: .equal, toItem: bgView, attribute: .bottom, multiplier: 1.0, constant: 0)
  bgView.addConstraint(addressBottom)
}

使用VFL

使用VFL代码会稍微简化一些。

func addViewByVFL() {
  let bgView = UIView()
  bgView.backgroundColor = .groupTableViewBackground
  bgView.translatesAutoresizingMaskIntoConstraints = false
  self.view .addSubview(bgView)
  self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-[bgView]-|", options: .directionLeadingToTrailing, metrics: nil, views: ["bgView":bgView]))
  self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-60-[bgView(60)]", options: .directionLeadingToTrailing, metrics: nil, views: ["bgView":bgView]))
  
  let nameLabel = UILabel()
  nameLabel.translatesAutoresizingMaskIntoConstraints = false
  nameLabel.text = "Gavin Yang";
  bgView.addSubview(nameLabel)

  let addressLabel = UILabel.init()
  addressLabel.translatesAutoresizingMaskIntoConstraints = false
  addressLabel.text = "China";
  addressLabel.textColor = .darkGray
  bgView.addSubview(addressLabel)

  bgView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-8-[nameLabel]-20-[addressLabel]", options: .directionLeadingToTrailing, metrics: nil, views: ["nameLabel":nameLabel,"addressLabel":addressLabel]))
  bgView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-[nameLabel]-|", options: .directionLeadingToTrailing, metrics: nil, views: ["nameLabel":nameLabel]))
  bgView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-[addressLabel]-|", options: .directionLeadingToTrailing, metrics: nil, views: ["addressLabel":addressLabel]))
}