Swift - 自动布局库SnapKit的使用详解1（配置、使用

(转载于http://www.hangge.com/blog/cache/detail_1097.html)

Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例）

为了适应各种屏幕尺寸，iOS 6后引入了自动布局（Auto Layout）的概念，通过使用各种 Constraint（约束）来实现页面自适应弹性布局。（想了解更多可查看我原来写的这篇文章：Swift - 使用Auto Layout和Size Classes实现页面自适应弹性布局）

在 StoryBoard 中使用约束实现自动布局很方便，但如果用纯代码来设置约束就很麻烦了。这里向大家推荐一个好用的第三方布局库：SnapKit（其前身是 Masonry，一个OC版的布局库）

（本文代码已升级至Swift3）

1，SnapKit介绍

SnapKit是一个优秀的第三方自适应布局库，它可以让iOS、OS X应用更简单地实现自动布局（Auto Layout）。

GtiHub地址：https://github.com/SnapKit/SnapKit

2，SnapKit配置

（1）将下载下来的SnapKit项目的 SnapKit.xcodeproj 拖进自己的项目目录当中

原文:Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例）

（2）在 工程 -> General -> Embedded Binaries 中点击加号，添加SnapKit库到项目中来

原文:Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例）

3，先看一个简单的使用样例

在页面正中央放置一个100*100的正方形view

原文:Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例）

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)

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：

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等其他属性

这些属性直接设置常量值，表示他们相对于父容器的相对约束条件。比如我们将绿色方块放置橙色方块内部的右下角位置。

原文:Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例）

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)

}

}

}

当然也可以使用与其他视图的关系来添加约束。比如：下面绿色方块视图大小同上面橙色方块相同，下面视图与上面视图左侧平齐，下面视图顶部与上面视图底部平齐。

原文:Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例）

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

原文:Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例）

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。

原文:Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例）

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

下面将绿色视图的尺寸设置成橙色视图一半大小。

原文:Swift - 自动布局库SnapKit的使用详解1（配置、使用方法、样例）

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)

}

}

}

原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1097.html