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
的基本使用。也基本可以搞定项目中的页面布局,孰能生巧,在做项目中应尽可能的使用代码约束进行页面布局。