(轉(zhuǎn)載于http://www.hangge.com/blog/cache/detail_1097.html)
Swift - 自動布局庫SnapKit的使用詳解1（配置饿序、使用方法勉失、樣例）
為了適應各種屏幕尺寸，iOS 6后引入了自動布局（Auto Layout）的概念原探，通過使用各種 Constraint（約束）來實現(xiàn)頁面自適應彈性布局乱凿。（想了解更多可查看我原來寫的這篇文章：Swift - 使用Auto Layout和Size Classes實現(xiàn)頁面自適應彈性布局）
在 StoryBoard 中使用約束實現(xiàn)自動布局很方便，但如果用純代碼來設置約束就很麻煩了咽弦。這里向大家推薦一個好用的第三方布局庫：SnapKit（其前身是 Masonry徒蟆，一個OC版的布局庫）
（本文代碼已升級至Swift3）
1，SnapKit介紹
SnapKit是一個優(yōu)秀的第三方自適應布局庫型型，它可以讓iOS段审、OS X應用更簡單地實現(xiàn)自動布局（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 + 倍數(shù)和位移修正鸟缕。
.equalTo：等于
.lessThanOrEqualTo：小于等于
.greaterThanOrEqualTo：大于等于
注意： 使用 snp.makeConstraints 方法的元素必須事先添加到父元素的中，例如：self.view.addSubview(view)
5，約束條件參數(shù)支持如下三種類型：
（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等其他屬性
這些屬性直接設置常量值，表示他們相對于父容器的相對約束條件掩宜。比如我們將綠色方塊放置橙色方塊內(nèi)部的右下角位置蔫骂。
原文: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()
//內(nèi)部方塊
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）內(nèi)位移修正：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()
//內(nèi)部方塊
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()
//內(nèi)部方塊
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()
//內(nèi)部方塊
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? 轉(zhuǎn)載請保留原文鏈接：http://www.hangge.com/blog/cache/detail_1097.html
