VFL语言

常见符号
H:	水平布局（默认）
V:	垂直布局
|	superView的边界,水平布局模式下,放在左边是左边界，放在右边是右边界；处置布局模式下，则相应的为上边界和下边界
-	标准间隔距离
-N-	长度为N像素点的间隔距离
[view]	被约束的view
==，>=，<=	用于限制view的长宽
@N	约束生效的优先级，最高是1000，等级高的优先考虑

 

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(...)

NSDictionaryOfVariableBindings() 这是一个宏,来绑定一些变量(主要是需要添加约束的view),在其中绑定过的view可以使用到vfl中

NSLayoutFormatOptions:这是上面介绍过的那个方法的opts参数的枚举类型, 文档中一目了然..可以通过名字看出作用不多做说明.

metrics: 主要说明一下这个参数,一个字典类型的参数.用来说明vfl中用到的变量所代表的值.举个栗子, 你需要设置两个view的间距是一个根据屏幕大小来确定的 就需要一个变量.

需要创建一个字典@{@"key":value,.....} ,之后就可以在vfl中使用key来代替你所要的值.

views: 这个很好理解,就是需要加上约束的view嘛.当然这个字典和metrics是一样的.. 在vfl中使用key来代替view.

NSLayoutFormatOptions

NSLayoutFormatAlignAllLeft  = NSLayoutAttributeLeft  对象的标准矩形区域左侧

NSLayoutFormatAlignAllRight = NSLayoutAttributeRight 对象的标准矩形区域右侧

NSLayoutFormatAlignAllTop = NSLayoutAttributeTop  对象的标准矩形区域上侧

NSLayoutFormatAlignAllBottom = NSLayoutAttributeBottom  对象的标准矩形区域下侧

NSLayoutFormatAlignAllLeading = NSLayoutAttributeLeading  对象的标准矩形区域前沿

NSLayoutFormatAlignAllTrailing = NSLayoutAttributeTrailing 对象的标准矩形区域末尾

NSLayoutFormatAlignAllCenterX = NSLayoutAttributeCenterX 对象的标准矩形区域x轴中点

NSLayoutFormatAlignAllCenterY = NSLayoutAttributeCenterY 对象的标准矩形区域y轴中点

NSLayoutFormatAlignAllBaseLine = NSLayoutAttributeBaseLine  对象的baseline

 

VFL方法总结

1.一个控件
     // 设置约束条件并添加
    // 在水平方向上：_button距离父视图左侧的距离为20
    [tempConstraintsMutableArray addObjectsFromArray: [NSLayoutConstraint 
                                   constraintsWithVisualFormat:@"H:|-20-[_leftButton(==200)]" options:0 
                                     views:NSDictionaryOfVariableBindings(_leftButton)]];
    // 在竖直方向上：_button距离父视图的顶部的距离为60，并设置_button的高度为100
    [tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint 
                                     constraintsWithVisualFormat:@"V:|-60-[_leftButton(==100)]"options:0 metrics:nil                                                     views:NSDictionaryOfVariableBindings(_leftButton)]];
    // 添加约束条件
    [self.view addConstraints:tempConstraintsMutableArray];

　　//@"H:|-20-[_leftButton(==200)]”
　　注释：H 表示水平方向,|表示surpview,-x-表示某某之间的间距,[控件名],(== 宽度), == >=,<=

　　//@"V:|-60-[_leftButton(==100)]
　　注释：V表示垂直，(==高度)

2.两个控件
[tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:
                                      @"H:|-50-[_leftButton(==100)]-100-[_rightButton(==100)]"
                                     options:0 metrics:nil views:NSDictionaryOfVariableBindings(_leftButton, _rightButton)]];

[tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:
                          @"V:|-100-[_leftButton(==100)]" options:0
                           metrics:nil                    
                           views:NSDictionaryOfVariableBindings(_leftButton)]];   
 
 // 在垂直方向上：给_rightButton设置距离父视图顶部50，_rightButton高度为100
[tempConstraintsMutableArray addObjectsFromArray:
               [NSLayoutConstraint constraintsWithVisualFormat:
                @"V:|-100-[_rightButton(==_leftButton)]"options:0 metrics:nil 
                views:NSDictionaryOfVariableBindings(_rightButton,_leftButton)]];
   
    // 和上面的设置类似，只是在水平方向上的
    // 在水平方向上：设置_leftButton距离父视图左侧为50，_leftButton的宽度为50
    //    [tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[_leftButton(==50)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_leftButton)]];
    // 在水平方向上：设置_rightButton距离父视图左侧为50，_rightButton的宽度为50
    //    [tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[_rightButton(==_leftButton)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_rightButton, _leftButton)]];
  
