（八十八）VFL语言初步 - 实现布局

【基本语法】

VFL的语法为H:和V:开头，代表水平和垂直。

接下来如果要涉及距离，使用|-x-，x为距离的点数。

对于视图，用[ ]包围，例如[blueView]。

①下面的语句实现了blueView水平方向左右各距离控制器的边缘20点：

H:|-20-[blueView]-20|

②如果要指定宽高，在视图名称之后用圆括号内填入常量数值，下面的代码实现了blueView距离左边20点，宽度固定为120点：

H:|-20-[blueView(20)]

③如果要指定相等关系，例如redView的宽度和blueView相等，则在开头为H:的条件下写[redView(==blueView)]。

④如果出现乘除计算，不能使用VFL，这时候应该使用NSLayoutConstraint的constraintWithItem:::::方法，计算公式为firstItem.x ＝ (secondItem.x + constant) * multiplier，x为attribute指定的计算量，注意这个约束应该被添加到他们公共的父节点上。

【实现方法】

使用constraintsWithVisualFormat::::方法：

/**

     Format: VFL语句

     options：对齐方式

     metrics：VFL用到的变量

     views：VFL用到的视图

*/

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

①如果不需要对齐，options填入0。

②views为在VFL中对应实际View的依据，例如@{@"redView":self.redView}，当VFL中出现redView时，系统会通过views字典查找到self.redView，从而实现修改self.redView的尺寸。

③metrics为VFL中使用的变量，对于多次出现的值，可以用一个变量代替，然后在metrics中指定变量的值。

【实例】

下面的代码实现了blueView距离控制器View边缘左、中、右各20点，redView在blueView下20点，右对齐，宽度为blueView的一半。

需要注意的是禁用AutoResizing。

- (void)viewDidLoad {

    [super viewDidLoad];

    UIView *blueView = [[UIView alloc] init];

    blueView.backgroundColor = [UIColor blueColor];

    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];

    redView.backgroundColor = [UIColor redColor];

    [self.view addSubview:redView];

    blueView.translatesAutoresizingMaskIntoConstraints = NO;

    redView.translatesAutoresizingMaskIntoConstraints = NO;

    NSArray *blueViewHori = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView":blueView}];

    [self.view addConstraints:blueViewHori];

    NSArray *blueRedVerti = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView":blueView,@"redView":redView}];

    [self.view addConstraints:blueRedVerti];

    NSLayoutConstraint *redViewWidthConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];

    [self.view addConstraint:redViewWidthConstraint];

}