Swift自动布局SnapKit的详细使用介绍

傷城~ 2022-04-13 04:19 993阅读 0赞

简介

SnapKit，一个经典的Swift版的第三方库，专门用于项目的自动布局，目前在github上的stars就高达9340颗星，这是一个不小的数字，亦足以证明它存在的非凡意义和作用。作者认为，在iOS开发（swift）中，它是用于项目最优秀的自动布局的必选库之一。它的作者仍然是写Objective-C的第三方库Masonry的大牛 - @Robert Payne，开门见山，本文将详细介绍介绍SnapKit的详细使用和安装，相信对于初入门该库的开发者或许会有一定的帮助，当然，鉴于作者能力有限，如有不足之处，欢迎指点和批评。也可以通过加作者创建的iOS(Swift)开发互助群交流和学习，群号QQ：558179558。

Snapkit的安装（CocoaPods)

环境配置要求：

  • iOS 8.0 / Mac OS X 10.11+
  • Xcode 8.0+
  • Swift 3.0+

安装

在已经安装CocoaPods的前提下， 即可以进行下列步骤。

  • 在你的项目工程里的Podfile文件里面添加

    source ‘https://github.com/CocoaPods/Specs.git‘

    platform :ios, ‘10.0’

    use_frameworks!

    target ‘这里是你的工程名称’ do

    1. pod 'SnapKit', '~> 3.0'

    end

  • 老生常谈，运行CocoaPods的如下命令

    pod install

到此，不出意外的话，你已经将SnapKit集成到你的项目中了。然后，就开始讲怎么使用它了。

Snapkit的布局使用

1、 实现一个宽高为100，居于当前视图的中心的视图布局，示例代码如下

  1. import UIKit
  2. import SnapKit
  4. class ViewController: UIViewController {
  5.     override func viewDidLoad() {
  6.         super.viewDidLoad()
  8.         let testView = UIView()
  9.         testView.backgroundColor = UIColor.cyan
  10.         view.addSubview(testView)
  11.         testView.snp.makeConstraints { (make) in
  12.             make.width.equalTo(100)         // 宽为100
  13.             make.height.equalTo(100)        // 高为100
  14.             make.center.equalTo(view)       // 位于当前视图的中心
  15.         }
  17.     }
  18. }

更简洁的写法可以

  1. import UIKit
  2. import SnapKit
  4. class ViewController: UIViewController {
  5.     override func viewDidLoad() {
  6.         super.viewDidLoad()
  8.         let testView = UIView()
  9.         testView.backgroundColor = UIColor.cyan
  10.         view.addSubview(testView)
  11.         testView.snp.makeConstraints { (make) in
  12.             make.width.height.equalTo(100)    // 链式语法直接定义宽高
  13.             make.center.equalToSuperview()    // 直接在父视图居中
  14.         }
  16.     }
  17. }

效果图

TestPicture1

2、View2位于View1内， view2位于View1的中心， 并且距离View的边距的距离都为20

  1. import UIKit
  2. import SnapKit
  4. class ViewController: UIViewController {
  5.     override func viewDidLoad() {
  6.         super.viewDidLoad()
  8.          // 黑色视图作为父视图
  9.          let view1 = UIView()
  10.          view1.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
  11.          view1.center = view.center
  12.          view1.backgroundColor = UIColor.black
  13.          view.addSubview(view1)
  15.          // 测试视图
  16.          let view2 = UIView()
  17.          view2.backgroundColor = UIColor.magenta
  18.          view1.addSubview(view2)
  19.          view2.snp.makeConstraints { (make) in
  20.               make.top.equalToSuperview().offset(20)      // 当前视图的顶部距离父视图的顶部：20（父视图顶部+20）
  21.               make.left.equalToSuperview().offset(20)     // 当前视图的左边距离父视图的左边：20（父视图左边+20）
  22.               make.bottom.equalToSuperview().offset(-20)  // 当前视图的底部距离父视图的底部：-20（父视图底部-20）
  23.               make.right.equalToSuperview().offset(-20)   // 当前视图的右边距离父视图的右边：-20（父视图右边-20）
  24.          }
  26.     }
  27. }

