Swift 约束框架 SnapKit 的使用

之前在用OC写工程时，为了适配机型，用的是Masonry来进行页面的自动布局。今天就来介绍一下Swift中用来进行页面自动布局的第三方库SnapKit。这个三方库的作者和Masonry是同一个人。@Robert Payne，接下来就开始介绍这个三方库的使用。

安装

这里只介绍用CocoaPods导入三方库。

Podfile文件

 platform :ios, '9.0'

def pods
    pod 'SnapKit'
end

target '工程名' do

  use_frameworks!
  pods

end

执行命令

pod install

开始使用

引用头文件

import SnapKit

这里主要用实例来展示SnapKit在用代码进行约束布局时的方便和灵活性。

• 首先创建一个与在视图中心且长宽都是200的View1。

        let view1 = UIView()
        view1.backgroundColor = UIColor.black
        self.view.addSubview(view1)
        view1.snp.makeConstraints {   
            $0.width.equalTo(200)
            $0.height.equalTo(200)
            $0.center.equalTo(self.view)
        }    

也可以更简洁的来写

        view1.snp.makeConstraints {
            $0.width.height.equalTo(200)
            $0.center.equalToSuperview()
        }

• 接下来创建一个View2，View2位于View1的中心，距离View1的各个边距都为40。

let view2 = UIView()
        view2.backgroundColor = UIColor.red
        view1.addSubview(view2)
        view2.snp.makeConstraints {
            $0.top.equalToSuperview().offset(40)
            $0.bottom.equalToSuperview().offset(-40)
            $0.left.equalToSuperview().offset(40)
            $0.right.equalToSuperview().offset(-40)
        }

更简洁的写法

 view2.snp.makeConstraints {
            $0.edges.equalToSuperview().inset(UIEdgeInsetsMake(40, 40, 40, 40))
        }

在SnapKit也有小于等于lessThanOrEqualTo和大于等于greaterThanOrEqualTo这样的约束，但是在实际工程中不常用到，它们都可以被equalTo代替。

SnapKit的布局具有灵活性，许多约束可以有不同的写法，这样我们就需要找到最简洁的写法来进行页面约束布局。

比如说：
我们设置控件的长和宽的约束可以这样

make.width.equalTo(100)
make.height.equalTo(100)

也可以这样

make.width.height.equalTo(100)

同样也可以这样

make.size.equalTo(CGSize(width: 100, height: 100))

当我们要设置一个控件距离它的父视图的各个边距的距离时可以这样约束

make.top.equalToSuperview().offset(40)
make.bottom.equalToSuperview().offset(-40)
make.left.equalToSuperview().offset(40)
make.right.equalToSuperview().offset(-40)

也可以这样约束

make.edges.equalToSuperview().inset(UIEdgeInsetsMake(40, 40, 40, 40))

所以SnapKit具有很高的灵活性，在使用它的时候也需要灵活的运用，尽量简洁。

更新约束

updateConstraints更新约束用实例来展示。

点击刷新按钮更新View的布局。

        let view1 = UIView()
        view1.backgroundColor = UIColor.black
        self.view.addSubview(view1)
        view1.snp.makeConstraints {
            $0.width.height.equalTo(200)
            $0.center.equalToSuperview()
        }
        
        but.frame = CGRect(x: 50, y: 100, width: 100, height: 50)
        but.backgroundColor = UIColor.red
        but.setTitle("刷新", for: .normal)
        but.rx.tap.subscribe({_ in
            view1.snp.updateConstraints({
                $0.width.equalTo(300)
            })
        }).disposed(by: disDiposeBag)
        self.view.addSubview(but)

其中的but.rx.tap.subscribe是RXSwift的内容，相当于button的点击事件。

updateConstraints可以单条约束进行更新，也可以多条约束进行更新。但记住这只是更新约束而不是重新定制约束。

效果图：

重做约束

remakeConstraints重做约束的本质是，去掉已有的所有约束，重新进行约定。也就是说remakeConstraints之后，之前的makeConstraints的所有约束都将不存在。这点很重要，在用remakeConstraints时需要清楚这一点，要给足约束，不要有缺漏。

最后

这些就是SnapKit的基本使用。也基本可以搞定项目中的页面布局，孰能生巧，在做项目中应尽可能的使用代码约束进行页面布局。