转载：使用Auto Layout中的VFL(Visual format language)--代码实现自动布局
本文將通過簡單的UI來說明如何用VFL來實(shí)現(xiàn)自動布局。在自動布局的時(shí)候避免不了使用代碼來加以優(yōu)化以及根據(jù)內(nèi)容來實(shí)現(xiàn)不同的UI。
一：API介紹
NSLayoutConstraint API
| 1 2 3 4 | NSLayoutConstraint +?(NSArray?*)constraintsWithVisualFormat:(NSString?*)format?options:(NSLayoutFormatOptions)opts metrics:(NSDictionary?*)metrics views:(NSDictionary?*)views; |
參數(shù)介紹:
format:此參數(shù)為你的vfl語句，比如:@"H:|-[button]-|"
opts:枚舉參數(shù)，默認(rèn)寫0，具體跟據(jù)你所實(shí)現(xiàn)的需求去選擇你想要的枚舉
metrics:這里是一個(gè)字典，當(dāng)在format中使用了動態(tài)數(shù)據(jù)比如上現(xiàn)這句:@"H:|-[button(==width)]-|",表示這個(gè)button的寬度為width,那么這個(gè)參數(shù)去哪里找呢？就是在這個(gè)字典里面找到key對就的值，如果沒有找到這個(gè)值，app就會crash.
views:顧名思義，這是傳所有你在vfl中使用到的view，那在上面這句例子中的應(yīng)該怎么傳呢？結(jié)果是這樣的：NSDictionaryOfVariableBindings(button).如果你使用到了多個(gè)view，就可以這樣NSDictionaryOfVariableBindings(button,button1,button3...),這個(gè)名字也要跟參數(shù)format中的一一對應(yīng)，缺一不可.
2.UIView API
| 1 2 | UIView -?(void)addConstraints:(NSArray?*)constraints; |
在上面1中返回值類型是NSArray,而現(xiàn)在這個(gè)方法的參數(shù)也剛好是一個(gè)NSArray類型。那么直接把上一個(gè)方法的返回值當(dāng)作這個(gè)方法的參數(shù)就可以了。如果你有多個(gè)VFL，你也可以利用可變數(shù)組( NSMutableArray)把這多個(gè)VFL返回的數(shù)據(jù)拼在一起，然后再調(diào)用addConstraints:方法。
二：簡單的使用
1.單控件的使用(沒有與其他控制有關(guān)聯(lián)，比如空隙等)
新建一個(gè)單頁面項(xiàng)目Single View Application）,在項(xiàng)目里面加上下面這段代碼代碼
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | #import?"ViewController.h" @interface?ViewController?() ?? @end ?? @implementation?ViewController ?? -?(void)viewDidLoad?{ ????[super?viewDidLoad]; ????UIButton?*button=[[UIButton?alloc]init]; ????[button?setTitle:@"點(diǎn)擊一下"?forState:UIControlStateNormal]; ????button.translatesAutoresizingMaskIntoConstraints=NO; ????[button?setBackgroundColor:[UIColor?blackColor]]; ????[self.view?addSubview:button]; ????NSArray?*constraints1=[NSLayoutConstraint?constraintsWithVisualFormat:@"H:|-[button]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]; ?????? ????NSArray?*constraints2=[NSLayoutConstraint?constraintsWithVisualFormat:@"V:|-20-[button(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]; ?????? ????[self.view?addConstraints:constraints1]; ????[self.view?addConstraints:constraints2]; ????? ?????? } ?? @end |
運(yùn)行程序，效果圖如下：
可以看到，我們新建的button已經(jīng)出來，證明上面的自動布局語句（VFL）已經(jīng)生效。那么我們來詳細(xì)看看這些語句的意義是什么。
| 1 2 3 4 | NSArray?*constraints1=[NSLayoutConstraint?constraintsWithVisualFormat:@"H:|-[button]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]; |
這里的意思是：button在水平方向上距離它的superView，左右各20px，比如在這里他的大小就是320-20*2=280.在@"H:|-[button]-|"這個(gè)語句中，其中"H:"是表示這是水平方向上的約束，"|"是表示superView，"-"表示一個(gè)間隔空間，這個(gè)間隔如果是如superView之間的，那么就是20px,如果是兩個(gè)同級別的view，比如@"[button]-[button1]"，那么這里表示的是8px.
| 1 2 3 4 | NSArray?*constraints2=[NSLayoutConstraint?constraintsWithVisualFormat:@"V:|-20-[button(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]; |
跟上面有點(diǎn)不同,@"V:|-20-[button(==30)]",其中"V:"中代表這是垂直方向上的約束,"|-20-"這里的意思就是距離頭部為20px，相當(dāng)于y坐標(biāo)為20。后面的"[button(==30)]"，是指定這個(gè)button的高度為30px.y坐標(biāo)固定了，高度固定了，那這個(gè)view的約束就完成了。如果你有需要，你的高度值（或者其他同類型的）可以使用>=,==,<=來表示，甚至你可以組合來用，像上面的30，你可以指定一個(gè)區(qū)別，比如:(>=30,<=40)，這同樣也是可以的。如果你想表達(dá)他的優(yōu)先級別,可以使用@"V:|-20-[button(==30@1000)]",這個(gè)@1000，就是他的級別了。你可以適配XIB或者SB對它的優(yōu)先級做更多的處理.
PS:值得注意的是,在用代碼創(chuàng)建的UIView在，一定要加上下面這句代碼
| 1 | button.translatesAutoresizingMaskIntoConstraints=NO; |
如果沒有上面這一行，你的約束將不生效,控制臺會輸出一連串的錯(cuò)誤.
2:多控件之間關(guān)聯(lián)使用
基于上面的代碼上，我們重新加了一段代碼，現(xiàn)在的全部代碼如下:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | #import?"ViewController.h" @interface?ViewController?() ?? @end ?? @implementation?ViewController ?? -?(void)viewDidLoad?{ ????[super?viewDidLoad]; ????UIButton?*button=[[UIButton?alloc]init]; ????[button?setTitle:@"點(diǎn)擊一下"?forState:UIControlStateNormal]; ????button.translatesAutoresizingMaskIntoConstraints=NO; ????[button?setBackgroundColor:[UIColor?blackColor]]; ????[self.view?addSubview:button]; ????NSArray?*constraints1=[NSLayoutConstraint?constraintsWithVisualFormat:@"H:|-[button]-|" options:0 metrics:nil ? views:NSDictionaryOfVariableBindings(button)]; ?????? ????NSArray?*constraints2=[NSLayoutConstraint?constraintsWithVisualFormat:@"V:|-20-[button(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]; ?????? ????[self.view?addConstraints:constraints1]; ????[self.view?addConstraints:constraints2]; ?????? ?????? ????UIButton?*button1=[[UIButton?alloc]init]; ????button1.translatesAutoresizingMaskIntoConstraints=NO; ????[button1?setTitle:@"請不要點(diǎn)擊我"?forState:UIControlStateNormal]; ????[button1?setBackgroundColor:[UIColor?redColor]]; ????[self.view?addSubview:button1]; ?????? ????NSArray?*constraints3=[NSLayoutConstraint?constraintsWithVisualFormat:@"H:|-[button1]-|" ?options:0 metrics:nil views:NSDictionaryOfVariableBindings(button1)]; ?????? ????NSArray?*constraints4=[NSLayoutConstraint?constraintsWithVisualFormat:@"V:[button]-[button1(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button1,button)]; ?????? ????[self.view?addConstraints:constraints3]; ????[self.view?addConstraints:constraints4]; ?????? } |
運(yùn)行的效果圖如下:
通過代碼對比，可以看出，在button1的垂直方向約束上，我們做了一點(diǎn)改變。水平方向上跟button一樣，這里就不多作解釋。我們來看看垂直方向上的。
| 1 2 3 4 | NSArray?*constraints4=[NSLayoutConstraint?constraintsWithVisualFormat:@"V:[button]-[button1(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button1,button)]; |
VFL語句為：@"V:[button]-[button1(==30)]"，這里用到了兩個(gè)view在VFL語句里面。剛才我們也說到，"-"在同一級別的View上使用的時(shí)候表示的間距為8個(gè)像素點(diǎn),整一句的意思就是button1的y坐標(biāo)離button有8個(gè)像素點(diǎn).在不使用auto layout的時(shí)候，可以這樣表達(dá)CGRectGetMaxY(button.frame)+8.
我再改一下上面這一句VFL
| 1 2 3 4 | NSArray?*constraints4=[NSLayoutConstraint?constraintsWithVisualFormat:@"V:[button]-[button1(==height)]" options:0 metrics:@{@"height":@30} views:NSDictionaryOfVariableBindings(button1,button)]; |
再次運(yùn)行，你會發(fā)現(xiàn)，效果是一樣的。這樣你就知道怎么動態(tài)去給view加上高度或者寬度，或是其他間距了吧？
那么，如何做到兩個(gè)View，或是多個(gè)View之間等高，或者等寬呢？能用VFL可以做到嗎？除了通過上面的直接賦值寬高的數(shù)值外，VFL還提供了另外一種寫法用于等寬等高上。
還是上面的Demo，我們改一下代碼
| 1 2 3 4 5 6 7 8 9 | NSArray?*constraints3=[NSLayoutConstraint?constraintsWithVisualFormat:@"H:|-[button1(button)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button1,button)]; ?????? ????NSArray?*constraints4=[NSLayoutConstraint?constraintsWithVisualFormat:@"V:[button]-[button1(button)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button1,button)]; |
通過@"H:|-[button1(button)]"，@"V:[button]-[button1(button)]"，這兩句就可以輕松實(shí)現(xiàn)等寬等高了！
三：最后對格式的字符串作一個(gè)總結(jié)介紹
功能 表達(dá)式
水平方向 ? ?H:
垂直方向 ? ?V:
Views [view]
SuperView |
關(guān)系 >=,==,<=
空間,間隙 -
優(yōu)先級 @value
希望對各位讀者有所幫助，如果不妥的地方還望指出.
轉(zhuǎn)載于:https://www.cnblogs.com/lingzhao/p/4153709.html
總結(jié)
以上是生活随笔為你收集整理的转载：使用Auto Layout中的VFL(Visual format language)--代码实现自动布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS中clear属性的both、lef
- 下一篇： ajax、json一些整理（3）