iOS 自動布局大全

一:NSLayoutConstraint

  • 手碼創(chuàng)建就是所謂的那七個參數(shù)的長的像句子似得方法文兑,之后再在相應(yīng)的節(jié)點(diǎn)下添加約束熙卡。


NSLayoutConstraint添加的兩種方法。
  // 高度約束(添加到y(tǒng)ellowView身上)
  NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:50];
  [yellowView addConstraint:heightConstraint];
 
  // 間距約束(添加到self.view身上)
  CGFloat margin = 20;
   [self.view addConstraints:@[
                            // 左邊
                            [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin],
                             
                            // 右邊
                            [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant: - margin],
                             
                            // 底部
                            [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant: - margin]
                             ]];
  }
  • 為了避免和系統(tǒng)生成的自動伸縮的約束不沖突 一般加上這句

系統(tǒng)默認(rèn)這個屬性是yes塞栅。

二:VFL語言添加約束

VFL全稱是Visual Format Language,翻譯過來是“可視化格式語言”
VFL是蘋果公司為了簡化Autolayout的編碼而推出的抽象語言

VFL示例:
canelButton寬72,acceptButton寬50身冀,它們之間間距12
@"H:[cancelButton(72)]-12-[acceptButton(50)]"

 wideView寬度大于等于60point,該約束條件優(yōu)先級為700(優(yōu)先級最大值為1000括享,優(yōu)先級越高的約束越先被滿足)
H:[wideView(>=60@700)]
 
 豎直方向上搂根,先有一個redBox,其下方緊接一個高度等于redBox高度的yellowBox
V:[redBox][yellowBox(==redBox)]
   
 水平方向上铃辖,F(xiàn)ind距離父view左邊緣默認(rèn)間隔寬度剩愧,之后是FindNext距離Find間隔默認(rèn)寬度;再之后是寬度不小于20的FindField娇斩,它和FindNext以及父view右邊緣的間距都是默認(rèn)寬度隙咸。(豎線“|” 表示superview的邊緣)
 H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
VFL的使用:

列子:

NSArray *blueHArr = [NSLayoutConstraint constraintsWithVisualFormat:
@"H:|-20-[blueView]-20-|" 
options:kNilOptions
metrics:nil views:
NSDictionaryOfVariableBindings(blueView)];

方法介紹

constraintsWithVisualFormat:這個方法返回了一個數(shù)組;
@"H:|-20-[blueView(100)]-20-|":這句話表明所添加的約束沐悦,H的意思是水平方向添加約束,blueView 視圖名稱五督,(100)代表著blueView 的寬為100藏否,blueView距離父類的左邊20,距離父類的右邊是20;
options:是對其方式;
metrics:返回的是一個字典充包,它的意思是可以將約束中的值用某些字符串來代理副签,然后在這個字典中給多對應(yīng)的字符串賦值,方便修改基矮,并且增加可讀性;
views:返回的也是一個字典淆储,這個字典的意思是:你可以將前面的view用其他字符串來代替,在這里在給他賦給對應(yīng)的view的名字家浇。

我可以將上面的約束語句改成如下這樣:

NSArray *blueHArr = [NSLayoutConstraint 
constraintsWithVisualFormat:@"H:|-aa-[cccc(100)]-20-|"
options:kNilOptions
metrics:@{@"aa":@20}
views:@{@"cccc":blueView}];

這里我用aa替換了20本砰,cccc替換了blueVuew
這里有一個簡單的方法,就是使用NSDictionaryOfVariableBindings(blueView)來替換views中的內(nèi)容也是可以的钢悲。

VFL的缺點(diǎn)
VFL語句不支持乘除法点额,我們是不能這樣寫的:

NSArray *redVArr = [NSLayoutConstraint 
constraintsWithVisualFormat:@"V:[blueView]-20-[redView(==blueView*0.5)]" 
options:NSLayoutFormatAlignAllRight 
metrics:nil 
views:NSDictionaryOfVariableBindings(blueView, redView)];

原因就是這里包含了乘法,而一旦VFL語句中包含了乘除法那么系統(tǒng)就會不識別而崩潰莺琳。

三:關(guān)于常用的手碼約束的第三方框架

MasonryUIView+AutolayoutMyLinearLayout

Masonry框架

這個框架是重量級的里面好多文件还棱,難于上手,但是用熟練了的話比上面那個牛X惭等,適合于約束要經(jīng)常改變的項(xiàng)目

UIView+Autolayout框架

這個相對于masonry珍手,是個輕量級的框架易于上手,里面一共也就兩個文件辞做。也非常好用琳要,都是用auto開頭。適用于約束不經(jīng)常改變的項(xiàng)目

MyLinearLayout

MyLinearLayout的實(shí)現(xiàn)充分參考了Android中的LinearLayout布局秤茅,但是卻比LinearLayout更為強(qiáng)大焙蹭,他幾乎可以實(shí)現(xiàn)AutoLayout的所有功能甚至其不具備的功能。MyLinearLayout是一個基于流式布局的容器視圖嫂伞,我們只需要把子視圖添加到MyLinearLayout中孔厉,并設(shè)置一些簡單的約束參數(shù)那么就可以完成各種布局的要求了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末帖努,一起剝皮案震驚了整個濱河市撰豺,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拼余,老刑警劉巖污桦,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異匙监,居然都是意外死亡凡橱,警方通過查閱死者的電腦和手機(jī)小作,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來稼钩,“玉大人顾稀,你說我怎么就攤上這事“映牛” “怎么了静秆?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長巡李。 經(jīng)常有香客問我抚笔,道長,這世上最難降的妖魔是什么侨拦? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任殊橙,我火速辦了婚禮,結(jié)果婚禮上狱从,老公的妹妹穿的比我還像新娘膨蛮。我一直安慰自己,他們只是感情好矫夯,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布鸽疾。 她就那樣靜靜地躺著吊洼,像睡著了一般训貌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上冒窍,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天递沪,我揣著相機(jī)與錄音,去河邊找鬼综液。 笑死款慨,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的谬莹。 我是一名探鬼主播檩奠,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼附帽!你這毒婦竟也來了埠戳?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤蕉扮,失蹤者是張志新(化名)和其女友劉穎整胃,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體喳钟,經(jīng)...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡屁使,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年在岂,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蛮寂。...
    茶點(diǎn)故事閱讀 38,626評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡蔽午,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出共郭,到底是詐尸還是另有隱情祠丝,我是刑警寧澤,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布除嘹,位于F島的核電站写半,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏尉咕。R本人自食惡果不足惜叠蝇,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望年缎。 院中可真熱鬧悔捶,春花似錦、人聲如沸单芜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽洲鸠。三九已至堂淡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間扒腕,已是汗流浹背绢淀。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留瘾腰,地道東北人皆的。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像蹋盆,于是被迫代替她去往敵國和親费薄。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,494評論 2 348

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