更简洁的写法

  1. import UIKit
  2. import SnapKit
  4. class ViewController: UIViewController {
  5.     override func viewDidLoad() {
  6.         super.viewDidLoad()
  8.          // 黑色视图作为父视图
  9.          let view1 = UIView()
  10.          view1.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
  11.          view1.center = view.center
  12.          view1.backgroundColor = UIColor.black
  13.          view.addSubview(view1)
  15.          // 测试视图
  16.          let view2 = UIView()
  17.          view2.backgroundColor = UIColor.magenta
  18.          view1.addSubview(view2)
  19.          view2.snp.makeConstraints { (make) in
  20.             make.edges.equalToSuperview().inset(UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20))
  21.          }
  23.     }
  24. }

效果图

TestPicture2

3、布局一个视图view2， 让它的水平中心线小于等于另一个视图view2的左边，可以这样布局

  1. import UIKit
  2. import SnapKit
  4. class ViewController: UIViewController {
  5.     override func viewDidLoad() {
  6.         super.viewDidLoad()
  8.          // 黑色视图作为父视图
  9.          let view1 = UIView()
  10.          view1.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
  11.          view1.center = view.center
  12.          view1.backgroundColor = UIColor.black
  13.          view.addSubview(view1)
  15.          // 测试视图
  16.          let view2 = UIView()
  17.          view2.backgroundColor = UIColor.magenta
  18.          view1.addSubview(view2)
  19.          view2.snp.makeConstraints { (make) in
  20.             // 让顶部距离view1的底部为10的距离
  21.             make.top.equalTo(view1.snp.bottom).offset(10)
  22.             // 设置宽、高
  23.             make.width.height.equalTo(100)
  24.             // 水平中心线<=view1的左边
  25.             make.centerX.lessThanOrEqualTo(view1.snp.leading)
  26.          }
  28.     }
  29. }

效果图

TestPicture

视图的属性说明

通过上面的大致简单布局我们对SnapKit有了一个基本的了解，那么， 它的布局属性是怎么来的呢？和原生的布局类有什么关联？ 下面看一个SnapKit的布局属性表

从表中，我们知道，Snapkit的布局属性都是源自于系统的NSLayoutAttribute，那么，NSLayoutAttribute是个什么呢？其实，它在swift中是一个枚举，内部列举了很多布局属性诸如top、left、leading、centerX等，Snapkit的布局属性与它们都存在一一的对应关系。

Snapkit 的 greaterThanOrEqualTo 属性

如果想让视图View2的左边>=父视图View1的左边， 这时我们就可以用到greaterThanOrEqualTo

  1. import UIKit
  2. import SnapKit
  4. class ViewController: UIViewController {
  5.     override func viewDidLoad() {
  6.         super.viewDidLoad()
  8.          // 黑色视图作为父视图
  9.          let view1 = UIView()
  10.          view1.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
  11.          view1.center = view.center
  12.          view1.backgroundColor = UIColor.black
  13.          view.addSubview(view1)
  15.          // 测试视图
  16.          let view2 = UIView()
  17.          view2.backgroundColor = UIColor.magenta
  18.          view1.addSubview(view2)
  19.          view2.snp.makeConstraints { (make) in
  20.             // 让顶部距离view1的底部为10的距离
  21.             make.top.equalTo(view1.snp.bottom).offset(10)
  22.             // 设置宽、高
  23.             make.width.height.equalTo(100)
  24.             // 水平中心线<=view1的左边
  25.             make.left.greaterThanOrEqualTo(view1)
  27.             // 或者, 和上面一行代码一样的效果
  28. //            make.left.greaterThanOrEqualTo(view1.snp.left)
  29.          }
  30.     }
  31. }

效果图

TestPicture

其实，greaterThanOrEqualTo这个属性有点多余，比如上面这行代码 make.left.greaterThanOrEqualTo(view1)， 我们可以换成 make.left.equalToSuperview()或make.left.equalTo(view1.snp.left)， 效果是一样的，也就是说，一般情况下 >=或 <=我们都可以直接用equalTo来代替！

