ios开发autolayout之VFL语言使用总结

1.about VFL language

示例：

H : [ cancelButton (72)]-12-[ acceptButton (50)]

canelButton 宽 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 左边缘默认间隔宽度，之后是 FindNext 距离 Find 间隔默认宽度；再之后是宽度不小于 20 的 FindField ，它和 FindNext 以及父 view 右边缘的间距都是默认宽度。（ 竖线“ | ” 表示 superview 的边缘）

VFL的使用：

使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
format ：VFL语句
opts ：约束类型
metrics ：VFL语句中用到的具体数值
views ：VFL语句中用到的控件

创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义
NSDictionaryOfVariableBindings(...)

demo示例1：

- (void)test1
{
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 不要将AutoresizingMask转为Autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    // 添加水平方向的约束
    NSString *vfl = @"H:|-20-[abc]-20-|";
    NSDictionary *views = @{@"abc" : blueView};
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:nil views:views];
    [self.view addConstraints:constraints];
    
    // 添加竖直方向的间距
    NSString *vfl2 = @"V:|-20-[abc(40)]";
    NSDictionary *views2 = @{@"abc" : blueView};
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:nil views:views2];
    [self.view addConstraints:constraints2];
}

效果：

demo示例2：

- (void)test2
{
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 不要将AutoresizingMask转为Autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    // 间距
    NSNumber *margin = @20;
    
    // 添加水平方向的约束
    NSString *vfl = @"H:|-margin-[blueView]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView);
    NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:mertrics views:views];
    [self.view addConstraints:constraints];
    
    // 添加竖直方向的间距
    NSNumber *height = @40;
    NSString *vfl2 = @"V:|-margin-[blueView(height)]";
    NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, height);
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];
    [self.view addConstraints:constraints2];
}

效果：

demo示例3：

-(void)test3{
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 不要将AutoresizingMask转为Autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    // 不要将AutoresizingMask转为Autolayout的约束
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    // 间距
    NSNumber *margin = @20;
    
    // 添加水平方向的约束
    NSString *vfl = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
    NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];
    [self.view addConstraints:constraints];
    
    // 添加竖直方向的间距
    NSNumber *height = @40;
    NSString *vfl2 = @"V:[blueView(height)]-margin-|";
    NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, height);
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];
    [self.view addConstraints:constraints2];

效果：