简介
SnapKit是Masonry Auto Layout DSL的Swift版本，是一款轻量级的布局框架，使用了更良好的语法封装了AutoLayout。SnapKit支持iOS和OS X.
cocoapods 依赖
pod 'SnapKit', '~> 5.0.0'
运行CocoaPods的如下命令
pod install
至此，不出意外我们已经把SnaKit集成到项目中了，下面开始使用
Snapkit的布局使用
- 实现一个宽高为100，居于当前视图的中心的视图布局，示例代码如下
let testView = UIView()
testView.backgroundColor = UIColor.cyan
view.addSubview(testView)
testView.snp.makeConstraints { (make) in
make.width.equalTo(100) // 宽为100
make.height.equalTo(100) // 高为100
make.center.equalTo(view) // 位于当前视图的中心
//更简洁的语法如下
//make.width.height.equalTo(100) // 链式语法直接定义宽高
//make.center.equalToSuperview() // 直接在父视图居中
}
效果图
image.png
- View2位于View1内， view2位于View1的中心， 并且距离View的边距的距离都为20
// 黑色视图作为父视图
let view1 = UIView()
view1.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
view1.center = view.center
view1.backgroundColor = UIColor.black
view.addSubview(view1)
// 测试视图
let view2 = UIView()
view2.backgroundColor = UIColor.magenta
view1.addSubview(view2)
view2.snp.makeConstraints { (make) in
make.top.equalToSuperview().offset(20) // 当前视图的顶部距离父视图的顶部：20（父视图顶部+20）
make.left.equalToSuperview().offset(20) // 当前视图的左边距离父视图的左边：20（父视图左边+20）
make.bottom.equalToSuperview().offset(-20) // 当前视图的底部距离父视图的底部：-20（父视图底部-20）
make.right.equalToSuperview().offset(-20) // 当前视图的右边距离父视图的右边：-20（父视图右边-20）
//更简洁的写法
//make.edges.equalToSuperview().inset(UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20))
}
效果图
image.png
- 布局一个视图view2， 让它的水平中心线小于等于另一个视图view2的左边，可以这样布局
// 黑色视图作为父视图
let view1 = UIView()
view1.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
view1.center = view.center
view1.backgroundColor = UIColor.black
view.addSubview(view1)
// 测试视图
let view2 = UIView()
view2.backgroundColor = UIColor.magenta
view1.addSubview(view2)
view2.snp.makeConstraints { (make) in
// 让顶部距离view1的底部为10的距离
make.top.equalTo(view1.snp.bottom).offset(10)
// 设置宽、高
make.width.height.equalTo(100)
// 水平中心线<=view1的左边
make.centerX.lessThanOrEqualTo(view1.snp.leading)
}
效果图
image.png
Snapkit布局的灵活性
- Snapkit布局灵活性很强， 我们看下面的例子, 他们的效果是一样的
ake.left.equalToSuperview().offset(10)
make.left.equalTo(10)
make.left.equalTo(view1.snp.left).offset(10)
- 设置视图的大小（width，height）,他们效果是一样的
make.width.height.equalTo(100)
//或
make.width.equalTo(100)
make.height.equalTo(100)
//或
make.size.equalTo(CGSize(width: 100, height: 100))
Snapkit更新约束
- makeConstraints 制作约束（约束可能会大于四个）可能是编译错误
- updateConstraints 更新约束，覆盖已有约束
- remakeConstraints 重做约束
现在，我们通过UIButton的点击事件来证明一下制作约束makeConstraints和updateConstraints以及remakeConstraints具体的区别在哪里？
原本效果
override func viewDidLoad() {
super.viewDidLoad()
redView.backgroundColor = UIColor.red
view.addSubview(redView)
redView.snp.makeConstraints { (make) in
make.width.equalTo(100)
make.height.equalTo(150)
make.centerX.equalToSuperview()
}
let btn = UIButton(type: .custom)
btn.backgroundColor = UIColor.yellow
btn.frame = CGRect(x: 100, y: 200, width: 60, height: 30)
btn.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
view.addSubview(btn)
}
// 约束
@objc func buttonAction() {
redView.snp.makeConstraints { (make) in
make.width.height.equalTo(20)
make.top.equalTo(300)
}
}
image.png
makeConstraints
override func viewDidLoad() {
super.viewDidLoad()
redView.backgroundColor = UIColor.red
view.addSubview(redView)
redView.snp.makeConstraints { (make) in
make.width.equalTo(100)
make.height.equalTo(150)
make.centerX.equalToSuperview()
}
let btn = UIButton(type: .custom)
btn.backgroundColor = UIColor.yellow
btn.frame = CGRect(x: 100, y: 200, width: 60, height: 30)
btn.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
view.addSubview(btn)
}
// 约束
@objc func buttonAction() {
redView.snp.makeConstraints { (make) in
make.width.height.equalTo(20)
make.top.equalTo(300)
}
}
效果图
image.png
image.png
上面我们创建了redView，添加了三个约束宽高以及水平居中，高度默认为0（设置top约束会导致makeConstraints中修改top约束崩溃，所以这里不设），我们点击buttonAction 为redView添加top约束以及修改宽高变为20，我们发现制作约束起作用了，见效果图。见图2 我们在原来的约束基础上又添加了多余的约束，也就是说，约束从3个变成了6个，这样就产生了约束不明确，进而导致snapkit的警告（见图4）， 这样布局显然是不可取的，在项目中这样做极其危险，甚至可能会导致异常奔溃。
updateConstraints
现在， 我们该将点击事件中的约束布局从makeConstraints改变成updateConstraints来试试两者有什么区别
override func viewDidLoad() {
super.viewDidLoad()
redView.backgroundColor = UIColor.red
view.addSubview(redView)
redView.snp.makeConstraints { (make) in
make.width.equalTo(100)
make.height.equalTo(150)
make.top.equalTo(50)
make.centerX.equalToSuperview()
}
let btn = UIButton(type: .custom)
btn.backgroundColor = UIColor.yellow
btn.frame = CGRect(x: 100, y: 200, width: 60, height: 30)
btn.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
view.addSubview(btn)
}
// 约束
@objc func buttonAction() {
print("约束")
redView.snp.updateConstraints { (make) in
make.width.height.equalTo(20)
make.top.equalTo(300)
make.centerX.equalToSuperview()
}
}
效果图
image.png
image.png
发现没有，在将makeConstraints改变成updateConstraints之后，约束还是4个，snapkit没有报警告，点击事件中的width、height、top全部起了作用，而这就是两者的本质区别：makeConstraints是制作约束，在原来的基础上再添加另外的约束，也就是画蛇添足，约束增加，视图布局就有不确定性，从而有些约束起作用，有些不起作用（如上面的top），snapkit报警告！！！而updateConstraints是更新约束，改变原有约束，约束不会增加，没经过updateConstraints处理的保持原有约束，经过处理就更新约束，约束不会减少，snapkit不会产生警告，这是正常标准的更新约束的正确方式！！！
remakeConstraints
重做约束的本质就是：去掉已有的所有约束， 重新做约束，记住，是做约束， 也就是说， 使用了remakeConstraints后，重做的约束必须要能确定相应视图的大小和位置, 之前makeConstraints的约束已经不会存在了，完全销毁！！！
override func viewDidLoad() {
super.viewDidLoad()
redView.backgroundColor = UIColor.red
view.addSubview(redView)
redView.snp.makeConstraints { (make) in
make.width.equalTo(100)
make.height.equalTo(150)
make.top.equalTo(50)
make.centerX.equalToSuperview()
}
let btn = UIButton(type: .custom)
btn.backgroundColor = UIColor.yellow
btn.frame = CGRect(x: 100, y: 200, width: 60, height: 30)
btn.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
view.addSubview(btn)
}
@objc func buttonAction() {
print("约束")
// 注意这里是 remakeConstraints
redView.snp.remakeConstraints { (make) in
make.width.height.equalTo(20)
make.top.equalTo(300)
}
}
效果图
image.png
我们看到， redView重做了约束， 之前的约束不起任何作用，由于它在重做约束后只有 3 个约束分别是 width、height、top, 但是这里有一个问题，就是这 3 个约束只能确定大小，无法确定视图的位置， 所以在水平方向上或者左右缺少一个布局条件， 故 redView整体视图的x紧靠左边（默认）
另外一些需要注意的
- 在描述 view 与 superview 关系时，应该使用 inset，而描述 view 与同一层级的其它 view 时，应该使用 offset。
container.addSubview(a)
container.addSubview(b)
a.snp.makeConstraints {
$0.top.equalToSuperview().inset(5)
$0.left.right.equalToSuperview().inset(15)
}
b.snp.makeConstraints {
$0.top.equalTo(a.snp.bottom).offset(5)
$0.left.right.equalToSuperview().inset(15)
$0.bottom.equalToSuperview().inset(5)
}
- UIEdgeInsets边距处理
同是 padding 但却分散去处理是一件很糟糕的事情，更好的方式是使用已有的抽象UIEdgeInsets
let containerInsets = UIEdgeInsets(top: 5, left: 15, bottom: 5, right:15)
container.addSubview(a)
container.addSubview(b)
a.snp.makeConstraints {
$0.top.left.right.equalToSuperview().inset(containerInsets)
}
b.snp.makeConstraints {
$0.top.equalTo(a.snp.bottom).offset(5)
$0.left.bottom.right.equalToSuperview().inset(containerInsets)
}
总结
从上述的小demo可以看到，使用SnapKit框架进行纯代码布局还是非常的简单。将上述布局会使用，并且懂得布局的原则和道理基本就可以完成大部分UI界面了。