// 4. 给视图添加约束
 [self.view addConstraints:tempConstraintsMutableArray];

//@"H:|-50-[_leftButton(==100)]-100-[_rightButton(==100)]"
注释：在水平方向上：设置_leftButton距离父视图左侧距离为50，_leftButton的宽度为100，_rightButton距离_leftButton的横向距离为50，
_rightButton的宽度设置为100

@"V:|-100-[_leftButton(==100)]"
注释:垂直高度,与父视图上间距为100,leftButton的高度为100，

@"V:[_rightButton(==_leftButton)]-50-|"
注释:垂直高度,与父视图下间距为50,leftButton的高度和rightButton相等

//    //1.设置按钮的高度和间距
//    [tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:
//                                                      @"H:|-100-[_leftButton(==100)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_leftButton)]];
//   
//    [tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:
//                                                      @"H:|-100-[_rightButton(==100)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_rightButton)]];
//   
//    //1.设置按钮的宽度和间距
//    [tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:
//                                                      @"V:|-100-[_leftButton(==200)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_leftButton)]];
   
   
    //3.设置按钮的上下的间距
//    [tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:
//                                                      @"H:|-100-[_leftButton(==100)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_leftButton)]];
//   
//    [tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:
//                                                      @"H:[_rightButton(==100)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_rightButton)]];
   
    //1.设置按钮的宽度和间距
    [tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:
                                                      @"V:|-44-[_leftButton(==200)]" options:0 metrics:nil 
                                                     views:NSDictionaryOfVariableBindings(_leftButton)]];

    [tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:
                                                      @"V:[_leftButton(==_rightButton)]" options:0 metrics:nil 
                                                      views:NSDictionaryOfVariableBindings(_leftButton,_rightButton)]];

//    [tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:
//                                                      @"V:|[_leftButton]-50-[_rightButton]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_leftButton,_rightButton)]];

    [tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:
                                                      @"H:|-50-[_leftButton(==50)]-10-[_rightButton(==50)]" 
                                                     options:0 
                                                    metrics:nil 
                                                    views:NSDictionaryOfVariableBindings(_leftButton,_rightButton)]];


3：使控件居中显示
NSMutableArray *tempConstraintsMutableArray = [NSMutableArray array];

//设置高度
[tempConstraintsMutableArray addObjectsFromArray: [NSLayoutConstraint 
　　　　　　　　　　　　　　　　　　constraintsWithVisualFormat:@"V:[_leftButton(200)]"
   　　　　　　　　　　　　　　　　options:0 metrics:nil views:NSDictionaryOfVariableBindings(_leftButton)]];

 //设置宽度
[tempConstraintsMutableArray addObjectsFromArray:[NSLayoutConstraint 
　　　　　　　　　　　　　　　　　　constraintsWithVisualFormat:@"H:[_leftButton(100)]"
  　　　　　　　　　　　　　　　　　options:0 metrics:nil views:NSDictionaryOfVariableBindings(_leftButton)]];
 // 添加约束条件
[self.view addConstraints:tempConstraintsMutableArray];
   
  //leftButton在view视图中X轴居中
 [self.view addConstraint:[NSLayoutConstraint constraintWithItem:_leftButton
                                                          attribute:NSLayoutAttributeCenterX
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeCenterX
                                                         multiplier:1.f constant:0.f]];
    //leftButton在view视图中Y轴居中
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:_leftButton
                                                          attribute:NSLayoutAttributeCenterY
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeCenterY
                                                         multiplier:1.f constant:0.f]];

//设置水平方向上的约束，代表的意思是blueView离父view左边间距为30，和redView的间距为30,redView和父view的右间距为30，redView的宽度和blueView的宽度相等
NSString *hVFL = @"H:|-30-[blueView]-30-[redView(==blueView)]-30-|";
NSArray *hCons = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllBottom | NSLayoutFormatAlignAllTop metrics:nil views:@{@"blueView":blueView,@"redView":redView}];
self.view addConstraints:hCons];