AutoLayout 使用之代码实现(VFL)

目录[-]

一、什么是VFL？

二、VFL的图形表示

三、VFL的使用规则

四、VFL使用的前提和方法

1、设置translatesAutoresizingMaskIntoConstraints属性

2、两种常用的约束格式（NSArray、NSLayoutConstraint）

(1)NSArray方法（适用于添加水平和垂直的约束）

(2) NSLayoutConstraint (适用于添加居中的约束)

五、代码实现上篇博客中storyboard的布局（AutoLayout 使用之storyboard演示）

一、什么是VFL？

VFL是 Visual format language （可视格式语言）的缩写,是Apple针对 AutoLayout
设计的一种语言。通过VFL，我们能在代码中灵活的使用AutoLayout而做到真正的不受设备控制！

二、VFL的图形表示

先看一个图形：





它代表了有两个button ，cancel 和 accept，他们的位置关系是左右相隔一段距离。

将他们用简单的方式画出来，变成了下述图：





将其再次简化，变成了如下一种格式：





而VFL正正是用上图这样的一种直观的格式来展现约束的。

不妨先看一下上述布局用VFL的代码实现，假设cancelButton和acceptButton相隔30像素，那么为两个button添加约束的代码为：

?
这样的一个代码就实现了上述约束的布局。有些人肯定会说，太麻烦了，还不如在sb上随便点两下。这个，确实是的。但是，当用sb无法一次性满足N个设备时，VFL就发挥出它的顽强精神了！

三、VFL的使用规则

/****************************************************************/

“|: ”表示父视图 eg：

?
表示 cancelButton在父视图的左边缘（与父视图的相对位置是 x = 0），常见的有：

1.|-[view]-|: 视图处在父视图的左右边缘内

2.|-[view] : 视图处在父视图的左边缘

3.|[view] : 视图和父视图左边对齐；

/****************************************************************/

“-:”表示距离，eg：

?
表示cancelButton长50像素 和acceptButton的间隔是30像素

?
表示cancelButton 离superView的左边缘为50个像素；

/****************************************************************/

V: :表示垂直

?
表示cancelButton离父视图顶端100个像素点，离accpetButton20个像素点

?
表示acceptButton高300像素，离superView底端有20个像素点；

/****************************************************************/

H: 表示水平（可以不写，默认的话就是水平位置）；

/****************************************************************/

>= :表示视图间距、宽度和高度必须大于或等于某个值；

<= :表示视图间距、宽度和高度必须小宇或等于某个值；

== :表示视图间距、宽度或者高度必须等于某个值 ；

?
表示离父视图的距离为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。

?
表示视图的宽度为至少为30 不能超过 500

四、VFL使用的前提和方法

1、设置translatesAutoresizingMaskIntoConstraints属性

如果想用autolayout，那么必须先设置translatesAutoresizingMaskIntoConstraints为NO

例如初始化一个UIButton类对象，那么：

?

2、两种常用的约束格式（NSArray、NSLayoutConstraint）

(1)NSArray方法（适用于添加水平和垂直的约束）

?
参数介绍：

format:此参数为你的vfl语句，比如:@"H:|-[button]-|"

opts:枚举参数，默认写0，具体跟据你所实现的需求去选择你想要的枚举

metrics:这里是一个字典，当在format中使用了动态数据比如上现这句:@"H:|-[button(==width)]-|",表示这个button的宽度为width,那么这个参数去哪里找呢？就是在这个字典里面找到key对就的值，如果没有找到这个值，app就会crash.

views:顾名思义，这是传所有你在vfl中使用到的view，那在上面这句例子中的应该怎么传呢？结果是这样的：NSDictionaryOfVariableBindings(button).如果你使用到了多个view，就可以这样NSDictionaryOfVariableBindings(button,button1,button3...),这个名字也要跟参数format中的一一对应，缺一不可.

?

(2) NSLayoutConstraint (适用于添加居中的约束)

?
?
?
注意：在上述例子中,acceptButton.attribute = self.view.attribute * multiplier + constant

五、代码实现上篇博客中storyboard的布局（AutoLayout
使用之storyboard演示）

附上两张图来回忆一下：









