VFL 语句

VFL 语句

VFL 语句可以用来写控件之间的自动布局，调用的方法

[NSLayoutConstraint constraintsWithVisualFormat: options: metrics: views:]

参数

Format: VFL语句

options: 枚举参数，是一个布局方向的参数，默认写0

metrics: 一个字典，在format中使用了动态数据，可以用它来寻找动态数据的值

比如： @"H:|-[button(==width)]-|，表示这个button的宽度为width，而width的值就是字典里面对应的key为width的值，如果没有找到这个值，app就会crash.

views: 这是所有vfl语句中使用到的view

上面的例子可以这样写：NSDictionaryOfVariableBindings(button)

如果你使用到了多个view，就可以这样NSDictionaryOfVariableBindings(button,button1,button3...)，这个名字也要跟参数format中的 一 一 对应，缺一不可.

规范：

一、“H” “V” 方向

不写H/V就表示 横向

“H” 表示横向 横向描述关系

“V” 表示纵向 纵向描述关系

二、“[]” 、“|” 、“-” 、“()” 符号

“[]”：表示View

“|”：表示superView，用来确定View的上下左右关系

“-”：表示一个间隔 （这个间隔如果是子控件和superView之间的间隔，那么就是20px，如果是同一级别的View之间的，那么就是8px）

“()”：表示间隔或者控件的大小数值，也可表示另一个View，里面可以有 == >= <= > < 等大小关系

例子：

1. H:|-[_testView]-| 表示距离父视图的左右两边都是20px

2. V:|-[_testView]-| 表示距离父视图的上下两边都是20px

3. H:|[_testView] 表示和父控件的左边界对其，右边忽略

4. |-[view1(view2)] 表示view1和view2的宽度相等

5. H:|-(20)-[_testView(300)] 和 H:|-(20)-[_testView(==300)] 一样的效果，_testView为300的宽度

6. H:[_testView(300)] _testView为300的宽度

三、@符号

@符号表示优先级，如 V:|-50@750-[view(55)]，或者写到metrics里面更好。具体定义查看UILayoutPriority。有几个固定的数值。1000表示必须支持。

四、options

这个看具体需要，如果是竖排V布局，可以添加NSLayoutFormatAlignAllLeft，让他们左边对齐。

五、参数 views

views中放置是的接下来要操作的视图列表，直接使用 _变量 的方式，不要使用属性，因为属性得到的值可能不是一个变量，而是一个计算结果。

例如：

NSMutableDictionary *dicViews = [NSMutableDictionary dictionaryWithDictionary:NSDictionaryOfVariableBindings(_testView)];

六、参数 metrics

metrics参数是在VFL语句中的一些间隔或者大小的变量

NSMutableDictionary *metrics = [NSMutableDictionary dictionaryWithObjectsAndKeys:@(padding), @"padding", nil];

注意

1. 在VFL语句中使用的视图变量是使用 [_变量] 的方式，而不能使用[self.属性]的方式，否则编译会报错

2. addConstraint(s)前，view应该已经被addSubView上去了

3. 不必给views写frame

4. 给必要的view关掉AutoresizeingMask自动布局，否则设置会无效

   self.testView.translatesAutoresizingMaskIntoConstraints = NO;

5. UILabel换行要写linebreakMode，要写numberOfLines

6. UILabel要想换行，一定要添加preferredMaxLayoutWidth。否则没法初始化宽度。

七、代码

    self.testView = [[UIView alloc] init];

    self.testView.backgroundColor = [UIColor redColor];

    //关闭其自动布局
    self.testView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:self.testView];

    CGFloat padding = 60.0f;

    NSString *HVLCString = @"H:|[_testView]|";

    NSString *VVLCString = @"V:|-(padding)-[_testView]-(padding)-|";


    //在VLC里面涉及到的语句
    NSMutableDictionary *dicViews = [NSMutableDictionary dictionaryWithDictionary:NSDictionaryOfVariableBindings(_testView)];

    //在VLC里面涉及到的间隔大小
    NSMutableDictionary *metrics = [NSMutableDictionary dictionaryWithObjectsAndKeys:@(padding), @"padding", nil];

    NSArray *HConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:HVLCString options:NSLayoutFormatAlignAllLeft metrics:metrics views:dicViews];

    NSArray *VConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:VVLCString options:NSLayoutFormatAlignAllLeft metrics:metrics views:dicViews];

    [self.view addConstraints:HConstraintArray];

    [self.view addConstraints:VConstraintArray];

    //不能下面这样写，应该将其分开写
    //[self.view addConstraints:@[HConstraintArray, VConstraintArray]];