SnapKit的greaterThanOrEqualTo和lessThanOrEqualTo联合使用

当我们想要让某个视图的width或height大于等于某个特定的值，小于等于某个特定的值的时候，一般而言，Snapkit会以greaterThanOrEqualTo为准，这里举一个width的例子，为了方便，这里指贴出了viewDidLoad中的代码（其他没必要）

  1. // 黑色视图作为父视图
  2.  let view1 = UIView()
  3.  view1.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
  4.  view1.center = view.center
  5.  view1.backgroundColor = UIColor.black
  6.  view.addSubview(view1)
  8.  // 测试视图
  9.  let view2 = UIView()
  10.  view2.backgroundColor = UIColor.magenta
  11.  view1.addSubview(view2)
  12.  view2.snp.makeConstraints { (make) in
  13.     make.width.lessThanOrEqualTo(300)
  14.     make.width.greaterThanOrEqualTo(200)
  15.     make.height.equalTo(100)
  16.     make.center.equalToSuperview()
  17.  }

接着，我们来看一下效果图

Test6

很明显，最后的宽度是以make.width.greaterThanOrEqualTo(200)为标准的，也可以这样的，在同时使用两者的情况下，greaterThanOrEqualTo的优先级略比lessThanOrEqualTo的优先级高。值得一提的是， 在上面的例子中，如果我们只设置make.width.lessThanOrEqualTo(300)，那么view2是不会显示出来的，因为view2不知道你要表达的是要显示多少，小于等于300，到底是100还是200呢？(这里指针对width和height）所以它不能确定这个约束的值，但是，如果我们单独设置make.width.greaterThanOrEqualTo(200)，那么就和上面的效果一样，因为它会以200为标准布局约束！

lessThanOrEqualTo的用于上、下、左、右

如果我们想要视图view2的左边 <= view1.left + 10, 那么就可以直接用到lessThanOrEqualTo布局了，看下面这个例子

  1. // 黑色视图作为父视图
  2.  let view1 = UIView()
  3.  view1.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
  4.  view1.center = view.center
  5.  view1.backgroundColor = UIColor.black
  6.  view.addSubview(view1)
  8.  // 测试视图
  9.  let view2 = UIView()
  10.  view2.backgroundColor = UIColor.magenta
  11.  view1.addSubview(view2)
  12.  view2.snp.makeConstraints { (make) in
  13.     make.left.lessThanOrEqualTo(20)     // <= 父视图的左边+20
  14.     make.right.equalTo(-40)             // = 父视图的右边-40
  15.     make.height.equalTo(100)
  16.     make.center.equalToSuperview()
  17.  }

效果图

Test7

Snapkit布局的灵活性

  • Snapkit布局灵活性很强， 我们看下面的例子, 他们的效果是一样的

    make.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))

  • 优先级(priority)

我们来看一下Snapkit的优先级设置， 优先级都是附加在约束链的末尾处，看下面的使用方法

  1. // 黑色视图作为父视图
  2. let view1 = UIView()
  3. view1.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
  4. view1.center = view.center
  5. view1.backgroundColor = UIColor.black
  6. view.addSubview(view1)
  8. // 测试视图
  9. let view2 = UIView()
  10. view2.backgroundColor = UIColor.magenta
  11. view1.addSubview(view2)
  12. view2.snp.makeConstraints { (make) in
  13.     make.width.equalTo(100).priority(666)
  14.     make.width.equalTo(250).priority(999)
  15.     make.height.equalTo(111)
  16.     make.center.equalToSuperview()
  17. }

效果图

priorityimage

从上面我们可以知道, 我们设置了两个优先级：make.width.equalTo(100).priority(666) 和make.width.equalTo(250).priority(999)， 那运行结果是一个哪个为准呢？显然是以优先级为 999的为准，因为 priority(999)>priotity(666)， 所以在使用Snapkit的过程中，有时我们可以使用优先级priority来设置我们的约束， 另外，值得一提的是，SnapKit的优先级最大值只能是 1000， 如果优先级的数值超过1000，则运行时就会Crash！这里要尤其注意。


  • 更新约束（引用约束）


