SnapKit 自动布局总结

Swift 中 SnapKit 框架就相当于 OC 中的 Masonry 框架，都是进行UI自动布局的。对于自动布局，在 StoryBoard 中可以通过设置约束实现，简单明了。但如果用纯代码来设置约束就很麻烦了，OC 中有Masonry，而 Swift 中有SnapKit。

1. SnapKit 可进行的操作

SnapKit 是一个需要自己导入的第三方库
https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FSnapKit%2FSnapKit

通过 snp.makeConstraints 方法给 view 添加约束的种类包括：边距，宽，高，左上右下距离，基准线。
同时，添加过约束后可以有修正，修正有位移修正（inset、offset）和倍率修正（multipliedBy）
语法一般是： make.equalTo 或 make.greaterThanOrEqualTo 或 make.lessThanOrEqualTo + 倍数和位移修正。
.equalTo：等于
.lessThanOrEqualTo：小于等于
.greaterThanOrEqualTo：大于等于

注： 使用 snp.makeConstraints 方法的视图必须事先就已经被添加到父视图中，例如：self.view.addSubview(view)

视图属性（ViewAttribute）	布局属性（NSLayoutAttribute）
view.snp.left	NSLayoutAttribute.Left
view.snp.right	NSLayoutAttribute.Right
view.snp.top	NSLayoutAttribute.Top
view.snp.bottom	NSLayoutAttribute.Bottom
view.snp.leading	NSLayoutAttribute.Leading
view.snp.trailing	NSLayoutAttribute.Trailing
view.snp.width	NSLayoutAttribute.Width
view.snp.height	NSLayoutAttribute.Height
view.snp.centerX	NSLayoutAttribute.CenterX
view.snp.centerY	NSLayoutAttribute.CenterY
view.snp.baseline	NSLayoutAttribute.Baseline

2. 场景示例

• 在view中心添加一个长宽200的view

box1.snp.makeConstraints({ (make) in
  make.width.height.equalTo(200)
  make.center.equalTo(self.view)
})

• 在红色view里，添加一个子view，距离顶部30px

box1.backgroundColor = UIColor.red
box2.backgroundColor = UIColor.green
view.addSubview(box1)
box1.addSubview(box2)

box1.snp.makeConstraints({ (make) in
  make.width.height.equalTo(200)
  make.center.equalTo(self.view)
})
box2.snp.makeConstraints({ (make) in
  make.top.equalTo(box1.snp.top).offset(30)       //距离box1 30距离
  make.left.equalTo(box1)             //等效于 make.left.equalTo(box1.snp.left)
  make.right.equalTo(box1)
  make.height.equalTo(30)
})

• 添加两个view，高宽相等，绿色的紧靠红色上下排列

box1.backgroundColor = UIColor.red
box2.backgroundColor = UIColor.green
view.addSubview(box1)
view.addSubview(box2)

box1.snp.makeConstraints({ (make) in     
  make.left.equalTo(20)      //距离左边20
  make.right.equalTo(-20)    //距离右边20，注意，这里要为负的20
  make.top.equalTo(100)
  make.height.equalTo(50)
})
box2.snp.makeConstraints({ (make) in
  make.top.equalTo(box1.snp.bottom)      //顶部靠着box1底部
  make.left.right.height.equalTo(box1)    //左右高和box1对齐
})

• 添加两个view，高宽相等，左右排列

box1.backgroundColor = UIColor.red
box2.backgroundColor = UIColor.green
view.addSubview(box1)
view.addSubview(box2)

box1.snp.makeConstraints({ (make) in
  make.width.height.equalTo(100)
  make.left.equalTo(view)
  make.top.equalTo(100)
})
box2.snp.makeConstraints({ (make) in
  make.size.equalTo(box1)             //大小等于box1
  make.top.equalTo(box1)              //顶部和box1对齐
  make.right.equalTo(view)
})

• 添加两个view，绿色大小为红色一半，上下排列

box1.backgroundColor = UIColor.red
box2.backgroundColor = UIColor.green
view.addSubview(box1)
view.addSubview(box2)
box1.snp.makeConstraints({ (make) in
  make.size.equalTo(CGSize(width: 200, height: 200))
  make.centerX.equalTo(view)
  make.centerY.equalTo(view).offset(-100)     //中心点为view中心偏上100距离
})
box2.snp.makeConstraints({ (make) in
  make.size.equalTo(box1).multipliedBy(0.5)   //大小为box1一半
  make.centerX.equalTo(box1)
  make.top.equalTo(box1.snp.bottom).offset(20)
})

• 添加两个view，绿色在红色里面，内边距设置为依次10、20、30、40

box1.backgroundColor = UIColor.red
box2.backgroundColor = UIColor.green
view.addSubview(box1)
box1.addSubview(box2)
box1.snp.makeConstraints({ (make) in
  make.width.height.equalTo(200)
  make.center.equalTo(self.view)
})
box2.snp.makeConstraints({ (make) in
  //内距box1边距分别为10、20、30、40
  make.edges.equalTo(box1).inset(UIEdgeInsetsMake(10, 20, 30, 40))
})

原文地址：
https://www.cnblogs.com/yajunLi/p/6599468.html