阅读本文大概需要 20min, 读完你可以了解 SnapKit 的一些基础用法和一些非常棒的特性! Enjoy it!
介绍
它的 Github 官方介绍语如下:
SnapKit is a DSL to make Auto Layout easy on both iOS and OS X.
SnapKit 提供一种更加简易的方式来应用自动布局
安装
SnapKit 支持三种安装方式: Cocodpods,Carthage, 手动拖入
Cocoapods
1, 在 Podfile 文件中添加
pod 'SnapKit', '~> 4.0.0'
2, 执行 pod install
Carthage
1, 在 Cartfile 文件添加
github "SnapKit/SnapKit" ~> 4.0.0
2, 执行 carthage update
手动拖入项目
基础使用
OK, 现在项目已经集成了 SnapKit, 下面来看一下基础的用法!
首先在使用的文件中导入 SnapKitimport SnapKit
注意: 在使用 SnapKit 之前一定要把相关子控件先添加到父 View; 在使用 SnapKit 之前一定要把相关子控件先添加到父 View; 在使用 SnapKit 之前一定要把相关子控件先添加到父 View;
相关场景
子控件在父 view 居中, 示例代码如下:
- let button = UIButton(type: .custom)
- button.backgroundColor = UIColor.blue
- button.addTarget(self, action: #selector(buttonClick), for: .touchUpInside)
- view.addSubview(button)
- button.snp.makeConstraints { (make) in
- make.size.equalTo(CGSize(width: 100, height: 100))
- make.center.equalTo(view)
- }
上面讲的是一个简单的一个 view 中有一个子控件的情况, 下面来看一下一个 view 中的两个子控件如何布置约束.
subView1 头部距离 subView2 底部 30
- let button = UIButton(type: .custom)
- button.backgroundColor = UIColor.blue
- button.addTarget(self, action: #selector(buttonClick), for: .touchUpInside)
- bgView.addSubview(button)
- button.snp.makeConstraints { (make) in
- make.size.equalTo(CGSize(width: 100, height: 100))
- make.center.equalTo(bgView)
- }
- let bottomLabel = UILabel(frame: .zero)
- bottomLabel.text = "bottomLabel"
- bottomLabel.backgroundColor = UIColor.orange
- bgView.addSubview(bottomLabel)
- bottomLabel.snp.makeConstraints { (make) in
- make.top.equalTo(button.snp.bottom).offset(30) // 注意此处 button 后面要加 snp, 否则是不起作用的
- make.size.equalTo(CGSize(width: 200, height: 50))
- make.centerX.equalTo(button)
- }
说明: 使用
make.center.equalTo(bgView)
与
make.center.equalTo(bgView.snp.center)
是等效的, 也就是说当你省略的时候, SnapKit 默认是你前面写的 layout, 但是当你两个不一致时, 比如你是下面的 view 距离上面的 view 的 bottom 偏移量是 30 的时候, 就不能省略着写了. 注意: 如果你的项目中你对 view 添加了 bottom 的 extension, 你可能会把
make.top.equalTo(button.snp.bottom).offset(30)
写成
make.top.equalTo(button.bottom).offset(30)
, 这也是不对的, 必须添加前面的 snp.
到这里, 相信大家对 SnapKit 的基础用法有了一定的了解. 其实如果大家使用过 https://github.com/SnapKit/Masonry 的话对 SnapKit 的用法一定不会陌生, 因为这两个库是一个团队出品的(开源万岁)!
下面来了解一下一些非常棒的特性.
非常棒的特性
设置一个子 view 的四边内边距据父 view 都为 20, 下面为代码示例:
- button.snp.makeConstraints { (make) in
- make.edges.equalTo(bgView).inset(UIEdgeInsetsMake(20, 20, 20, 20))
- }
- // 上面代码和注释代码等同
- // box.snp.makeConstraints { (make) -> Void in
- // make.top.equalTo(superview).offset(20)
- // make.left.equalTo(superview).offset(20)
- // make.bottom.equalTo(superview).offset(-20)
- // make.right.equalTo(superview).offset(-20)
- // }
SnapKit 不仅仅可以设置等于, 它也可以设置小于等于, 大于等于和设定一个范围; 并且它还支持给 left/right/centerY 等属性设置上面的用法. 下面是代码示例:
- let fzhLabel = UILabel()
- fzhLabel.text = "Dota2"
- fzhLabel.textColor = UIColor.black
- fzhLabel.backgroundColor = UIColor.blue
- fzhLabel.font = UIFont.systemFont(ofSize: 18)
- bgView.addSubview(fzhLabel)
- fzhLabel.snp.makeConstraints { (make) in
- make.left.top.equalTo(bgView).offset(20)
- make.height.equalTo(20)
- // 设置 label 的最大宽度为 200
- make.width.lessThanOrEqualTo(200)
- }
- // 设置 label 的最小宽度为 200
- make.width.greaterThanOrEqualTo(200)
- // 设置 label 最小宽度为 50, 最大宽度为 100
- make.width.greaterThanOrEqualTo(50)
- make.width.lessThanOrEqualTo(100)
- // 设置 view 的 left 小于等于该 view 的父 view 的左 + 10(view.left <= view.superview.left + 10)
- make.left.lessThanOrEqualTo(10)
SnapKit 也支持设置优先级, 它可以放在约束链的最后, 它既可以设置具体的值也可以使用枚举 (.low, .medium, .high, .require) 下面是代码示例:
- make.left.equalTo(label.snp.left).priority(500)
- make.left.equalTo(label.snp.left).priority(.high)
注意事项
该库支持 iOS 的最低版本是 iOS8, 所以 iOS8 以下是无法使用的
在使用 SnapKit 之前一定要把相关子控件先添加到父 View
SnapKit 不支持 IB
SnapKit 支持
make.xxx.xxx.equalTo(bgView).offset(20)
的用法, 如:
make.left.top.equalTo(bgView).offset(20)(该控件的左和上距 bgview 左和上偏移量为 20)
结语
到这里本文就结束了, 本文只是大概的讲了一下 SnapKit 的基本用法, 其他的大家可以查看它的文档再详细了解. 如果大家在使用的时候遇到什么问题可以写在下面的评论中, 大家一起研究!
官方文档
SnapKit Github 地址 https://github.com/SnapKit/SnapKit
SnapKit Document http://snapkit.io/docs/
来源: https://juejin.im/post/5b07d59a6fb9a07ace594dc9