SnapKit 中文文件翻譯

HenryCheng發表於2019-03-04
SnapKit

SnapKit 地址
翻譯文件 github地址

要求

  • iOS 8.0+ / Mac OS X 10.11+ / tvOS 9.0+
  • Xcode 8.0+
  • Swift 3.0+

遷移指南

交流

  • 如果你需要幫助,使用  Stack Overflow 。(標籤 snapkit
  • 如果你想問一些簡單的問題,使用 Stack Overflow
  • 如果你發現一個 bug ,請使用 issue 。
  • 如果你有一個特別的需求, 請使用 issue 。
  • 如果你想貢獻一份自己的力量,你可以提交一個 pull 請求。

安裝

CocoaPods

CocoaPods 是第三方的管理庫。你可以使用下面的命令安裝:

$ gem install cocoapods
複製程式碼

SnapKit 3.0.0+ 需要 CocoaPods 版本在 1.1.0 以上

為了使用 CocoaPods 能把 SnapKit 完整的安裝到你的專案中,需要把下面內容加入到你的 Podfile 中:

source `https://github.com/CocoaPods/Specs.git`
platform :ios, `10.0`
use_frameworks!

target `<Your Target Name>` do
   pod `SnapKit`, `~> 3.0`
end
複製程式碼

然後,執行下面的命令:

$ pod install
複製程式碼

Carthage

Carthage 是一個會編譯每個依賴框架,然後提供二進位制檔案的去中心化依賴管理器。

你可以使用  Homebrew 用以下命令安裝 Carthage :

$ brew update
$ brew install carthage
複製程式碼

為了使用 Carthage 能把 SnapKit 完整的安裝到你的專案中,需要把下面內容加入到你的 Cartfile 中:

github "SnapKit/SnapKit" ~> 3.0
複製程式碼

執行 carthage update 編譯你的 framework ,然後把 SnapKit.framework拖進你的專案中。

Manually

如果你不喜歡上述的依賴管理,你可以手動地把 SnapKit 整合到你的專案中。

使用

SnapKit 設計的就是為了更簡單的使用。假設我們想佈局一個 box ,讓它到父檢視邊緣距離是 20pts

let box = UIView()
superview.addSubview(box)

box.snp.makeConstraints { (make) -> Void in 
    make.top.equalTo(superview).offset(20)
    make.left.equalTo(superview).offset(20)
    make.bottom.equalTo(superview).offset(-20) 
    make.right.equalTo(superview).offset(-20)
}

複製程式碼

或者更短:

let box = UIView()
superview.addSubview(box)

box.snp.makeConstraints { (make) -> Void in
    make.edges.equalTo(superview).inset(UIEdgeInsetsMake(20, 20, 20, 20))
}
複製程式碼

在這個過程中, SnapKit 不僅僅做了大大的縮短和增加了約束的可讀性,還處理了以下這幾個關鍵步驟:

  • 確定了最佳的父檢視來新增約束。
  • 追蹤約束,以便以後能簡單的移除。
  • 在適當的檢視上確保 setTranslatesAutoresizingMaskIntoConstraints(false) 的呼叫。

並不是所有的都只能用 equal

.equalTo 等同於 NSLayoutRelation.Equal
.lessThanOrEqualTo 等同於 NSLayoutRelation.LessThanOrEqual
.greaterThanOrEqualTo 等同於 NSLayoutRelation.GreaterThanOrEqual

以上是接受一個引數的約束,下面的這些中任意一個也都可以:

1. ViewAttribute
make.centerX.lessThanOrEqualTo(view2.snp.left)
複製程式碼
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.lastBaseline NSLayoutAttribute.lastBaseline
2. UIView/NSView

如果你想讓 view.left 大於或等於 label.left :

// these two constraints are exactly the same 這兩個約束是完全一樣的
make.left.greaterThanOrEqualTo(label)
make.left.greaterThanOrEqualTo(label.snp.left)
複製程式碼
3. Strict Checks

Auto Layout 允許你把寬高設定成一個常量。如果你想設定一個 view 寬度的最大值和最小值,你可以像下面這樣:

// width >= 200 && width <= 400
make.width.greaterThanOrEqualTo(200)
make.width.lessThanOrEqualTo(400)
複製程式碼

但是,像 left,right,centerY 等等這樣的對齊屬性, Auto Layout 是不允許你把它們設定成常量的。但是如果你把這些屬性設定成了常量,SnapKit 會把這些轉換成相對於父檢視的約束:

// creates view.left <= view.superview.left + 10
make.left.lessThanOrEqualTo(10)
複製程式碼

你也可以使用其他的方法構建你的約束,如下:

make.top.equalTo(42)
make.height.equalTo(20)
make.size.equalTo(CGSize(width: 50, height: 100))
make.edges.equalTo(UIEdgeInsetsMake(10, 0, 10, 0))
make.left.equalTo(view).offset(UIEdgeInsetsMake(10, 0, 10, 0))
複製程式碼

優先順序

.priority允許你來指定明確的優先順序

優先順序可以寫在約束鏈的末尾,如下:

make.top.equalTo(label.snp.top).priority(600)
複製程式碼

一些組合

SnapKit 還提供了一些便利的方法來同時建立多個約束。

edges
// make top, left, bottom, right equal 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))
複製程式碼
size
// make width and height greater than or equal to titleLabel
make.size.greaterThanOrEqualTo(titleLabel)

// make width = superview.width + 100, height = superview.height - 50
make.size.equalTo(superview).offset(CGSize(width: 100, height: -50))
複製程式碼
center
// make centerX and centerY = button1
make.center.equalTo(button1)

// make centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.center.equalTo(superview).offset(CGPoint(x: -5, y: 10))
複製程式碼

你也可以建立檢視的屬性鏈以增加可讀性:

// All edges but the top should equal those of the superview
make.left.right.bottom.equalTo(superview)
make.top.equalTo(otherView)
複製程式碼

更多的選擇

有時候為了動畫或者刪除、替換約束,你需要修改現有的約束。SnapKit 提供了一些不同的方法來更新約束。

1. References

你可以通過約束的 make 表示式將區域性變數或者類屬性的約束結果分配給一個指定的約束。你也可以通過將它們存在陣列中來引用多個約束。

var topConstraint: Constraint? = nil
...

// when making constraints
view1.snp.makeConstraints { (make) -> Void in 
  self.topConstraint = make.top.equalTo(superview).offset(padding.top).constraint 
  make.left.equalTo(superview).offset(padding.left)
}

...
// then later you can call
self.topConstraint.uninstall()

// or if you want to update the constraint
self.topConstraint.updateOffset(5)
複製程式碼
2. snp.updateConstraints

如果你只是想更新約束的值,你可以使用 snp.updateConstraints 方法來替代 snp.makeConstraints

// this is Apple`s recommended place for adding/updating constraints
// this method can get called multiple times in response to setNeedsUpdateConstraints
// which can be called by UIKit internally or in your code if you need to trigger an update to your constraints
override func updateConstraints() { 
    self.growingButton.snp.updateConstraints { (make) -> Void in 
        make.center.equalTo(self)
        make.width.equalTo(self.buttonSize.width).priority(250)  
        make.height.equalTo(self.buttonSize.height).priority(250)
        make.width.lessThanOrEqualTo(self) make.height.lessThanOrEqualTo(self) 
     } 

// according to Apple super should be called at end of method 
     super.updateConstraints()
}
複製程式碼
3. snp.remakeConstraints

snp.remakeConstraintssnp.makeConstraints 類似。不同的是,使用snp.remakeConstraints 需要先刪除 SnapKit 安裝的所有約束。

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) 
     }
  }
}
複製程式碼

相關文章