SnapKit教程
摘录：https://www.jianshu.com/p/2bad53a2a180
https://www.jianshu.com/p/332b816cd3e4
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)
}
}
}
网友评论