IOS Swift第三方約束:SnapKit(Swift)

學(xué)習(xí)一下第三方的約束管理擎析。其中SnapKit適用于Swift躏嚎,Masonry適用于OC。

1坡脐、Github地址:

SnapKit Github地址

2、安裝:

1.直接下載:在Github上下載SnapKit房揭,找到SnapKit.framework备闲,然后放到自己的工程中即可。SnapKit.framework文件包括:

屏幕快照 2016-04-08 上午11.47.00.png

2.Cocoapods安裝

 在項目的Podfile下添加如下信息

 在終端中執(zhí)行:pod install(注意路徑是當(dāng)前項目中Podfile鎖在路徑)
    platform :ios, '8.0'

    use_frameworks!

     target '你的工程名稱' do

     pod 'SnapKit'

     end

SnapKit本身不支持IOS7崩溪,如果希望SnapKit支持IOS7版本浅役,需要在自己的項目的 Build Setting 中搜索的 OTHER_SWIFT_FLAGS,在其下面添加 -DSNAPKIT_DEPLOYMENT_LEGACY伶唯,如下圖所示:(否則會報錯>跫取)

796183-7e9bb5305c9124fe.png

在使用之前,先看一下Snapkit官方文檔翻譯

通用模式:

swiftlet box = UIView()superview.addSubview(box)box.snp_makeConstraints { (make) -> Void in //解釋:box對象相對于父視圖上邊距為20像素 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當(dāng)中 X軸向右方向;Y軸向下方向 為正

縮寫形式:

swift
let box = UIView()
superview.addSubview(box)
box.snp_makeConstraints { (make) -> Void in 
    //注釋:box距離父視圖上下左右邊距都是20像素
    make.edges.equalTo(superview).inset(UIEdgeInsetsMake(20, 20, 20, 20))
}

SnapKit還可以通過下面幾個步驟來實現(xiàn)縮短代碼和提高代碼可讀性

  • 確定最佳的普通視圖安裝限制瞪讼。
  • 保持軌道的約束安裝所以他們可以很容易地被刪除后钧椰。
  • 在所有適當(dāng)?shù)囊晥D上確保
  • setTranslatesAutoresizingMaskIntoConstraints(false)屬性被設(shè)置

SnapKit中并不局限于 等于(equalTo)

  • equalTo:等于
  • lessThanOrEqualTo 小于等于
  • greaterThanOrEqualTo 大于等于

1.視圖屬性

//當(dāng)前視圖對象的中心x坐標(biāo)小于等于view視圖的左邊的x左邊
make.centerX.lessThanOrEqualTo(view.snp_left)
屏幕快照 2016-04-08 下午1.08.55.png

2.視圖關(guān)系(UIView/NSView)

如果你想 視圖 view.left 大于等于 label.left ,執(zhí)行下面代碼:

swift
//下面這兩者的約束是完全一樣的
make.left.greaterThanOrEqualTo(label)
make.left.greaterThanOrEqualTo(label.snp_left)

3.嚴(yán)格檢測(Strick Checks)

自動布局允許將寬度和高度屬性設(shè)置為常量值符欠。如果你想對視圖設(shè)置一個最小和最大寬度嫡霞,你必須先給他一個初始的平等塊

swift
//設(shè)置寬度>= 200 && <= 400

你也可以用其他的約束和結(jié)構(gòu)來建立你的約束,像這樣:

swift
make.top.equalTo(42)
make.height.equalTo(20)
make.size.equalTo(CGSizeMake(50,100))
make.edges.equalTo(UIEdgeInsetsMake(10,0,10,0))
make.left.equalTo(view).offset(UIEdgeInsetsMake(10,0,10,0))

4.學(xué)習(xí)優(yōu)先級

  • priority: 允許您指定一個確切的優(yōu)先級
  • priorityHigh: 高優(yōu)先級 等價于 UILayoutPriority.DefaultHigh
  • priorityMedium:中優(yōu)先級
  • priorityLow:低優(yōu)先級 UILayoutPriority.DefaultLow

優(yōu)先級可以放在約束鏈的結(jié)束處希柿,例如

swift
//當(dāng)前視圖的左邊>=label的底部 低優(yōu)先級
make.left.greaterThanOrEqualTo(label.snp_left).priorityLow()
//當(dāng)前視圖與label的頂部齊平诊沪,優(yōu)先級:600
make.top.equalTo(label.snp_top).priority(600)

5.組成,組成曾撤,組成
SnapKit 也可以提供一些便利的方法來同時創(chuàng)建多約束

1.edges(邊緣)

swift
//讓當(dāng)前視圖 的 上下左右(top,left,bottom,right) 等于 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))

2.size(尺寸)

