?

原文：http://www.cocoachina.com/ios/20141209/10549.html

本文將通過簡單的UI來說明如何用VFL來實現自動布局。在自動布局的時候避免不了使用代碼來加以優化以及根據內容來實現不同的UI。

一：API介紹

NSLayoutConstraint API

?1 NSLayoutConstraint constraintsWithVisualFormat: options:0 metrics:nil views:NSDictionaryOfVariableBindings();?

參數介紹:

format:此參數為你的vfl語句，比如:@"H:|-[button]-|"

opts:枚舉參數，默認寫0，具體跟據你所實現的需求去選擇你想要的枚舉

metrics: 這里是一個字典，當在format中使用了動態數據比如上現這句:@"H:|-[button(==width)]-|",表示這個button的寬度為 width,那么這個參數去哪里找呢？就是在這個字典里面找到key對就的值，如果沒有找到這個值，app就會crash.

views:顧 名思義，這是傳所有你在vfl中使用到的view，那在上面這句例子中的應該怎么傳呢？結果是這樣 的：NSDictionaryOfVariableBindings(button).如果你使用到了多個view，就可以這樣 NSDictionaryOfVariableBindings(button,button1,button3...),這個名字也要跟參數 format中的一一對應，缺一不可.

2.UIView API

- (void)addConstraints:(NSArray *)constraints;
在 上面1中返回值類型是NSArray,而現在這個方法的參數也剛好是一個NSArray類型。那么直接把上一個方法的返回值當作這個方法的參數就可以了。 如果你有多個VFL，你也可以利用可變數組( NSMutableArray)把這多個VFL返回的數據拼在一起，然后再調用addConstraints:方法。

二：簡單的使用

1.單控件的使用(沒有與其他控制有關聯，比如空隙等)

新建一個單頁面項目Single View Application）,在項目里面加上下面這段代碼代碼

1 #import "ViewController.h" 2 @interface ViewController () 3 4 @end 5 6 @implementation ViewController 7 8 - (void)viewDidLoad { 9 [super viewDidLoad]; 10 UIButton *button=[[UIButton alloc]init]; 11 [button setTitle:@"點擊一下" forState:UIControlStateNormal]; 12 button.translatesAutoresizingMaskIntoConstraints=NO; 13 [button setBackgroundColor:[UIColor blackColor]]; 14 [self.view addSubview:button]; 15 NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|" 16 　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0 17 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 18 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)]; 19 20 NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]" 21 　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0 22 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 23 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)]; 24 25 [self.view addConstraints:constraints1]; 26 [self.view addConstraints:constraints2]; 27 28 29 } 30 31 @end

運行程序，效果圖如下：

可以看到，我們新建的button已經出來，證明上面的自動布局語句（VFL）已經生效。那么我們來詳細看看這些語句的意義是什么。

1 NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|" 2 　　　　　　　　　　　　　　　　　　　　　　　　　options:0 3 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 4 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];
這 里的意思是：button在水平方向上距離它的superView，左右各20px，比如在這里他的大小就是320-20*2=280.在@"H:|- [button]-|"這個語句中，其中"H:"是表示這是水平方向上的約束，"|"是表示superView，"-"表示一個間隔空間，這個間隔如果是 如superView之間的，那么就是20px,如果是兩個同級別的view，比如@"[button]-[button1]"，那么這里表示的是 8px. 1 NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]" 2 　　　　　　　　　　　　　　　　　　　　　　　　　options:0 3 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 4 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];

?

跟 上面有點不同,@"V:|-20-[button(==30)]",其中"V:"中代表這是垂直方向上的約束,"|-20-"這里的意思就是距離頭部為 20px，相當于y坐標為20。后面的"[button(==30)]"，是指定這個button的高度為30px.y坐標固定了，高度固定了，那這個 view的約束就完成了。如果你有需要，你的高度值（或者其他同類型的）可以使用>=,==,<=來表示，甚至你可以組合來用，像上面的 30，你可以指定一個區別，比如:(>=30,<=40)，這同樣也是可以的。如果你想表達他的優先級別,可以使用@"V:|-20- [button(==30@1000)]",這個@1000，就是他的級別了。你可以適配XIB或者SB對它的優先級做更多的處理.

PS:值得注意的是,在用代碼創建的UIView在，一定要加上下面這句代碼

button.translatesAutoresizeingMaskIntoConstraints = NO；

如果沒有上面這一行，你的約束將不生效,控制臺會輸出一連串的錯誤.

2:多控件之間關聯使用

基于上面的代碼上，我們重新加了一段代碼，現在的全部代碼如下:

