前言：
1、使用VFL布局前，相關(guān)的View要關(guān)閉系統(tǒng)的自定義布局；
view.translatesAutoresizingMaskIntoConstraints = NO;
2、VFL字符串不可以有空格；

VFL API

/*
format參數(shù): VFL字符串,形如 @"V:|-topMargin-[view1(50.0)]-20-[view2(50.0)]";
option參數(shù): 約束類型 opts參數(shù)是個枚舉值, 主要用來布局view的對齊方式;
metrics參數(shù): 替換VFL字符串中的變量字典, 如果這么寫: @{@"topMargin":@10} 則VFL布局中可以替換成下面的寫法: @"V:|-10-[view1(50.0)]-20-[view2(50.0)]" 其實就是替換字符串中的變量使用;
views參數(shù): VFL語句中用到的控件 views參數(shù)是一個字典，里面可以存儲一些數(shù)值, 這樣存儲之后就可以在VFL字符串中調(diào)用了 為了方便蘋果官方提供了一個宏,傳入相關(guān)的view變量名，返回可以直接使用的dictionary*/
+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format 
  options:(NSLayoutFormatOptions)opts 
  metrics:(nullable NSDictionary<NSString *,id> *)metrics 
    views:(NSDictionary<NSString *, id> *)views;
  
//views示例
NSDictionaryOfVariableBindings(v1, v2, v3)
//等價于
[NSDictionary dictionaryWithObjectsAndKeys:v1, @”v1”, v2, @”v2”, v3, @”v3”, nil];
 

/*和此方法搭配可以實現(xiàn)更復(fù)雜的布局
view1.attribute1 = view2.attribute2 × multiplier + constant
view1.attribute1 >= view2.attribute2 × multiplier + constant
view1.attribute1 <= view2.attribute2 × multiplier + constant
*/
+ (instancetype)constraintWithItem:(id)view1
                attribute:(NSLayoutAttribute)attr1
                relatedBy:(NSLayoutRelation)relation
                toItem:(nullable id)view2
                attribute:(NSLayoutAttribute)attr2
                multiplier:(CGFloat)multiplier
                constant:(CGFloat)c

VFL布局符號

|  : 表示父視圖
-  : 表示距離（默認(rèn)兩個子視圖之間的值是8，與父視圖之間的值是16）
[] : 表示視圖 (每個視圖必須用[]包裹起來，否則語法錯誤)
() : 定義控件的寬/高，可以在metrics中指定
V  : 表示垂直
H  : 表示水平
=  : 表示視圖間距、寬度和高度必須大于或等于某個值
<= : 表示視圖間距、寬度和高度必須小宇或等于某個值
== : 表示視圖間距、寬度或者高度必須等于某個值
@  : 約束的優(yōu)先級 取值范圍為0~1000（250、750、1000）

VFL布局符號用法

|-[view]-|:                              視圖處在父視圖的左右邊緣內(nèi)（左右會有默認(rèn)邊距）
|-[view]  :                              視圖處在父視圖的左邊緣
|[view]   :                              視圖和父視圖左邊對齊
V:[view(20)]  :                          設(shè)置視圖的高度 
H:[view(20.)]  :                         設(shè)置視圖的寬度
|-10.0-[view]-10.0-|:                    表示離父視圖 左右間距 10
|-[view(view1)]-[view1]-| :              View和view1視圖寬度一樣，并且在父視圖內(nèi)
|-[view(view1)][view1]-|  :              View和view1視圖寬度一樣，并且在父視圖內(nèi)，兩視圖間隔為0
V:|-padding-[imageView]->=0-[button]-padding| : 表示離父視圖的距離為Padding,這兩個視圖間距必須大于或等于0并且距離底部父視圖為padding。此時必須對 metrics參數(shù)賦值eg.  metrics:@{@"topMargin":@100};

[wideView(>=60@700)]  :視圖的寬度為至少為60 優(yōu)先級為700 
[view(>=60,<=90)]     :視圖約束多個條件之間用","連接并且之間不能有空格

最后要注意, H可以忽略, 默認(rèn)為水平布局 , V必須要寫!!!

VFL Demo

- (void)viewSafeAreaInsetsDidChange {
    
    //安全高度
    UIEdgeInsets safe_insets = self.view.safeAreaInsets;
    CGFloat topMargin = safe_insets.top > 0 ? safe_insets.top : 60;
    
    //創(chuàng)建3個view的對象
    UIView *leftView = [[UIView alloc]init];
    UIView *rightView = [[UIView alloc]init];
    UIView *bottomView = [[UIView alloc]init];

    //設(shè)置背景顏色
    leftView.backgroundColor = [UIColor greenColor];
    rightView.backgroundColor = [UIColor purpleColor];
    bottomView.backgroundColor = [UIColor orangeColor];

    //添加視圖上顯示
    [self.view addSubview:leftView];
    [self.view addSubview:rightView];
    [self.view addSubview:bottomView];

    //關(guān)閉系統(tǒng)的自定義布局
    leftView.translatesAutoresizingMaskIntoConstraints = NO;
    rightView.translatesAutoresizingMaskIntoConstraints = NO;
    bottomView.translatesAutoresizingMaskIntoConstraints = NO;

    //創(chuàng)建VFL約束字符串
    NSString *h_VFL = @"H:|-[leftView(==rightView)]-margin-[rightView]-space-|";
    NSString *h_VFL1 = @"H:[bottomView(==leftView)]";
    
    NSString *v_VFL = @"V:|-topMargin-[leftView(==bottomView)]-space-[bottomView]-space-|";
    NSString *v_VFL1 = @"V:|-topMargin-[rightView(==bottomView)]";

    //創(chuàng)建鍵值映射
    NSDictionary *metircs = @{@"space":@20,@"margin":@30,@"topMargin":@(topMargin)};
    NSDictionary *views = NSDictionaryOfVariableBindings(leftView,rightView,bottomView);
    
    //創(chuàng)建約束
    NSArray *h_constraint = [NSLayoutConstraint constraintsWithVisualFormat:h_VFL options:0 metrics:metircs views:views];
    NSArray *h_constraint1 = [NSLayoutConstraint constraintsWithVisualFormat:h_VFL1 options:0 metrics:metircs views:views];
    
    NSArray *v_constraint = [NSLayoutConstraint constraintsWithVisualFormat:v_VFL options:NSLayoutFormatDirectionLeadingToTrailing metrics:metircs views:views];
    NSArray *v_constraint1 = [NSLayoutConstraint constraintsWithVisualFormat:v_VFL1 options:NSLayoutFormatDirectionLeadingToTrailing metrics:metircs views:views];
    NSLayoutConstraint *center_x_constraint = [NSLayoutConstraint constraintWithItem:bottomView
                                                                attribute:NSLayoutAttributeCenterX
                                                                relatedBy:NSLayoutRelationEqual
                                                                   toItem:self.view
                                                                attribute:NSLayoutAttributeCenterX
                                                               multiplier:1
                                                                 constant:0];

    //添加約束
    [self.view addConstraints:h_constraint];
    [self.view addConstraints:h_constraint1];
    [self.view addConstraints:v_constraint];
    [self.view addConstraints:v_constraint1];
    [self.view addConstraint:center_x_constraint];
}

寫在最后

Auto Layout Guide: Visual Format Language
iOS--NSLayoutConstraint
自動布局 VFL