Swift套件 - SnapKit 使用說明

Photo by SnapKit DOCS

前言：

在編寫project的過程中，autoLayout 是不可獲缺的技能， 然後 xcode 原生的 autoLayout 在編寫的過程太過冗長，可讀性明顯也有些不足。

而今天介紹的 SnapKit 解決了原生 constraints 的缺點，使用上也非常簡單、容易上手，在閱讀上也更為簡短方便，大大增加了 code 的可讀性。

接下來就開始介紹 SnapKit

如果想看完整資料，可以直接參考作者文件。

• SnapKit 的 github：
  https://github.com/SnapKit/SnapKit

安裝：

這裡先只介紹CocoaPods安裝，其他方式可到作者文件中查看。

CocoaPods

1. 初始化：

$ pod init

2. 開啟 Pofile 資料進行修改：

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '10.0'
use_frameworks!  
target '<Your Target Name>' do
    pod 'SnapKit', '~> 5.0.1' 
end

3. 最後進行安裝：

$ pod install

用法：

跟原生 constraints 比較下，SnapKit 顯得更容易使用，可讀性更佳。

• 以下是原生寫法：

使用原生 contraints 設定元件會看起來又臭又長，可讀性較差。
如果改用SnapKit 的話，看起來會乾淨很多。

• 以下為 SnapKit 寫法：

是不是瞬間縮短了許多呢！
不僅大大縮短，還提高了約束(constraints)的可讀性，然後 SnapKit 還很貼心地替使用者省略了一些關鍵步驟：

• superview部分提供了預設。
  完整寫法： make.top.equalTo(view.snp.top).offset(20)
  因為約束的方向是一樣的，可寫成 make.top.equalTo(view).offset(20)
• 確保在所有元件上都調用 setTranslatesAutoresizingMaskIntoConstraints(false)

如果覺得不夠簡短的話，還有更簡單的寫法噢！

或者

世間並非平等，Constraints 也是如此

.equalTo 相當於 NSLayoutRelation.Equal

.lessThanOrEqualTo 相當於 NSLayoutRelation.LessThanOrEqual

.greaterThanOrEqualTo 相當於 NSLayoutRelation.GreaterThanOrEqual

SnapKit 提供了三種相等性的約束。

如果想要寬介於200~400之間的約束：

// width >= 200 && width <= 400 
make.width.greaterThanOrEqualTo(200) make.width.lessThanOrEqualTo(400)

除此之外，約束不允許將對齊屬性(如left，right，centerY等)設為固定值，SnapKit 會自動將其轉變為相對於 superview 的約束。

// 建立 view.left <= view.superview.left + 10 make.left.lessThanOrEqualTo(10)

學習使用 prioritize

.priority 允許你指定優先權

Priorities 可以放在約束的後面，如下：

make.top.equalTo(label.snp.top).priority(600)

也可以使用捷徑：.low, .medium, .high, .required.

make.top.equalTo(label.snp.top).priority(.medium)

簡單，簡單，再簡單

SnapKit 提供了三種常用的簡寫。

edges(top, bottom, left ,right)

// make 的 top, left, bottom, right 與 view2 相等
make.edges.equalTo(view2)
// top = superview.top + 5
// left = superview.left + 10, 
// bottom = superview.bottom - 15
// right = superview.right - 20
make.edges.equalTo(superview).inset(UIEdgeInsets(top: 5, left: 10, bottom: 15, right: 20))

size(width, height)

// make 的 width and height 大於或等於 titleLabel 
make.size.greaterThanOrEqualTo(titleLabel)  
// width = superview.width + 100
// height = superview.height + 100 
make.size.equalTo(superview).offset(100)

center(centerX, centerY)

// make 的 centerX 和 centerY 等於 button1 
make.center.equalTo(button1)

把握美好的時光

-簡單修改與刪除

有時需要去修改或刪除現有的約束。SnapKit 提供了三種方法來更新約束(constraints)。

1. References

透過一個儲存屬性(var)來存放約束(constraints)的值，再對其進行 update ，更新 constraints 的值。

2. snp.updateConstraints

如果想要更新整個約束的值數值，可以使用方法 snp.updateConstraints

3. snp.remakeConstraints

snp.remakeConstraints 是個很好用的方法！！
用法跟 snp.makeConstraints 一樣， snp.remakeConstraints 強大的地方在於它會自動移除其他額外的約束，在製作動畫時很好用！！

Snap view to safeAreaLayoutGuide

SnapKit 也可以使用安全範圍。

輕鬆 Debug

.labeled 允許你指定約束標籤(constraint labels)

Label 可以寫在約束後面：

button.snp.makeConstraints { (make) -> Void in make.top.equalTo(otherView).labeled("buttonViewTopConstraint") 
}

結果若無法滿足約束，日誌(logs)會使用約束標籤(constraint labels)來清楚標識哪些約束需要注意：

"<SnapKit.LayoutConstraint:buttonViewTopConstraint@SignUpViewController.swift#311 UIView:0x7fd98491e4c0.leading 
== UIView:0x7fd983633880.leading>
"