Ios教程網 >> IOS編程開發 >> IOS開發基礎 >> 使用Auto Layout中的VFL(Visual format language)

使用Auto Layout中的VFL(Visual format language)

編輯：IOS開發基礎

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

一：API介紹

NSLayoutConstraint API

NSLayoutConstraint
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts
metrics:(NSDictionary *)metrics
views:(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(==30@1000)]",這個@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

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