SnapKit入門教程

godiscoder發表於2018-05-31
APK

閱讀本文大概需要20min，讀完你可以瞭解SnapKit的一些基礎用法和一些非常棒的特性！Enjoy it！

介紹

它的Github官方介紹語如下： SnapKit is a DSL to make Auto Layout easy on both iOS and OS X. SnapKit 提供一種更加簡易的方式來應用自動佈局

安裝

SnapKit支援三種安裝方式：Cocodpods、Carthage、手動拖入

  • Cocoapods

    1、在Podfile檔案中新增pod 'SnapKit', '~> 4.0.0'

    2、執行pod install

  • Carthage

    1、 在Cartfile檔案新增github "SnapKit/SnapKit" ~> 4.0.0

    2、執行carthage update

  • 手動拖入專案

基礎使用

OK，現在專案已經整合了SnapKit,下面來看一下基礎的用法！

  • 首先在使用的檔案中匯入SnapKitimport SnapKit
  • 注意：在使用SnapKit之前一定要把相關子控制元件先新增到父View；在使用SnapKit之前一定要把相關子控制元件先新增到父View；在使用SnapKit之前一定要把相關子控制元件先新增到父View；

相關場景

  • 子控制元件在父view居中，示例程式碼如下:
    let button = UIButton(type: .custom)
    button.backgroundColor = UIColor.blue
    button.addTarget(self, action: #selector(buttonClick), for: .touchUpInside)
    view.addSubview(button)
    button.snp.makeConstraints { (make) in
        make.size.equalTo(CGSize(width: 100, height: 100))
        make.center.equalTo(view)
    }
複製程式碼

上面講的是一個簡單的一個view中有一個子控制元件的情況，下面來看一下一個view中的兩個子控制元件如何佈置約束。

  • subView1頭部距離subView2底部30
let button = UIButton(type: .custom)
    button.backgroundColor = UIColor.blue
    button.addTarget(self, action: #selector(buttonClick), for: .touchUpInside)
    bgView.addSubview(button)
    button.snp.makeConstraints { (make) in
        make.size.equalTo(CGSize(width: 100, height: 100))
        make.center.equalTo(bgView)
    }
        
    let bottomLabel = UILabel(frame: .zero)
    bottomLabel.text = "bottomLabel"
    bottomLabel.backgroundColor = UIColor.orange
    bgView.addSubview(bottomLabel)
    bottomLabel.snp.makeConstraints { (make) in
        make.top.equalTo(button.snp.bottom).offset(30) //注意此處button後面要加snp，否則是不起作用的
        make.size.equalTo(CGSize(width: 200, height: 50))
        make.centerX.equalTo(button)
    }
複製程式碼

說明： 使用make.center.equalTo(bgView)與make.center.equalTo(bgView.snp.center)是等效的，也就是說當你省略的時候，SnapKit預設是你前面寫的layout，但是當你兩個不一致時，比如你是下面的view距離上面的view的bottom偏移量是30的時候，就不能省略著寫了。注意：如果你的專案中你對view新增了bottom的extension，你可能會把make.top.equalTo(button.snp.bottom).offset(30)寫成make.top.equalTo(button.bottom).offset(30),這也是不對的，必須新增前面的snp。

到這裡，相信大家對SnapKit的基礎用法有了一定的瞭解。其實如果大家使用過Masonry的話對SnapKit的用法一定不會陌生，因為這兩個庫是一個團隊出品的(開源萬歲)！

下面來了解一下一些非常棒的特性。

非常棒的特性

  • 設定一個子view的四邊內邊距據父view都為20，下面為程式碼示例：
button.snp.makeConstraints { (make) in
    make.edges.equalTo(bgView).inset(UIEdgeInsetsMake(20, 20, 20, 20))
    }

//上面程式碼和註釋程式碼等同    
//        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)
//        }

複製程式碼
  • SnapKit不僅僅可以設定等於，它也可以設定小於等於、大於等於和設定一個範圍； 並且它還支援給left/right/centerY等屬性設定上面的用法。 下面是程式碼示例：
    let fzhLabel = UILabel()
    fzhLabel.text = "Dota2"
    fzhLabel.textColor = UIColor.black
    fzhLabel.backgroundColor = UIColor.blue
    fzhLabel.font = UIFont.systemFont(ofSize: 18)
    bgView.addSubview(fzhLabel)

    fzhLabel.snp.makeConstraints { (make) in
        make.left.top.equalTo(bgView).offset(20)
        make.height.equalTo(20)
        //設定label的最大寬度為200
        make.width.lessThanOrEqualTo(200)
}
//設定label的最小寬度為200
make.width.greaterThanOrEqualTo(200)
//設定label最小寬度為50，最大寬度為100
make.width.greaterThanOrEqualTo(50)
make.width.lessThanOrEqualTo(100)
//設定view的left小於等於該view的父view的左 + 10（view.left <= view.superview.left + 10）
make.left.lessThanOrEqualTo(10)
複製程式碼
  • SnapKit也支援設定優先順序，它可以放在約束鏈的最後，它既可以設定具體的值也可以使用列舉（.low, .medium, .high, .require）下面是程式碼示例:
make.left.equalTo(label.snp.left).priority(500)
make.left.equalTo(label.snp.left).priority(.high)
複製程式碼

注意事項

  • 該庫支援iOS的最低版本是iOS8，所以iOS8以下是無法使用的
  • 在使用SnapKit之前一定要把相關子控制元件先新增到父View
  • SnapKit不支援IB
  • SnapKit支援make.xxx.xxx.equalTo(bgView).offset(20)的用法，如:make.left.top.equalTo(bgView).offset(20)(該控制元件的左和上距bgview左和上偏移量為20)

結語

到這裡本文就結束了，本文只是大概的講了一下SnapKit的基本用法，其他的大家可以檢視它的文件再詳細瞭解。如果大家在使用的時候遇到什麼問題可以寫在下面的評論中，大家一起研究！

官方文件

相關文章