iOS自动布局(Autolayout)之VFL（可视化格式语言）

作为一个移动端的程序员，布局永远都是需要打交道的东西，最初刚入门那会，用的storyboard,xib手动拖拽的方式设置约束，看起来是直观了，但是费时又费力还吃力不讨好，感觉还是没有纯纯的代码好用。

代码约束最初还是靠本人机密的计算，算比例算数值各种算，约束是没问题了，时间浪费了很多，计算能力倒是增强了不少 T-T。。。。。。。。

后来我发现了个好东西

UIView *v1 = [[UIView alloc] initWithFrame:CGRectZero];

v1.translatesAutoresizingMaskIntoConstraints = NO;

v1.backgroundColor = [UIColor redColor];

[self.view addSubview:v1];

UIView *v2 = [[UIView alloc] initWithFrame:CGRectZero];

v2.backgroundColor = [UIColor grayColor];

v2.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:v2];//添加两个允许自动布局的子视图

[self.viewaddConstraint:[NSLayoutConstraint constraintWithItem:v1attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeHeight multiplier:0.5constant:0]];//设置子视图的高度是父视图高度的一半 大致就是这样一种约束形式，是不是觉得很长，而且没有注释的话一眼还看不出来是哪哪的约束，于是我又找了找，发现了这个

                                          VFL

Visual Format Language，简称VFL 即“可视化格式语言”。

VFL是一种声明性语言，VFL允许您通过一个格式化后的代码字符串迅速定义视图的自动布局约束

他给人的感觉就是直观，因为你会发现很多的这个

                                        H:|-20-[view1]-30-[view2(==view1)]-20-|

看到这个是不是蒙圈了，不要急，其实这东西还是蛮简单的，慢慢看看规则一学就会了，接下来我就快速的解释一下

首先

• (NSArray<__kindof NSLayoutConstraint > *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary)metrics views:(NSDictionary*)views; 运用这个api就能简单实现约束了，当然VFL还是要写的

format 格式规范的约束。

opts 描述VFL中的所有对象的属性和布局的方向 。

metrics 一个字典，字典的key必须是在VFL字符串中被使用的字符串，值必须是NSNumber对象

views 出现在在VFL字符串中的视图组成的字典， 字典的key必须是在VFL字符串中被使用的字符串。并且其值必须是一个View对象 先来一段代码

_view1= [[UIViewalloc]init];

_view1.backgroundColor= [UIColorwhiteColor];

_view1.translatesAutoresizingMaskIntoConstraints=NO;

_view2= [[UIViewalloc]init];

_view2.backgroundColor= [UIColorgreenColor];

_view2.translatesAutoresizingMaskIntoConstraints=NO;

UIView*view4 = [[UIViewalloc]init];

view4.backgroundColor= [UIColorpurpleColor];

view4.translatesAutoresizingMaskIntoConstraints=NO;

[self.viewaddSubview:_view1];

[self.viewaddSubview:_view2];

self.view.backgroundColor= [UIColorgrayColor];

UIView*view1 =_view1;

UIView*view2 =_view2;

NSDictionary*bindings =NSDictionaryOfVariableBindings(view1,view2);

NSArray*constraints= [NSLayoutConstraintconstraintsWithVisualFormat:@”H:|-20-[view1]-30-[view2(==view1)]-20-|” options:0metrics:nilviews:bindings];

NSArray*constraints2= [NSLayoutConstraintconstraintsWithVisualFormat:@”V:|-20-[view1(40)]” options:0metrics:nilviews:NSDictionaryOfVariableBindings(view1)];

NSArray*constraints3= [NSLayoutConstraintconstraintsWithVisualFormat:@”V:|-20-[view2(40)]” options:0metrics:nilviews:NSDictionaryOfVariableBindings(view2)];

[self.viewaddConstraints:constraints];

[self.viewaddConstraints:constraints2];

[self.viewaddConstraints:constraints3]; 效果是这样的

屏幕怎么转我的控件在我的控制之中这就是VFL的方便之处，哈哈、。

解释开始：

VFL 语法

(<方向>:)?(<父视图前><连接>)？[<被布局视图>]！（<连接><其他视图>）*（<连接><父视图后>）？

1 2 3 4 5

？问号指的是一个可选项，不是必需的。*指的是该项会出现0次或者多次。！代表必需指定

虽然该定义看上去令人生畏，但是事实上这些字符串相当容易构建。

