iOS學習之VFL語言簡介

什么是VFL語言

VFL（Visual Format Language），“可視化格式語言”。

VFL是蘋果公司為了簡化autolayout的編碼而推出的抽象語言。

語法說明

H:[cancelButton(72)]-12-[acceptButton(50)]
cancelButton寬72，acceptButton寬50，它們之間間距12
 
H:[wideView(>=60@700)]
wideView寬度大於等於60point，該約束條件優先級為700（優先級最大值為1000，優先級越高的約束條件越先被滿足）
  
V:[redBox][yellowBox(==redBox)]
垂直方向上，先有一個redBox，其下方緊接一個高度等於redBox高度的yellowBox
  
H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上，Find距離父view左邊緣間隔10，之后是FindNext距離Find間隔默認寬度；再之后是寬度不小於20的FindField，它和FindNext以及父view右邊邊緣的間距都是默認寬度。（豎線“|”表示superview的邊緣）。

使用方法

使用VFL來創建約束數組
+(NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
  
format：VFL語句
opts：約束類型
metrics：VFL語句中用到的具體數值
views：VFL語句中用到的控件
  
創建一個字典（內部包含VFL語句中用到的控件）的快捷宏定義
NSDictionaryOfVariableBindings(...)

實例展示

效果圖如下：

             

實現代碼：

-(void)horizontalLayout{
    //1.添加兩個控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    //2.添加約束
    //2.1水平方向的約束
    NSString *hVFL = @"H:|-30-[blueView]-30-[redView(==blueView)]-30-|";
    NSArray *hCons = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllBottom | NSLayoutFormatAlignAllTop metrics:nil views:@{@"blueView":blueView, @"redView":redView}];
    [self.view addConstraints:hCons];
    
    //2.2垂直方向的約束
    NSString *vVFL = @"V:[blueView(50)]-30-|";
    NSArray *vCons = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:0 metrics:nil views:@{@"blueView":blueView}];
    [self.view addConstraints:vCons];
}

-(void)verticalLayout{
    //1.添加兩個控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];

    //2.添加約束
    //2.1水平方向的約束
    NSString *hVFL = @"H:|-30-[blueView]-30-|";
    NSArray *hCons = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:0 metrics:nil views:@{@"blueView":blueView}];
    [self.view addConstraints:hCons];

    //2.2垂直方向的約束
    NSString *vVFL = @"V:|-30-[blueView(50)]-30-[redView(==blueView)]";
    NSArray *vCons = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView":blueView, @"redView":redView}];
    [self.view addConstraints:vCons];
    NSLayoutConstraint *redLeftCon = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
    [self.view addConstraint:redLeftCon];
}

小結

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

功能	表達式
水平方向	H:
垂直方向	V:
Views	[view]
SuperView	|
關系	>=,==,<=
空間，間隙	-
優先級	@value