swift
//當(dāng)前視圖寬高 >= titleLabel
make.size.greaterThanOrEqualTo(titleLabel)
//make width = superview.width + 100; height = superview.height -50
//即 當(dāng)前視圖寬 = 父視圖 + 100端姚,高 = 父視圖.高 - 50
make.size.equalTo(superview).offset(CGSizeMake(100, -50))

3.center(中心)

swift
//當(dāng)前視圖與 button1中心相同 (centerX 和 centerY)
make.center.equalTo(button1)
//make centerX = superview.centerX - 5; centerY = superview.centerY +10
make.center.equalTo(superview).offset(CGPointMake(-5,10))

可以串連視圖屬性增加可讀性

swift
//所有邊緣除了top都等于父視圖, top為20
make.left.right.bottom.equalTo(superview)
make.top.equalTo(20)

6.Hold on for dear life

有時候你需要修改已經(jīng)存在的約束為了移動或者移除、代替約束挤悉。在SnapKit 有一些不同的方法更新約束

1.引用(References)
你可以通過將約束的結(jié)果賦值給一個局部變量或一個類屬性來保持一個特定的約束的引用渐裸。您還可以將多個約束引用存儲在數(shù)組中。

swift
var topConstraint: Constraint? = nil

//當(dāng)制作約束時
view1.snp_makeConstraints{ (make) -> Void in
        self.topConstrain = make.top.equalTo(superview).offset(padding.top).constraint
        make.left.equalTo(superview).offset(padding.left)

// 然后接下來你可以這樣
self.topConstraint.uninstall()

//或者如果你想要更新約束
self.topConstraint.updateOffset(5)

2.snp_updateConstraints(更新約束)
如果你僅僅想更新一個常數(shù)給一個約束装悲,你可以使用方法snp_updateConstraints來代替snp_makeConstraints

swift
//這是一個蘋果官方推薦的添加和更新約束的地方
//這個方法在響應(yīng)<code>setNeedsUpdateConstraints</code>多次調(diào)用
//這個方法可以倍UIKit調(diào)用
override func updateConstraints() {
        self.growingButton.snp_updateConstraints{ (make) -> Void in
                make.center.equalTo(self);
                make.width.equalTo(self.buttonSize.width).priorityLow()
                make.height.equalTo(self.buttonSize.height).priorityLow()
                make.width.lessThanOrEqualTo(self)
                make.height.lessThanOrEqualTo(self)
        }

        //父類可以調(diào)用
        super.updateConstraints()
}

3.snp_remakeConstraints(重做約束)

snp_remakeConstraints與snp_makeConstraints類似昏鹃,但是首先會先清除掉所有被SnapKit設(shè)置的約束

swift
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)
                }
        }
}

3、引用頭文件:import SnapKit

4诀诊、開始使用

案例一:要求:無論在什么尺寸的設(shè)備上(包括橫豎屏切換)洞渤,紅色view都居中顯示。

屏幕快照 2016-04-08 上午11.54.06.png

( Swift剛學(xué)沒多久swift畏梆,可能不太規(guī)范)


   // 防止block中的循環(huán)引用

   weak var weakSelf : ViewController? = self 

   // 初始化view并設(shè)置背景

   var view : UIView? = UIView.init()

   view!.backgroundColor = UIColor.redColor();

   self.view.addSubview(view!);

   // 使用mas_makeConstraints添加約束

   view!.snp_makeConstraints { (make) -> Void in

         // 添加大小約束(make就是要添加約束的控件view)

        make.size.equalTo(CGSizeMake(100, 100))

        // 添加居中約束(居中方式與self相同)

        make.center.equalTo(weakSelf!.view)

   }

案例二:
要求:無論在什么尺寸的設(shè)備上(包括橫豎屏切換)您宪,黑色view的左奈懒、上邊距奠涌、大小都不變;灰色view的右邊距不變,寬磷杏、高溜畅、上邊距黑色view相等

屏幕快照 2016-04-08 下午12.29.03.png

// 初始化黑色view

var blackView : UIView? = UIView.init()

blackView!.backgroundColor = UIColor.blackColor()

self.view.addSubview(blackView!)

// 給黑色view添加約束

blackView!.snp_makeConstraints{ (make) -> Void in

// 添加大小約束

make.size.equalTo(CGSizeMake(100, 100))

// 添加左、上邊距約束(左极祸、上約束都是20)(也可以分開寫)

make.left.top.equalTo(20)

}

// 初始化灰色view

var grayView : UIView? = UIView.init()

grayView!.backgroundColor = UIColor.grayColor()

self.view.addSubview(grayView!)

// 給灰色view添加約束