例如：

VFL格式字符串:

1.方向：约束在坐标轴上的方向。H代表水平方向排列，V代表垂直方向排列，不指定代表默认值水平方向

2.父视图前：关联到父视图前边缘。 垂直方向上的被布局视图顶部边缘与父视图顶部边缘的距离，水平方向上的被布局视图前边缘与父视图前边缘的距离

3.被布局视图：你添加layout的视图。

4.其他视图：被布局视图关联的另外一个视图

5.父视图后：关联到父视图后边缘。垂直方向上的被布局视图底部边缘与父视图底部边缘的距离，水平方向上的被布局视图后边缘与父视图后边缘的距离

视图名称

视图的名称被一对方括号包围，例如你可以使用[thisView],[thatView]。当使用变量绑定字典时，视图的名称指的是本地变量名。

父视图

使用父视图的典型包括：

将一个视图偏离它的父视图的某条变，例如“V:[view]-8-”

创建一列或一行与父视图对齐的视图，例如“V:[view1]-[view2]-[view3]-[view4]”

连接

连接指定视图直接的间隔。每个视图（包括父视图的引用）间的连接标明了要添加的间距。

空连接

空连接看起来像“ H:[view1][view2]”,在每个视图的方括号直接没有任何符号，没有指定任何东西，显示效果将是两个视图仅仅的贴在了一起

标准间隔

连接符 - 代表一个标准的固定间隔，比如“ H:[view1]-[view2]”，每个视图直接增加了一个小的间隙，尽管官方并没有文档化，但标准间隔一般对于视图到视图布局为8点，对于视图到父视图为20点。标准间隔确保相关联但是又完全分离的视图以足够的视觉间隔显示。

数字间隔

可以在两个方括号直接使用一对连字符中间夹着数字来设置准确的间隔大小，约束“ H:[view1]-30-[view2]”在两个视图之间增加了一个30点的间隔。

引用父视图

与父视图的间隔

灵活间隔

这个规则可以读作“至少0点间距”，提供了使视图分开的更灵活的方式。

当说“至少50点”(>50 )或者“不超过30带你”(<=30)时，不能将间距和标准间隔结合起来是有。例如>=-，<=1是非法的。你只能使用等值数值。记住，标准的视图到时间间隔是8点，而视图到父视图的间隔是20带你。

圆括号

为了清晰可见，关系(>=0)被放在一堆括号中，括号将非常简单的正数或者负数或者度量名间隔区分开来

在如何表达规则时，你可以对可视化约束有很大的灵活性。如下规则都实现两个相互眦邻的视图：

[view1][view2]

[view1]-0-[view2]

[view1]-(0)-[view2]

[view1]-(==0)-[view2]

[view1]-(>=0,<=0)-[view2]

[view1]-(==0@1000)-[view2]

[view1]-(>=0,<=0,<=30)-[view2]

当在括号中添加多个关系时，使用逗号分隔各项。符号@表示一个优先级

负数

比如为任何使用负数值的间隔加上括号。如下约束是非法的：

V:[view1]–5-[view2]

负数在可视化约束中是允许的，正确写法

V:[view1]-(-5)-[view2]

优先级

在任何连接或者尺寸规则后拼接一个@符号，@符号后是一个想要设置的优先级。为了清晰可见，最好将其使用圆括号括起来

例如：

间隔规则优先级默认是必须的（值为1000），因为将优先级降到了20，所以两个视图改变尺寸的方式可以能会影响布局。

多视图

格式视图并不局限于一个或者两个视图，我可以很容易的插入第三个，第四个或者更多。

视图尺寸

VFL除了可以用方括号分隔视图名称外，还可以在方括号中指定视图的尺寸。可以在名称之后的圆括号里指定值，例如：

可以指定一个视图的宽度为120点固定值：“H:[view1(120)]”。如果你喜欢显示的说明关系，也可以添加这样的格式“H:[view1(==120)]”

可以指定一个视图的宽度至少50点，使用如下约束：“H:[view1(>=50)]”,50-70点之间“H:[view1(>=50，<=70)]”

不是所有视图都需要参与尺寸匹配。一个请求可以围绕一个基本视图创建侧翼视图

看的好晕，好吧其实我也做了个小demo，顺便放了很多其它东西，如果觉得有用可以自己下载

VFLDemo：https://github.com/taosiyu/TSYVFLDemo

可以的话给个star