下面用代码实现：

?
目录[-]

一、什么是VFL？

二、VFL的图形表示

三、VFL的使用规则

四、VFL使用的前提和方法

1、设置translatesAutoresizingMaskIntoConstraints属性

2、两种常用的约束格式（NSArray、NSLayoutConstraint）

(1)NSArray方法（适用于添加水平和垂直的约束）

(2) NSLayoutConstraint (适用于添加居中的约束)

五、代码实现上篇博客中storyboard的布局（AutoLayout 使用之storyboard演示）

一、什么是VFL？

VFL是 Visual format language （可视格式语言）的缩写,是Apple针对 AutoLayout
设计的一种语言。通过VFL，我们能在代码中灵活的使用AutoLayout而做到真正的不受设备控制！

二、VFL的图形表示

先看一个图形：





它代表了有两个button ，cancel 和 accept，他们的位置关系是左右相隔一段距离。

将他们用简单的方式画出来，变成了下述图：





将其再次简化，变成了如下一种格式：





而VFL正正是用上图这样的一种直观的格式来展现约束的。

不妨先看一下上述布局用VFL的代码实现，假设cancelButton和acceptButton相隔30像素，那么为两个button添加约束的代码为：

?
这样的一个代码就实现了上述约束的布局。有些人肯定会说，太麻烦了，还不如在sb上随便点两下。这个，确实是的。但是，当用sb无法一次性满足N个设备时，VFL就发挥出它的顽强精神了！

三、VFL的使用规则

/****************************************************************/

“|: ”表示父视图 eg：

?
表示 cancelButton在父视图的左边缘（与父视图的相对位置是 x = 0），常见的有：

1.|-[view]-|: 视图处在父视图的左右边缘内

2.|-[view] : 视图处在父视图的左边缘

3.|[view] : 视图和父视图左边对齐；

/****************************************************************/

“-:”表示距离，eg：

?
表示cancelButton长50像素 和acceptButton的间隔是30像素

?
表示cancelButton 离superView的左边缘为50个像素；

/****************************************************************/

V: :表示垂直

?
表示cancelButton离父视图顶端100个像素点，离accpetButton20个像素点

?
表示acceptButton高300像素，离superView底端有20个像素点；

/****************************************************************/

H: 表示水平（可以不写，默认的话就是水平位置）；

/****************************************************************/

>= :表示视图间距、宽度和高度必须大于或等于某个值；

<= :表示视图间距、宽度和高度必须小宇或等于某个值；

== :表示视图间距、宽度或者高度必须等于某个值 ；

?
表示离父视图的距离为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。

?
表示视图的宽度为至少为30 不能超过 500

四、VFL使用的前提和方法

1、设置translatesAutoresizingMaskIntoConstraints属性

如果想用autolayout，那么必须先设置translatesAutoresizingMaskIntoConstraints为NO

例如初始化一个UIButton类对象，那么：

?

2、两种常用的约束格式（NSArray、NSLayoutConstraint）

(1)NSArray方法（适用于添加水平和垂直的约束）

?
参数介绍：

format:此参数为你的vfl语句，比如:@"H:|-[button]-|"

opts:枚举参数，默认写0，具体跟据你所实现的需求去选择你想要的枚举

metrics:这里是一个字典，当在format中使用了动态数据比如上现这句:@"H:|-[button(==width)]-|",表示这个button的宽度为width,那么这个参数去哪里找呢？就是在这个字典里面找到key对就的值，如果没有找到这个值，app就会crash.

views:顾名思义，这是传所有你在vfl中使用到的view，那在上面这句例子中的应该怎么传呢？结果是这样的：NSDictionaryOfVariableBindings(button).如果你使用到了多个view，就可以这样NSDictionaryOfVariableBindings(button,button1,button3...),这个名字也要跟参数format中的一一对应，缺一不可.

?

(2) NSLayoutConstraint (适用于添加居中的约束)

?
?
?
注意：在上述例子中,acceptButton.attribute = self.view.attribute * multiplier + constant

五、代码实现上篇博客中storyboard的布局（AutoLayout
使用之storyboard演示）

附上两张图来回忆一下：









下面用代码实现：

?