SnapKit
文章系列:
(代码均已升级至Swift3)
Swift - 自动布局库SnapKit的使用详解1(配置、使用方法、样例) — 当前文章
Swift - 自动布局库SnapKit的使用详解2(约束的更新、移除、重做)
Swift - 自动布局库SnapKit的使用详解3(约束优先级,约束做动画)
Swift - 自动布局库SnapKit的使用详解4(样例1:实现一个登录页面)
Swift - 自动布局库SnapKit的使用详解5(样例2:实现一个计算器界面)
Swift - 自动布局库SnapKit的使用详解1(配置、使用方法、样例) — 当前文章
Swift - 自动布局库SnapKit的使用详解2(约束的更新、移除、重做)
Swift - 自动布局库SnapKit的使用详解3(约束优先级,约束做动画)
Swift - 自动布局库SnapKit的使用详解4(样例1:实现一个登录页面)
Swift - 自动布局库SnapKit的使用详解5(样例2:实现一个计算器界面)
为了适应各种屏幕尺寸,iOS 6后引入了自动布局(Auto Layout)的概念,通过使用各种 Constraint(约束)来实现页面自适应弹性布局。(想了解更多可查看我原来写的这篇文章:Swift - 使用Auto Layout和Size Classes实现页面自适应弹性布局)
在
StoryBoard 中使用约束实现自动布局很方便,但如果用纯代码来设置约束就很麻烦了。这里向大家推荐一个好用的第三方布局库:
SnapKit(其前身是
Masonry,一个OC版的布局库)
1,SnapKit介绍
1,SnapKit介绍
SnapKit是一个优秀的第三方自适应布局库,它可以让iOS、OS X应用更简单地实现自动布局(Auto Layout)。
GtiHub地址: https://github.com/SnapKit/SnapKit
GtiHub地址: https://github.com/SnapKit/SnapKit
2,SnapKit配置
(1)将下载下来的SnapKit项目的
SnapKit.xcodeproj 拖进自己的项目目录当中
(2)在 工程 -> General -> Embedded Binaries 中点击加号,添加SnapKit库到项目中来
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
import
UIKit
import
SnapKit
class
ViewController
:
UIViewController
{
lazy
var
box =
UIView
()
override
func
viewDidLoad() {
super
.viewDidLoad()
box.backgroundColor =
UIColor
.orange
self
.view.addSubview(box)
box.snp.makeConstraints { (make) ->
Void
in
make.width.equalTo(100)
make.height.equalTo(100)
make.center.equalTo(
self
.view)
}
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
import
UIKit
import
SnapKit
class
ViewController
:
UIViewController
{
lazy
var
box =
UIView
()
override
func
viewDidLoad() {
super
.viewDidLoad()
box.backgroundColor =
UIColor
.orange
self
.view.addSubview(box)
box.snp.makeConstraints { (make) ->
Void
in
make.width.height.equalTo(100)
make.center.equalTo(
self
.view)
}
}
}
|
4,SnapKit的使用方法
通过 snp.makeConstraints 方法给view添加约束,约束有几种,分别是边距,宽,高,左上右下距离,基准线。同时,添加过约束后可以有修正,修正有位移修正( inset、 offset)和倍率修正( multipliedBy)
语法一般是: make.equalTo 或 make.greaterThanOrEqualTo 或 make.lessThanOrEqualTo + 倍数和位移修正。
.equalTo:等于
.lessThanOrEqualTo:小于等于
.greaterThanOrEqualTo:大于等于
注意: 使用
snp.makeConstraints 方法的元素必须事先添加到父元素的中,例如:
self.view.addSubview(view)
.equalTo:等于
.lessThanOrEqualTo:小于等于
.greaterThanOrEqualTo:大于等于
5,约束条件参数支持如下三种类型:
(1)视图属性( ViewAttribute)
视图属性(ViewAttribute) | 布局属性(NSLayoutAttribute) |
view.snp.left | NSLayoutAttribute.Left |
view.snp.right | NSLayoutAttribute.Right |
view.snp.top | NSLayoutAttribute.Top |
view.snp.bottom | NSLayoutAttribute.Bottom |
view.snp.leading | NSLayoutAttribute.Leading |
view.snp.trailing | NSLayoutAttribute.Trailing |
view.snp.width | NSLayoutAttribute.Width |
view.snp.height | NSLayoutAttribute.Height |
view.snp.centerX | NSLayoutAttribute.CenterX |
view.snp.centerY | NSLayoutAttribute.CenterY |
view.snp.baseline | NSLayoutAttribute.Baseline |
1
2
|
//使当前视图对象的中心x坐标小于等于视图view2的左边的x坐标
make.centerX.lessThanOrEqualTo(view2.snp.left)
|
(2)视图关系( UIView/ NSView)
比如想让view.left 大于等于 label.left:
这个其实等价于:
(3)严格检测( Strick Checks)
比如将宽度和高度属性设置为常量值:
6,给视图的各种属性设置约束
(1)width、height属性
自动布局允许宽度、高度设置为常量值。
(2) left、right、top、centerX、centerY等其他属性
这些属性直接设置常量值,表示他们相对于父容器的相对约束条件。比如我们将绿色方块放置橙色方块内部的右下角位置。
1
|
make.left.greaterThanOrEqualTo(label)
|
1
|
make.left.greaterThanOrEqualTo(label.snp.left)
|
(3)严格检测( Strick Checks)
比如将宽度和高度属性设置为常量值:
1
2
3
|
make.height.equalTo(20)
make.width.equalTo(20)
make.top.equalTo(42)
|
6,给视图的各种属性设置约束
(1)width、height属性
自动布局允许宽度、高度设置为常量值。
1
2
3
4
|
make.height.equalTo(20)
make.width.equalTo(
self
.buttonSize.width)
//当前视图与label的顶部齐平
make.top.equalTo(label.snp.top)
|
(2) left、right、top、centerX、centerY等其他属性
这些属性直接设置常量值,表示他们相对于父容器的相对约束条件。比如我们将绿色方块放置橙色方块内部的右下角位置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
import
UIKit
import
SnapKit
class
ViewController
:
UIViewController
{
//外部方块
lazy
var
boxOutter =
UIView
()
//内部方块
lazy
var
boxInner =
UIView
()
override
func
viewDidLoad() {
super
.viewDidLoad()
boxOutter.backgroundColor =
UIColor
.orange
self
.view.addSubview(boxOutter)
boxInner.backgroundColor =
UIColor
.green
boxOutter.addSubview(boxInner)
boxOutter.snp.makeConstraints { (make) ->
Void
in
make.width.height.equalTo(200)
make.center.equalTo(
self
.view)
}
boxInner.snp.makeConstraints { (make) ->
Void
in
make.width.height.equalTo(100)
make.right.equalTo(0)
make.bottom.equalTo(0)
}
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
import
UIKit
import
SnapKit
class
ViewController
:
UIViewController
{
//方块1
lazy
var
box1 =
UIView
()
//方块2
lazy
var
box2 =
UIView
()
override
func
viewDidLoad() {
super
.viewDidLoad()
box1.backgroundColor =
UIColor
.orange
self
.view.addSubview(box1)
box2.backgroundColor =
UIColor
.green
self
.view.addSubview(box2)
box1.snp.makeConstraints { (make) ->
Void
in
make.left.equalTo(20)
make.right.equalTo(-20)
make.height.equalTo(40)
make.top.equalTo(20)
}
box2.snp.makeConstraints { (make) ->
Void
in
make.width.height.equalTo(box1)
make.left.equalTo(box1)
//等同于 make.left.equalTo(box1.snp.left)
make.top.equalTo(box1.snp.bottom)
}
}
}
|
(3)edges(边缘)
1
2
|
//让当前视图 的 上下左右(top,left,bottom,right) 等于 view2
make.edges.equalTo(view2)
|
(4)size(尺寸)
1
2
|
//当前视图宽高 >= titleLabel
make.size.greaterThanOrEqualTo(titleLabel)
|
(5)center(中心)
1
2
|
//当前视图与 button1中心相同 (centerX 和 centerY)
make.center.equalTo(button1)
|
7,位移修正与倍率修正
(1)内位移修正:inset
比如下图中绿色视图view,它距离父视图上、左、下、右边距分别是10、15、20、25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
import
UIKit
import
SnapKit
class
ViewController
:
UIViewController
{
//外部方块
lazy
var
boxOutter =
UIView
()
//内部方块
lazy
var
boxInner =
UIView
()
override
func
viewDidLoad() {
super
.viewDidLoad()
boxOutter.backgroundColor =
UIColor
.orange
self
.view.addSubview(boxOutter)
boxInner.backgroundColor =
UIColor
.green
boxOutter.addSubview(boxInner)
boxOutter.snp.makeConstraints { (make) ->
Void
in
make.width.height.equalTo(200)
make.center.equalTo(
self
.view)
}
boxInner.snp.makeConstraints { (make) ->
Void
in
make.edges.equalTo(boxOutter).inset(
UIEdgeInsetsMake
(10, 15, 20, 25))
}
}
}
|
1
2
3
4
|
make.top.equalTo(boxOutter).offset(10)
make.left.equalTo(boxOutter).offset(15)
make.bottom.equalTo(boxOutter).offset(-20)
make.right.equalTo(boxOutter).offset(-25)
|
(2)外位移修正:offset
下面让绿色视图比橙色视图宽度、高度均减50。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
import
UIKit
import
SnapKit
class
ViewController
:
UIViewController
{
//外部方块
lazy
var
boxOutter =
UIView
()
//内部方块
lazy
var
boxInner =
UIView
()
override
func
viewDidLoad() {
super
.viewDidLoad()
boxOutter.backgroundColor =
UIColor
.orange
self
.view.addSubview(boxOutter)
boxInner.backgroundColor =
UIColor
.green
boxOutter.addSubview(boxInner)
boxOutter.snp.makeConstraints { (make) ->
Void
in
make.width.height.equalTo(200)
make.center.equalTo(
self
.view)
}
boxInner.snp.makeConstraints { (make) ->
Void
in
make.center.equalTo(boxOutter)
// make width = superview.width - 50, height = superview.height - 50
make.size.equalTo(boxOutter).offset(-50)
}
}
}
|
(3)倍率修正:multipliedBy
下面将绿色视图的尺寸设置成橙色视图一半大小。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
import
UIKit
import
SnapKit
class
ViewController
:
UIViewController
{
//外部方块
lazy
var
boxOutter =
UIView
()
//内部方块
lazy
var
boxInner =
UIView
()
override
func
viewDidLoad() {
super
.viewDidLoad()
boxOutter.backgroundColor =
UIColor
.orange
self
.view.addSubview(boxOutter)
boxInner.backgroundColor =
UIColor
.green
boxOutter.addSubview(boxInner)
boxOutter.snp.makeConstraints { (make) ->
Void
in
make.width.height.equalTo(200)
make.center.equalTo(
self
.view)
}
boxInner.snp.makeConstraints { (make) ->
Void
in
make.center.equalTo(boxOutter)
// make width = superview.width / 2, height = superview.height / 2
make.size.equalTo(boxOutter).multipliedBy(0.5)
}
}
}
|