【轉】使用Auto Layout中的VFL(Visual format language)--代碼實現自動布局

標籤：

 

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

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

一：API介紹

1. NSLayoutConstraint API

NSLayoutConstraint+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)optsmetrics:(NSDictionary *)metricsviews:(NSDictionary *)views;

參數介紹:

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

UIView- (void)addConstraints:(NSArray *)constraints;

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

二：簡單的使用

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

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

#import "ViewController.h"@interface ViewController () @end @implementation ViewController - (void)viewDidLoad {    [super viewDidLoad];    UIButton *button=[[UIButton alloc]init];    [button setTitle:@"點擊一下" 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

運行程式，如下：

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

NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|"　　　　　　　　　　　　　　　　　　　　　　　　　options:0　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];

這 裡的意思是：button在水平方向上距離它的superView，左右各20px，比如在這裡他的大小就是320-20*2=280.在@"H:|- [button]-|"這個語句中，其中"H:"是表示這是水平方向上的約束，"|"是表示superView，"-"表示一個間隔空間，這個間隔如果是 如superView之間的，那麼就是20px,如果是兩個同層級的view，比如@"[button]-[button1]"，那麼這裡表示的是 8px.

NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]"　　　　　　　　　　　　　　　　　　　　　　　　　options:0　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];

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

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

button.translatesAutoresizingMaskIntoConstraints=NO;

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

2:多控制項之間關聯使用

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

#import "ViewController.h"@interface ViewController () @end @implementation ViewController - (void)viewDidLoad {    [super viewDidLoad];    UIButton *button=[[UIButton alloc]init];    [button setTitle:@"點擊一下" 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:@"請不要點擊我" 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];     }

啟動並執行如下:

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

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

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

我再改一下上面這一句VFL

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

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

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

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

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)]"，這兩句就可以輕鬆實現等寬等高了！

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

功能　　　　　　　　運算式

水平方向  　　　　　　  H:

垂直方向  　　　　　　  V:

Views　　　　　　　　 [view]

SuperView　　　　　　|

關係　　　　　　　　　>=,==,<=

空間,間隙　　　　　　　-

優先順序　　　　　　　　@value

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

【轉】使用Auto Layout中的VFL(Visual format language)--代碼實現自動布局