我们可以通过保存某一个约束布局来更新相应的约束，或者保存一组约束布局到一个数组中更新约束， 具体看下面代码

  1. // 保存约束（引用约束）
  2. var updateConstraint: Constraint?
  4. override func viewDidLoad() {
  5.     super.viewDidLoad()
  7.     // 黑色视图作为父视图
  8.     let view1 = UIView()
  9.     view1.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
  10.     view1.center = view.center
  11.     view1.backgroundColor = UIColor.black
  12.     view.addSubview(view1)
  14.     // 测试视图
  15.     let view2 = UIView()
  16.     view2.backgroundColor = UIColor.magenta
  17.     view1.addSubview(view2)
  18.     view2.snp.makeConstraints { (make) in
  19.         make.width.height.equalTo(100)  // 宽高为100
  20.         self.updateConstraint = make.top.left.equalTo(10).constraint   // 距离父视图上、左为10
  21.     }
  23.     let updateButton = UIButton(type: .custom)
  24.     updateButton.backgroundColor = UIColor.brown
  25.     updateButton.frame = CGRect(x: 100, y: 80, width: 50, height: 30)
  26.     updateButton.setTitle("更新", for: .normal)
  27.     updateButton.addTarget(self, action: #selector(updateConstraintMethod), for: .touchUpInside)
  28.     view.addSubview(updateButton)
  29. }
  31. // 更新约束
  32. func updateConstraintMethod() {
  33.     self.updateConstraint?.update(offset: 50)   // 更新距离父视图上、左为50
  34. }

testgif1

  • 更新约束(snp.updateConstraints)

说起这个updateConstraints, 我也懵逼过，那么它到底有何作用呢？又怎么用呢？它和一开始就使用的makeConstraints又有什么明确的区别呢？请继续往下看

说明1：如果你这是更新某个约束或某几个约束的常量值，你就可以使用updateConstraints而不是makeConstraints。

说明2：这个也是苹果推荐用来添加或更新约束的方式

说明3：这个方法可以调用多次，会相应setNeedsUpdateConstraints, 在控制器中，可以写在override func updateViewConstraints()方法里面（当然也可以写在你想要什么时候更新的点击事件里面）

  1. import UIKit
  2. import SnapKit
  4. class ViewController: UIViewController {
  6.     lazy var blackView = UIView()
  8.     override func viewDidLoad() {
  9.         super.viewDidLoad()
  11.         blackView.backgroundColor = UIColor.black
  12.         view.addSubview(blackView)
  13.         blackView.snp.makeConstraints { (make) in
  15.             // 四个约束确定位置和大小
  16.             make.width.equalTo(100)
  17.             make.height.equalTo(150)
  18.             make.top.equalTo(10)
  19.             make.centerX.equalToSuperview()
  20.         }
  22.     }
  24.     override func updateViewConstraints() {
  26.         blackView.snp.updateConstraints { (make) in
  27.             // 更新距离父视图顶部的约束（从 10 ---> 300 ）
  28.             make.top.equalTo(300)
  29.         }
  31.         // 根据苹果，调用父类应该放在末尾
  32.         super.updateViewConstraints()
  33.     }
  34. }

注意: 从上面的代码中我们很明确地知道， blackView通过width、height、top、centerX确定了它本身的大小和位置， 但是， 在 run 出来之后，它的top改变了距离， 从 10 变成了 300，其他三个约束保持不变， 见下图效果：

test10

显而易见， 除了top约束， 其他都没有改变！ 也就是说，约束被更新（相当于系统升级一样，是一个道理）

现在，我们通过UIButton的点击事件来证明一下制作约束makeConstraints和updateConstraints具体的区别在哪里？

  1. lazy var blackView = UIView()
  3. override func viewDidLoad() {
  4.     super.viewDidLoad()
  6.     blackView.backgroundColor = UIColor.black
  7.     view.addSubview(blackView)
  8.     blackView.snp.makeConstraints { (make) in
  10.         make.width.equalTo(100)
  11.         make.height.equalTo(150)
  12.         make.top.equalTo(50)
  13.         make.centerX.equalToSuperview()
  14.     }
  16.     let btn = UIButton(type: .custom)
  17.     btn.backgroundColor = UIColor.brown
  18.     btn.frame = CGRect(x: 100, y: 200, width: 60, height: 30)
  19.     btn.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
  20.     view.addSubview(btn)
  22. }
  24. // 点击更新/制作约束
  25. func buttonAction() {
  27.     blackView.snp.makeConstraints { (make) in
  28.         make.width.height.equalTo(20)
  29.         make.top.equalTo(300)
  30.     }
  32. }

先看效果图

点击事件发生前(图1）：

test11

点击事件发生后（图2）

test12

图3

test14

图4

test13

上面，我们知道，视图 blackView一开始是由四个约束确定位置和大小，在点击事情响应后，我们又给 blackView制作（记住，是制作，而不是重做，两者有明确的区别）了3个约束，分别是 width、height、top, 那么这样做问题出现在哪里呢？ 第一， 点击事情发生前（图1）， 在点击事件发生后（见图2）， 我们发现，blackView的width、height约束改变了，但是 top却没有改变，还是原来的距离父视图顶部 50 的距离， 原因在于，我们在原来的约束基础上又添加了多余的约束， 也就是说，约束从4个变成了7个（见图3左边constraints）， 这样就产生了约束不明确，进而导致snapkit的警告（见图4）， 这样布局显然是不可取的，在项目中这样做极其危险，甚至可能会导致异常奔溃！！！！

现在， 我们该将点击事件中的约束布局从makeConstraints改变成updateConstraints来试试两者有什么区别(下面只添加了点击事件的代码，其他事重复的就不多此一举了）

  1. func buttonAction() {
  2.     // 注意这里是updateConstraints， 而不是makeConstraints
  3.     blackView.snp.updateConstraints { (make) in
  4.         make.width.height.equalTo(20)
  5.         make.top.equalTo(300)
  6.     }
  7.     print("这里试试snapkit有没有报警告")
  8. }

接着看点击事件后的效果图

图5

test5

图6

test6

图7

test7

发现没有，在将makeConstraints改变成updateConstraints之后，约束还是4个，snapkit没有报警告，点击事件中的width、height、top全部起了作用，而这就是两者的本质区别：makeConstraints是制作约束，在原来的基础上再添加另外的约束，也就是画蛇添足，约束增加，视图布局就有不确定性，从而有些约束起作用，有些不起作用（如上面的top），snapkit报警告！！！而updateConstraints是更新约束，改变原有约束，约束不会增加，没经过updateConstraints处理的保持原有约束，经过处理就更新约束，约束不会减少，snapkit不会产生警告，这是正常标准的更新约束的正确方式！！！


  • 重做约束（remakeConstraints）

重做约束的本质就是：去掉已有的所有约束， 重新做约束，记住，是做约束， 也就是说， 使用了remakeConstraints后，重做的约束必须要能确定相应视图的大小和位置, 之前makeConstraints的约束已经不会存在了，完全销毁！！！

  1. // 点击更新/制作约束
  2. func buttonAction() {
  4.     // 注意这里是 remakeConstraints
  5.     blackView.snp.remakeConstraints { (make) in
  6.         make.width.height.equalTo(20)
  7.         make.top.equalTo(300)
  8.     }
  10.     print("这里试试snapkit有没有报警告")
  11. }

链接：https://www.jianshu.com/p/2bad53a2a180

发表评论

表情：
评论列表 （有 0 条评论，993人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Swift filter函数介绍

    filter用于选择数组元素中满足某种条件的元素。 比如一个金额数组，筛选出金额大于30元素 先看一下传统实现： `var`  `filteredArray : [Int

    r囧r小猫r囧r小猫/ 0 赞/ 714 阅读