學(xué)習(xí)一下第三方的約束管理擎析。其中SnapKit適用于Swift躏嚎,Masonry適用于OC。
1坡脐、Github地址:
SnapKit Github地址
2、安裝:
1.直接下載:在Github上下載SnapKit房揭,找到SnapKit.framework备闲,然后放到自己的工程中即可。SnapKit.framework文件包括:
2.Cocoapods安裝
在項目的Podfile下添加如下信息
在終端中執(zhí)行:pod install(注意路徑是當(dāng)前項目中Podfile鎖在路徑)
platform :ios, '8.0'
use_frameworks!
target '你的工程名稱' do
pod 'SnapKit'
end
SnapKit本身不支持IOS7崩溪,如果希望SnapKit支持IOS7版本浅役,需要在自己的項目的 Build Setting 中搜索的 OTHER_SWIFT_FLAGS,在其下面添加 -DSNAPKIT_DEPLOYMENT_LEGACY伶唯,如下圖所示:(否則會報錯>跫取)
在使用之前,先看一下Snapkit官方文檔翻譯
通用模式:
swiftlet box = UIView()superview.addSubview(box)box.snp_makeConstraints { (make) -> Void in //解釋:box對象相對于父視圖上邊距為20像素 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當(dāng)中 X軸向右方向;Y軸向下方向 為正
縮寫形式:
swift
let box = UIView()
superview.addSubview(box)
box.snp_makeConstraints { (make) -> Void in
//注釋:box距離父視圖上下左右邊距都是20像素
make.edges.equalTo(superview).inset(UIEdgeInsetsMake(20, 20, 20, 20))
}
SnapKit還可以通過下面幾個步驟來實現(xiàn)縮短代碼和提高代碼可讀性
- 確定最佳的普通視圖安裝限制瞪讼。
- 保持軌道的約束安裝所以他們可以很容易地被刪除后钧椰。
- 在所有適當(dāng)?shù)囊晥D上確保
- setTranslatesAutoresizingMaskIntoConstraints(false)屬性被設(shè)置
SnapKit中并不局限于 等于(equalTo)
- equalTo:等于
- lessThanOrEqualTo 小于等于
- greaterThanOrEqualTo 大于等于
1.視圖屬性
//當(dāng)前視圖對象的中心x坐標(biāo)小于等于view視圖的左邊的x左邊
make.centerX.lessThanOrEqualTo(view.snp_left)
2.視圖關(guān)系(UIView/NSView)
如果你想 視圖 view.left 大于等于 label.left ,執(zhí)行下面代碼:
swift
//下面這兩者的約束是完全一樣的
make.left.greaterThanOrEqualTo(label)
make.left.greaterThanOrEqualTo(label.snp_left)
3.嚴(yán)格檢測(Strick Checks)
自動布局允許將寬度和高度屬性設(shè)置為常量值符欠。如果你想對視圖設(shè)置一個最小和最大寬度嫡霞,你必須先給他一個初始的平等塊
swift
//設(shè)置寬度>= 200 && <= 400
你也可以用其他的約束和結(jié)構(gòu)來建立你的約束,像這樣:
swift
make.top.equalTo(42)
make.height.equalTo(20)
make.size.equalTo(CGSizeMake(50,100))
make.edges.equalTo(UIEdgeInsetsMake(10,0,10,0))
make.left.equalTo(view).offset(UIEdgeInsetsMake(10,0,10,0))
4.學(xué)習(xí)優(yōu)先級
- priority: 允許您指定一個確切的優(yōu)先級
- priorityHigh: 高優(yōu)先級 等價于 UILayoutPriority.DefaultHigh
- priorityMedium:中優(yōu)先級
- priorityLow:低優(yōu)先級 UILayoutPriority.DefaultLow
優(yōu)先級可以放在約束鏈的結(jié)束處希柿,例如
swift
//當(dāng)前視圖的左邊>=label的底部 低優(yōu)先級
make.left.greaterThanOrEqualTo(label.snp_left).priorityLow()
//當(dāng)前視圖與label的頂部齊平诊沪,優(yōu)先級:600
make.top.equalTo(label.snp_top).priority(600)
5.組成,組成曾撤,組成
SnapKit 也可以提供一些便利的方法來同時創(chuàng)建多約束
1.edges(邊緣)
swift
//讓當(dāng)前視圖 的 上下左右(top,left,bottom,right) 等于 view2
make.edges.equalTo(view2)
// make top = superview.top + 5; left = superview.left +10
// bottom = superview.bottom -15; right = superview.right - 20
make.edges.equalTo(superView).inset(UIEdgeInsetsMake(5,10,15,20))
2.size(尺寸)
swift
//當(dāng)前視圖寬高 >= titleLabel
make.size.greaterThanOrEqualTo(titleLabel)
//make width = superview.width + 100; height = superview.height -50
//即 當(dāng)前視圖寬 = 父視圖 + 100端姚,高 = 父視圖.高 - 50
make.size.equalTo(superview).offset(CGSizeMake(100, -50))
3.center(中心)
swift
//當(dāng)前視圖與 button1中心相同 (centerX 和 centerY)
make.center.equalTo(button1)
//make centerX = superview.centerX - 5; centerY = superview.centerY +10
make.center.equalTo(superview).offset(CGPointMake(-5,10))
可以串連視圖屬性增加可讀性
swift
//所有邊緣除了top都等于父視圖, top為20
make.left.right.bottom.equalTo(superview)
make.top.equalTo(20)
6.Hold on for dear life
有時候你需要修改已經(jīng)存在的約束為了移動或者移除、代替約束挤悉。在SnapKit 有一些不同的方法更新約束
1.引用(References)
你可以通過將約束的結(jié)果賦值給一個局部變量或一個類屬性來保持一個特定的約束的引用渐裸。您還可以將多個約束引用存儲在數(shù)組中。
swift
var topConstraint: Constraint? = nil
//當(dāng)制作約束時
view1.snp_makeConstraints{ (make) -> Void in
self.topConstrain = make.top.equalTo(superview).offset(padding.top).constraint
make.left.equalTo(superview).offset(padding.left)
// 然后接下來你可以這樣
self.topConstraint.uninstall()
//或者如果你想要更新約束
self.topConstraint.updateOffset(5)
2.snp_updateConstraints(更新約束)
如果你僅僅想更新一個常數(shù)給一個約束装悲,你可以使用方法snp_updateConstraints來代替snp_makeConstraints
swift
//這是一個蘋果官方推薦的添加和更新約束的地方
//這個方法在響應(yīng)<code>setNeedsUpdateConstraints</code>多次調(diào)用
//這個方法可以倍UIKit調(diào)用
override func updateConstraints() {
self.growingButton.snp_updateConstraints{ (make) -> Void in
make.center.equalTo(self);
make.width.equalTo(self.buttonSize.width).priorityLow()
make.height.equalTo(self.buttonSize.height).priorityLow()
make.width.lessThanOrEqualTo(self)
make.height.lessThanOrEqualTo(self)
}
//父類可以調(diào)用
super.updateConstraints()
}
3.snp_remakeConstraints(重做約束)
snp_remakeConstraints與snp_makeConstraints類似昏鹃,但是首先會先清除掉所有被SnapKit設(shè)置的約束
swift
func changeButtonPosition() {
self.button.snp_remakeConstraints{ (make) -> Void in
make.size.equalTo(self.buttonSize)
if topLeft {
make.top.left.equalTo(10)
} else {
make.bottom.equalTo(self.view).offset(-10)
make.right.equalTo(self.view).offset(-10)
}
}
}
3、引用頭文件:import SnapKit
4诀诊、開始使用
案例一:要求:無論在什么尺寸的設(shè)備上(包括橫豎屏切換)洞渤,紅色view都居中顯示。
( Swift剛學(xué)沒多久swift畏梆,可能不太規(guī)范)
// 防止block中的循環(huán)引用
weak var weakSelf : ViewController? = self
// 初始化view并設(shè)置背景
var view : UIView? = UIView.init()
view!.backgroundColor = UIColor.redColor();
self.view.addSubview(view!);
// 使用mas_makeConstraints添加約束
view!.snp_makeConstraints { (make) -> Void in
// 添加大小約束(make就是要添加約束的控件view)
make.size.equalTo(CGSizeMake(100, 100))
// 添加居中約束(居中方式與self相同)
make.center.equalTo(weakSelf!.view)
}
案例二:
要求:無論在什么尺寸的設(shè)備上(包括橫豎屏切換)您宪,黑色view的左奈懒、上邊距奠涌、大小都不變;灰色view的右邊距不變,寬磷杏、高溜畅、上邊距黑色view相等
// 初始化黑色view
var blackView : UIView? = UIView.init()
blackView!.backgroundColor = UIColor.blackColor()
self.view.addSubview(blackView!)
// 給黑色view添加約束
blackView!.snp_makeConstraints{ (make) -> Void in
// 添加大小約束
make.size.equalTo(CGSizeMake(100, 100))
// 添加左、上邊距約束(左极祸、上約束都是20)(也可以分開寫)
make.left.top.equalTo(20)
}
// 初始化灰色view
var grayView : UIView? = UIView.init()
grayView!.backgroundColor = UIColor.grayColor()
self.view.addSubview(grayView!)
// 給灰色view添加約束
grayView!.snp_makeConstraints{ (make) -> Void in
// 大小慈格、上邊距約束與黑色view相同
make.size.equalTo(blackView!)
make.top.equalTo(blackView!)
// 添加右邊距約束(這里的間距是有方向性的,左遥金、上邊距約束為正數(shù)浴捆,右、下邊距約束為負(fù)數(shù))
make.right.equalTo(-20)
}
在上面的案例中稿械,涉及以下內(nèi)容:
在SnapKit中选泻,make.left.top.equalTo(20);等價于make.left.equalTo(20)和make.top.equalTo(20);
案例三:
要求:有兩個view,黑色與灰色;黑色view的左页眯、上梯捕、右邊距均為20,下邊距灰色view 20窝撵,寬度自適應(yīng)傀顾,高度與灰色view平分整個界面;灰色view寬度為黑色view的一半(即左邊以中線起始)碌奉,右短曾、下邊距與黑色view相同,高度與黑色view相同赐劣。
// 初始化黑色view
var blackView : UIView? = UIView.init()
blackView!.backgroundColor = UIColor.blackColor()
self.view.addSubview(blackView!)
// 給黑色view添加約束
blackView!.snp_makeConstraints{ (make) -> Void in
// 添加左错英、上邊距約束
make.left.top.equalTo(20)
// 添加右邊距約束
make.right.equalTo(-20)
}
// 初始化灰色view
var grayView : UIView? = UIView.init()
grayView!.backgroundColor = UIColor.grayColor()
self.view.addSubview(grayView!)
// 給灰色view添加約束
grayView!.snp_makeConstraints{ (make) -> Void in
// 添加右、下邊距約束
make.bottom.right.equalTo(-20)
// 添加高度約束隆豹,讓高度等于blackview
make.height.equalTo(blackView!)
// 添加上邊距約束(上邊距 = 黑色view的下邊框 + 偏移量20)
make.top.equalTo(blackView!.snp_bottom).offset(20)
// 添加左邊距(左邊距 = 父容器縱軸中心 + 偏移量0)
make.left.equalTo(weakSelf!.view.snp_centerX).offset(0)
}
案例四:
要求:修改部分約束椭岩,例如:當(dāng)鍵盤擋住輸入框時,輸入框自動向上彈到鍵盤上方璃赡。
實現(xiàn):
這里需要使用到SnapKit的另外一個方法mas_updateConstraints判哥。這個方法用于更新控件約束。具體的實現(xiàn)方式可以下載Demo來看碉考,這里只貼出鍵盤彈出時的處理代碼:
// 修改下邊距約束
grayView!.snp_updateConstraints{ (make) -> Void in
// 添加右塌计、下邊距約束
make.bottom.equalTo(-100)
}
// 更新約束
self.view.layoutIfNeeded()