一、VFL介绍

1、VFL全称是Visual Format Language，翻译过来是“可视化格式语言”

2、VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言

3、VFL:需有横竖两个方向的约束

 横向: H:

 竖向: V:

4、核心思想

 约束视图和视图之间的关系来分配屏幕上的位置

5、使用AutoLayout 必须把translatesAutoresizingMaskIntoConstraints禁用才可以使用

6、添加约束之前，一定要保证相关控件都已经在各自的父控件上不用再给view设置frame

二、VFL示例

1、在水平方向上 canelButton的宽是72，acceptButton宽是50，它们2个控件之间的间距是12

 H:[cancelButton(72)]-12-[acceptButton(50)]  ： 是一个字符串

2、在水平方向上 wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）

 H:[wideView(>=60@700)]

3、竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox

 V:[redBox]-[yellowBox(==redBox)]     其中redBox是控件

4、(竖线“|” 表示superview的边缘)水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度

 H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

三、使用步骤

1、禁用autoResizing      resize |ˌriːˈsaɪz| 改变.....的大小

  view.translatesAutoresizingMaskIntoConstraints = NO;

2、创建一个字典，内部包含VFL语句中用到的控件，

  NSDictionaryOfVariableBindings(...)

3、使用VFL来创建约束数组

  format ：VFL语句

  opts ：约束类型

  metrics ：VFL语句中用到的具体数值

  views ：VFL语句中用到的控件

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

4、给父试图添加数组约束

  addConstraints

• 具体的代码如下  /*

•  * VFL 需要了解的内容

•  *

•  * 1.苹果推出的一种用代码写的autolayout可视化格式语言

•  *

•  * 2.需要对横竖两个方向进行约束

•  *

•  * 3.使用VFL前要禁用autoresing

•  *

•  * 4.给视图添加约束之前要确保在父视图上面

•  *

•  * 使用感受：不在想使用第二次

•  */

•

•  //1.把视图放到父视图

•

•   UIView *view1 = [[UIView alloc]init];

•

•   view1.backgroundColor = [UIColor redColor];

•

•   [self.view addSubview:view1];

•

•   //2.禁用autoresing

•

•   view1.translatesAutoresizingMaskIntoConstraints = NO;

•

•   //3.绑定视图

•

•   NSDictionary *dict = NSDictionaryOfVariableBindings(view1);

•

•   //4.生成一个约束数组

•

•   NSArray *contrainH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[view1]-10-|" options:nil metrics:nil views:dict];

•

•   NSArray *contrainV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-50-[view1]-50-|" options:nil metrics:nil views:dict];

•

•   //5.将约束添加到（父视图上面）视图上面

•

•    [self.view addConstraints:contrainH];

•

•    [self.view addConstraints:contrainV]; 

• 效果图：

诚信工作室  供稿