SnapKit入門教程

閱讀本文大概須要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

  一、在Podfile文件中添加pod 'SnapKit', '~> 4.0.0'

  二、執行pod install

• Carthage

  一、 在Cartfile文件添加github "SnapKit/SnapKit" ~> 4.0.0

  二、執行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的基本用法，其餘的你們能夠查看它的文檔再詳細瞭解。若是你們在使用的時候遇到什麼問題能夠寫在下面的評論中，你們一塊兒研究！

官方文檔

• SnapKit Github地址
• SnapKit Document