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

對於自動佈局：

咱們在 StoryBoard 中能夠使用約束實現，簡單明瞭，但若是用純代碼來設置約束就很麻煩了

OC裏面，咱們經常使用的有Masonry，SDAutoLayout

Swift裏，咱們有SnapKit：GitHub下載連接

 

 

1、項目集成

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，綠色在紅色裏面，內邊距設置爲依次十、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邊距分別爲十、20、30、40
                make.edges.equalTo(box1).inset(UIEdgeInsetsMake(10, 20, 30, 40))
            })

 

總結：

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

其實多用幾回以後，會發現和Masonry很像，仍是比較容易上手的。

 

 

Demo下載地址

 

共勉～～