迟到的Swift入门 - SnapKit

SnapKit教程

摘录：www.jianshu.com/p/2bad53a2a…

1.SnapKit基本操作

1.引用第三方（cocoapods）

// 检索SnapKit版本情况
pod search SnapKit

// 项目未出初始化创建Pod文件
pod init

// 运行Pod文件
pod install
pod install --verbose --no-repo-update

// 更新Pod文件中依赖版本
pod update
pod update --verbose --no-repo-update

2.SnapKit基本使用

2.0基本操作：

1.设置边距

make.left.equalToSuperview().offset(10)
make.left.equalTo(10)
make.left.equalTo(view1.snp.left).offset(10)

2.设置视图的大小（width，height）

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

2.1基本操作例子：

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

import UIKit
import SnapKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
     
        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)       // 位于当前视图的中心
        }
      	// 简洁写法
      	testView.snp.makeConstraints { (make) in
            make.width.height.equalTo(100)    // 链式语法直接定义宽高
            make.center.equalToSuperview()    // 直接在父视图居中
        }
    }
}

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

import UIKit
import SnapKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
     
         // 黑色视图作为父视图
         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）
         }
        // 简洁写法
      	view2.snp.makeConstraints { (make) in
            make.edges.equalToSuperview().inset(UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20))
         }
    }
}

3.dividedBy、multipliedBy

dividedBy、multipliedBy两者的用法都是一样的，dividedBy(x)是除以x，multipliedBy(x)是乘以x。

class FirstViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let box = UIView()
        box.backgroundColor = UIColor.blue
        self.view.addSubview(box)
        box.snp.makeConstraints { (make) in
            // 在父视图居中显示
            make.center.equalToSuperview()
            // 宽度等于父视图宽度的1/2
            make.width.equalToSuperview().dividedBy(2)
            // 高度等于父视图高度的0.25
            make.height.equalToSuperview().multipliedBy(0.25)
        }
    }
}

4.offset (偏移量，位移)

class FirstViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let box = UIView()
        box.backgroundColor = UIColor.blue
        self.view.addSubview(box)
        box.snp.makeConstraints { (make) in
            // 距离父视图上边50dp
            make.top.equalToSuperview().offset(100)
            // 距离父视图左边50dp
            make.left.equalToSuperview().offset(50)
            // 距离父视图下边50dp
            make.bottom.equalToSuperview().offset(-100)
            // 距离父视图右边50dp
            make.right.equalToSuperview().offset(-50)
            // 更加简单的写法，下面一行代码的效果和上面4行代码一样
            // make.edges.equalToSuperview().inset(UIEdgeInsets(top: 100,left: 50,bottom: 100,right: 50))
        }
    }
}

5.topLayoutGuide、bottomLayoutGuide、safeAreaLayoutGuide

topLayoutGuide、bottomLayoutGuide在iOS 11.0 被弃用了，但是这里还是介绍一下这两者的用法，之所以被废弃是因为iPhone X之后推出的SafeArea概念，所以建议使用 safeAreaLayoutGuide。

class FirstViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let box1 = UIView()
        box1.backgroundColor = UIColor.blue
        self.view.addSubview(box1)
        box1.snp.makeConstraints { (make) in
            make.size.equalTo(100)
        }
        
        let box2 = UIView()
        box2.backgroundColor = UIColor.red
        self.view.addSubview(box2)
        box2.snp.makeConstraints { (make) in
            make.size.equalTo(100)
            make.right.equalToSuperview().offset(0)
            // bottomLayoutGuide 已经被弃用
            // make.top.equalTo(topLayoutGuide.snp.bottom)
            // 建议使用 safeAreaLayoutGuide
            make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top)
            
        }
        
        let box3 = UIView()
        box3.backgroundColor = UIColor.yellow
        self.view.addSubview(box3)
        box3.snp.makeConstraints { (make) in
            make.size.equalTo(100)
            make.bottom.equalToSuperview().offset(0)
        }

        let box4 = UIView()
        box4.backgroundColor = UIColor.black
        self.view.addSubview(box4)
        box4.snp.makeConstraints { (make) in
            make.size.equalTo(100)
            make.right.equalToSuperview().offset(0)
            // bottomLayoutGuide 已经被弃用
            // make.bottom.equalTo(bottomLayoutGuide.snp.top)
            // 建议使用 safeAreaLayoutGuide
            make.bottom.equalTo(self.view.safeAreaLayoutGuide.snp.bottom)
        }
    }
}

6.priority 优先级用法

SnapKit一共提供了4种优先级，优先级顺序是：required high medium low。

class FirstViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let box1 = UIView()
        box1.backgroundColor = UIColor.blue
        self.view.addSubview(box1)
        box1.snp.makeConstraints { (make) in
            // 父视图居中的优先级是medium，距离父视图右边10的优先级是high,距离父视图上边10的优先级是low，所以运行的结果是“垂直居中，距离父视图右边10”
            make.center.equalToSuperview().priority(.medium)
            make.right.equalToSuperview().offset(10).priority(.high)
            make.top.equalToSuperview().offset(10).priority(.low)
            // 运行结果是宽高等于100
            make.size.equalTo(100).priority(.medium)
            make.size.equalTo(200).priority(.low)
        }
    }
}

​