IOS VFL语言（页面布局）

● 什么是VFL语言
● VFL全称是Visual Format Language,翻译过来是“可视化格式语言” ● VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言

 

 

VFL示例

● 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 :约束类型(一般可以传0)
● metrics :VFL语句中用到的具体数值 ● views :VFL语句中用到的控件

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

 

 

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 1.添加两个控件到父控件上
    // 1.1添加蓝色View
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    // 1.1添加红色View
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    
    // 2.禁用auturezing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    
    // 3.添加约束
    /*
     lFormat : VFL语句
     options: 对齐方式
     metrics: VFL语句中用到的变量值
     views: VFL语句中用到的控件
     */
    // 设置蓝色View距离左边和右边有20的的间距  X 和 宽度
//    NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView" : blueView}];
    int margin = 20;
    NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView]-margin-|" options:0 metrics:@{@"margin": @(margin)} views:@{@"blueView" : blueView}];
    [self.view addConstraints:blueViewH];
    
    // 设置蓝色View距离顶部有20的间距, 并且高度等于50   Y 和高度
    // 设置红色View距离蓝色底部有20的间距, 并且红色View的高度等于蓝色View的高度 Y 和高度
    // 并且设置红色和蓝色右对齐
    NSArray *blueViewV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];
    [self.view addConstraints:blueViewV];
    
    // 注意: 在VFL语句中, 是不支持乘除法
//    NSArray *redVeiwH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView )]" options:0 metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];
//    [self.view addConstraints:redVeiwH];
    
    NSLayoutConstraint *redVeiwW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redVeiwW];
}


@end

 

 

基于Autolayout的动画

● 在修改了约束之后,只要执行下面代码,就能做动画效果 [UIView animateWithDuration:1.0 animations:^{

 [添加了约束的view layoutIfNeeded];

}];