? 1 #import "ViewController.h" 2 @interface ViewController () 3 4 @end 5 6 @implementation ViewController 7 8 - (void)viewDidLoad { 9 [super viewDidLoad]; 10 UIButton *button=[[UIButton alloc]init]; 11 [button setTitle:@"點擊一下" forState:UIControlStateNormal]; 12 button.translatesAutoresizingMaskIntoConstraints=NO; 13 [button setBackgroundColor:[UIColor blackColor]]; 14 [self.view addSubview:button]; 15 NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|" 16 　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0 17 　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 18 　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)]; 19 20 NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]" 21 　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0 22 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 23 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)]; 24 25 [self.view addConstraints:constraints1]; 26 [self.view addConstraints:constraints2]; 27 28 29 UIButton *button1=[[UIButton alloc]init]; 30 button1.translatesAutoresizingMaskIntoConstraints=NO; 31 [button1 setTitle:@"請不要點擊我" forState:UIControlStateNormal]; 32 [button1 setBackgroundColor:[UIColor redColor]]; 33 [self.view addSubview:button1]; 34 35 NSArray *constraints3=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1]-|" 36 　　　　　　　　　　　　　　　　　　　　　　　　　　　　 options:0 37 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 38 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1)]; 39 40 NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==30)]" 41 　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0 42 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 43 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)]; 44 45 [self.view addConstraints:constraints3]; 46 [self.view addConstraints:constraints4]; 47 48 }

運行的效果圖如下:

通過代碼對比，可以看出，在button1的垂直方向約束上，我們做了一點改變。水平方向上跟button一樣，這里就不多作解釋。我們來看看垂直方向上的。

1 NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==30)]" 2 　　　　　　　　　　　　　　　　　　　　　　　　　options:0 3 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 4 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];

?

VFL 語句為：@"V:[button]-[button1(==30)]"，這里用到了兩個view在VFL語句里面。剛才我們也說到，"-"在同一級別的 View上使用的時候表示的間距為8個像素點,整一句的意思就是button1的y坐標離button有8個像素點.在不使用auto layout的時候，可以這樣表達CGRectGetMaxY(button.frame)+8.

我再改一下上面這一句VFL

1 NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==height)]" 2 　　　　　　　　　　　　　　　　　　　　　　　　　options:0 3 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:@{@"height":@30} 4 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];

?

再次運行，你會發現，效果是一樣的。這樣你就知道怎么動態去給view加上高度或者寬度，或是其他間距了吧？

那么，如何做到兩個View，或是多個View之間等高，或者等寬呢？能用VFL可以做到嗎？除了通過上面的直接賦值寬高的數值外，VFL還提供了另外一種寫法用于等寬等高上。

還是上面的Demo，我們改一下代碼

1 NSArray *constraints3=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1(button)]" 2 　　　　　　　　　　　　　　　　　　　　　　　　　options:0 3 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 4 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)]; 5 6 NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(button)]" 7 　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0 8 　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 9 　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];

?

通過@"H:|-[button1(button)]"，@"V:[button]-[button1(button)]"，這兩句就可以輕松實現等寬等高了！

三：最后對格式的字符串作一個總結介紹

功能　　　　　　　　表達式

水平方向 ?　　　　　　 ?H:

垂直方向 ?　　　　　　 ?V:

Views　　　　　　　　 [view]

SuperView　　　　　　|

關系　　　　　　　　　>=,==,<=

空間,間隙　　　　　　　-

優先級　　　　　　　　@value

?

關于constraintsWithVisualFormat：函數介紹：

?

constraintsWithVisualFormat:參數為NSString型，指定Contsraint的屬性，是垂直方向的限定還是水平方向的限定，參數定義一般如下：

V:|-(>=XXX) :表示垂直方向上相對于SuperView大于、等于、小于某個距離

若是要定義水平方向，則將V：改成H：即可

在接著后面-[]中括號里面對當前的View/控件 的高度/寬度進行設定；

options：字典類型的值；這里的值一般在系統定義的一個enum里面選取

metrics：nil；一般為nil ，參數類型為NSDictionary，從外部傳入 //衡量標準

views：就是上面所加入到NSDictionary中的綁定的View

在這里要注意的是 AddConstraints??和 AddConstraint 之間的區別，一個添加的參數是NSArray，一個是NSLayoutConstraint

使用規則

?

|: 表示父視圖

??-:表示距離

??V:??:表示垂直

??H:??:表示水平

>= :表示視圖間距、寬度和高度必須大于或等于某個值

? ? <= :表示視圖間距、寬度和高度必須小宇或等于某個值

? ? == :表示視圖間距、寬度或者高度必須等于某個值

@??:>=、<=、==??限制? ?最大為??1000

1.|-[view]-|:??視圖處在父視圖的左右邊緣內

2.|-[view]??:? ?視圖處在父視圖的左邊緣

3.|[view]? ?:? ?視圖和父視圖左邊對齊

4.-[view]-??:??設置視圖的寬度高度

5.|-30.0-[view]-30.0-|:??表示離父視圖 左右間距??30

6.[view(200.0)] : 表示視圖寬度為 200.0

7.|-[view(view1)]-[view1]-| :表示視圖寬度一樣，并且在父視圖左右邊緣內

8. V:|-[view(50.0)] : 視圖高度為??50

9: V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示離父視圖的距離

為Padding,這兩個視圖間距必須大于或等于0并且距離底部父視圖為 padding。

10:??[wideView(>=60@700)]??:視圖的寬度為至少為60 不能超過??700

11: 如果沒有聲明方向默認為??水平??V:

希望對各位讀者有所幫助，如果不妥的地方還望指出.

轉載于:https://www.cnblogs.com/A--G/p/4666763.html

總結

以上是生活随笔為你收集整理的【转】使用Auto Layout中的VFL(Visual format language)--代码实现自动布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。