iOS SnapKit自動布局使用詳解（Swift版Masonry）

對於自動布局：

我們在 StoryBoard 中可以使用約束實現，簡單明了，但如果用純代碼來設置約束就很麻煩了

OC里面，我們常用的有Masonry，SDAutoLayout

Swift里，我們有SnapKit：GitHub下載鏈接

 

 

一、項目集成

pod 'SnapKit'

import SnapKit

 

SnapKit的使用方法

通過 snp.makeConstraints 方法給view添加約束，約束有幾種，分別是邊距，寬，高，左上右下距離，基准線。
同時，添加過約束后可以有修正，修正有位移修正（inset、offset）和倍率修正（multipliedBy）

語法一般是： make.equalTo 或 make.greaterThanOrEqualTo 或 make.lessThanOrEqualTo + 倍數和位移修正。

.equalTo：等於 
.lessThanOrEqualTo：小於等於
.greaterThanOrEqualTo：大於等於

注意： 使用 snp.makeConstraints 方法的元素必須事先添加到父元素的中，例如：self.view.addSubview(view)

 

 

視圖屬性（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.baseline	NSLayoutAttribute.Baseline

 

對於如何使用SnapKit，這里簡單講一些常用的場景：

環境：Xcode8.1    

語言：Swift3.0

 

場景1:

在view中心添加一個長寬200的view

  box1.snp.makeConstraints({ (make) in
                make.width.height.equalTo(200)
                make.center.equalTo(self.view)
            })

 

場景2:

在紅色view里，添加一個子view，距離頂部30px

 

box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            box1.addSubview(box2)
            box1.snp.makeConstraints({ (make) in
                
                make.width.height.equalTo(200)
                make.center.equalTo(self.view)
            })
            box2.snp.makeConstraints({ (make) in
                
                make.top.equalTo(box1.snp.top).offset(30)       //距離box1 30距離
                make.left.equalTo(box1)             //等效於 make.left.equalTo(box1.snp.left)
                make.right.equalTo(box1)
                make.height.equalTo(30)
                
            })

 

場景3:

添加兩個view，高寬相等，綠色的緊靠紅色上下排列

   box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            view.addSubview(box2)
            box1.snp.makeConstraints({ (make) in     
                make.left.equalTo(20)      //距離左邊20
                make.right.equalTo(-20)    //距離右邊20，注意，這里要為負的20
                make.top.equalTo(100)
                make.height.equalTo(50)
            })
            box2.snp.makeConstraints({ (make) in
                
                make.top.equalTo(box1.snp.bottom)      //頂部靠着box1底部
                make.left.right.height.equalTo(box1)    //左右高和box1對齊
                
            })

 

場景4:

添加兩個view，高寬相等，左右排列

 

box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            view.addSubview(box2)
            box1.snp.makeConstraints({ (make) in
                make.width.height.equalTo(100)
                make.left.equalTo(view)
                make.top.equalTo(100)
            })
            box2.snp.makeConstraints({ (make) in
                
                make.size.equalTo(box1)             //大小等於box1
                make.top.equalTo(box1)              //頂部和box1對齊
                make.right.equalTo(view)
                
            })

 

場景5:

添加兩個view，綠色大小為紅色一半，上下排列

 

 box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            view.addSubview(box2)
            box1.snp.makeConstraints({ (make) in
                
                make.size.equalTo(CGSize(width: 200, height: 200))
                make.centerX.equalTo(view)
                make.centerY.equalTo(view).offset(-100)     //中心點為view中心偏上100距離
            })
            box2.snp.makeConstraints({ (make) in
                
                make.size.equalTo(box1).multipliedBy(0.5)   //大小為box1一半
                make.centerX.equalTo(box1)
                make.top.equalTo(box1.snp.bottom).offset(20)
                
            })

 

場景6:

添加兩個view，綠色在紅色里面，內邊距設置為依次10、20、30、40

 box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            box1.addSubview(box2)
            box1.snp.makeConstraints({ (make) in
                make.width.height.equalTo(200)
                make.center.equalTo(self.view)
            })
            box2.snp.makeConstraints({ (make) in
                //內距box1邊距分別為10、20、30、40
                make.edges.equalTo(box1).inset(UIEdgeInsetsMake(10, 20, 30, 40))
            })

 

總結：

以上幾種是比較常用的使用場景，涉及到一些基本屬性。

其實多用幾次之后，會發現和Masonry很像，還是比較容易上手的。

 

 

Demo下載地址

 

共勉～～