grayView!.snp_makeConstraints{ (make) -> Void in

// 大小慈格、上邊距約束與黑色view相同

make.size.equalTo(blackView!)

make.top.equalTo(blackView!)

// 添加右邊距約束(這里的間距是有方向性的,左遥金、上邊距約束為正數(shù)浴捆,右、下邊距約束為負(fù)數(shù))

make.right.equalTo(-20)

}

在上面的案例中稿械,涉及以下內(nèi)容:
在SnapKit中选泻,make.left.top.equalTo(20);等價于make.left.equalTo(20)和make.top.equalTo(20);

案例三:
要求:有兩個view,黑色與灰色;黑色view的左页眯、上梯捕、右邊距均為20,下邊距灰色view 20窝撵,寬度自適應(yīng)傀顾,高度與灰色view平分整個界面;灰色view寬度為黑色view的一半(即左邊以中線起始)碌奉,右短曾、下邊距與黑色view相同,高度與黑色view相同赐劣。

屏幕快照 2016-04-08 下午12.49.59.png
// 初始化黑色view
        var blackView : UIView? = UIView.init()
        blackView!.backgroundColor = UIColor.blackColor()
        self.view.addSubview(blackView!)
        // 給黑色view添加約束
        blackView!.snp_makeConstraints{ (make) -> Void in
            // 添加左错英、上邊距約束
            make.left.top.equalTo(20)
            // 添加右邊距約束
            make.right.equalTo(-20)
        }
        
        // 初始化灰色view
        var grayView : UIView? = UIView.init()
        grayView!.backgroundColor = UIColor.grayColor()
        self.view.addSubview(grayView!)
        // 給灰色view添加約束
        grayView!.snp_makeConstraints{ (make) -> Void in
            // 添加右、下邊距約束
            make.bottom.right.equalTo(-20)
            // 添加高度約束隆豹,讓高度等于blackview
            make.height.equalTo(blackView!)
            // 添加上邊距約束(上邊距 = 黑色view的下邊框 + 偏移量20)
            make.top.equalTo(blackView!.snp_bottom).offset(20)
            // 添加左邊距(左邊距 = 父容器縱軸中心 + 偏移量0)
            make.left.equalTo(weakSelf!.view.snp_centerX).offset(0)
        }

案例四:
要求:修改部分約束椭岩,例如:當(dāng)鍵盤擋住輸入框時,輸入框自動向上彈到鍵盤上方璃赡。
實現(xiàn):
這里需要使用到SnapKit的另外一個方法mas_updateConstraints判哥。這個方法用于更新控件約束。具體的實現(xiàn)方式可以下載Demo來看碉考,這里只貼出鍵盤彈出時的處理代碼:

 // 修改下邊距約束
        grayView!.snp_updateConstraints{ (make) -> Void in
            // 添加右塌计、下邊距約束
            make.bottom.equalTo(-100)
        }
        // 更新約束
        self.view.layoutIfNeeded()
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市侯谁,隨后出現(xiàn)的幾起案子锌仅,更是在濱河造成了極大的恐慌,老刑警劉巖墙贱,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件热芹,死亡現(xiàn)場離奇詭異,居然都是意外死亡惨撇,警方通過查閱死者的電腦和手機伊脓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來魁衙,“玉大人报腔,你說我怎么就攤上這事∑实恚” “怎么了纯蛾?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長纵隔。 經(jīng)常有香客問我翻诉,道長帆卓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任米丘,我火速辦了婚禮剑令,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘拄查。我一直安慰自己吁津,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布堕扶。 她就那樣靜靜地躺著碍脏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪稍算。 梳的紋絲不亂的頭發(fā)上典尾,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天,我揣著相機與錄音糊探,去河邊找鬼钾埂。 笑死,一個胖子當(dāng)著我的面吹牛科平,可吹牛的內(nèi)容都是我干的褥紫。 我是一名探鬼主播,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼瞪慧,長吁一口氣:“原來是場噩夢啊……” “哼髓考!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起弃酌,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤氨菇,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后妓湘,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體查蓉,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年多柑,在試婚紗的時候發(fā)現(xiàn)自己被綠了奶是。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,102評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡竣灌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出秆麸,到底是詐尸還是另有隱情初嘹,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布沮趣,位于F島的核電站屯烦,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜驻龟,卻給世界環(huán)境...
    茶點故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一温眉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧翁狐,春花似錦类溢、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至懈词,卻和暖如春蛇耀,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背坎弯。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工纺涤, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人抠忘。 一個月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓洒琢,卻偏偏與公主長得像,于是被迫代替她去往敵國和親褐桌。 傳聞我的和親對象是個殘疾皇子衰抑,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,044評論 2 355

推薦閱讀更多精彩內(nèi)容