使用Auto Layout中的VFL(Visual format language)--代码实现自动布局转

Posted 2020-06-09

本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI。

一：API介绍

1. NSLayoutConstraint API

1 2 3 4

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

参数介绍:

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.UIView API

1 2	UIView - (void)addConstraints:(NSArray *)constraints;

在上面1中返回值类型是NSArray,而现在这个方法的参数也刚好是一个NSArray类型。那么直接把上一个方法的返回值当作这个方法的参数就可以了。如果你有多个VFL，你也可以利用可变数组( NSMutableArray)把这多个VFL返回的数据拼在一起，然后再调用addConstraints:方法。

二：简单的使用

1.单控件的使用(没有与其他控制有关联，比如空隙等)

新建一个单页面项目Single View Application）,在项目里面加上下面这段代码代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

#import "ViewController.h" @interface ViewController ()    @end    @implementation ViewController    - (void)viewDidLoad {     [super viewDidLoad];     UIButton *button=[[UIButton alloc]init];     [button setTitle:@"点击一下" forState:UIControlStateNormal];     button.translatesAutoresizingMaskIntoConstraints=NO;     [button setBackgroundColor:[UIColor blackColor]];     [self.view addSubview:button];     NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|" 　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];            NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]" 　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];            [self.view addConstraints:constraints1];     [self.view addConstraints:constraints2];              }    @end

运行程序，效果图如下：

可以看到，我们新建的button已经出来，证明上面的自动布局语句（VFL）已经生效。那么我们来详细看看这些语句的意义是什么。

1 2 3 4

NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|" 　　　　　　　　　　　　　　　　　　　　　　　　　options:0 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];

这里的意思是：button在水平方向上距离它的superView，左右各20px，比如在这里他的大小就是320-20*2=280.在@"H:|-[button]-|"这个语句中，其中"H:"是表示这是水平方向上的约束，"|"是表示superView，"-"表示一个间隔空间，这个间隔如果是如superView之间的，那么就是20px,如果是两个同级别的view，比如@"[button]-[button1]"，那么这里表示的是8px.

1 2 3 4

NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]" 　　　　　　　　　　　　　　　　　　　　　　　　　options:0 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];

跟上面有点不同,@"V:|-20-[button(==30)]",其中"V:"中代表这是垂直方向上的约束,"|-20-"这里的意思就是距离头部为20px，相当于y坐标为20。后面的"[button(==30)]"，是指定这个button的高度为30px.y坐标固定了，高度固定了，那这个view的约束就完成了。如果你有需要，你的高度值（或者其他同类型的）可以使用>=,==,<=来表示，甚至你可以组合来用，像上面的30，你可以指定一个区别，比如:(>=30,<=40)，这同样也是可以的。如果你想表达他的优先级别,可以使用@"V:|-20-[button([email protected])]",这个@1000，就是他的级别了。你可以适配XIB或者SB对它的优先级做更多的处理.

PS:值得注意的是,在用代码创建的UIView在，一定要加上下面这句代码

1	button.translatesAutoresizingMaskIntoConstraints=NO;

如果没有上面这一行，你的约束将不生效,控制台会输出一连串的错误.

2:多控件之间关联使用

基于上面的代码上，我们重新加了一段代码，现在的全部代码如下:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

#import "ViewController.h" @interface ViewController ()    @end    @implementation ViewController    - (void)viewDidLoad {     [super viewDidLoad];     UIButton *button=[[UIButton alloc]init];     [button setTitle:@"点击一下" forState:UIControlStateNormal];     button.translatesAutoresizingMaskIntoConstraints=NO;     [button setBackgroundColor:[UIColor blackColor]];     [self.view addSubview:button];     NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|" 　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0 　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil  　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];            NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]" 　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];            [self.view addConstraints:constraints1];     [self.view addConstraints:constraints2];                   UIButton *button1=[[UIButton alloc]init];     button1.translatesAutoresizingMaskIntoConstraints=NO;     [button1 setTitle:@"请不要点击我" forState:UIControlStateNormal];     [button1 setBackgroundColor:[UIColor redColor]];     [self.view addSubview:button1];            NSArray *constraints3=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1]-|" 　　　　　　　　　　　　　　　　　　　　　　　　　　　　 options:0 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1)];            NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==30)]" 　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];            [self.view addConstraints:constraints3];     [self.view addConstraints:constraints4];        }

运行的效果图如下:

通过代码对比，可以看出，在button1的垂直方向约束上，我们做了一点改变。水平方向上跟button一样，这里就不多作解释。我们来看看垂直方向上的。

1 2 3 4

NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==30)]" 　　　　　　　　　　　　　　　　　　　　　　　　　options:0 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];

VFL语句为：@"V:[button]-[button1(==30)]"，这里用到了两个view在VFL语句里面。刚才我们也说到，"-"在同一级别的View上使用的时候表示的间距为8个像素点,整一句的意思就是button1的y坐标离button有8个像素点.在不使用auto layout的时候，可以这样表达CGRectGetMaxY(button.frame)+8.

我再改一下上面这一句VFL

1 2 3 4

NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==height)]" 　　　　　　　　　　　　　　　　　　　　　　　　　options:0 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:@{@"height":@30} 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];

再次运行，你会发现，效果是一样的。这样你就知道怎么动态去给view加上高度或者宽度，或是其他间距了吧？

那么，如何做到两个View，或是多个View之间等高，或者等宽呢？能用VFL可以做到吗？除了通过上面的直接赋值宽高的数值外，VFL还提供了另外一种写法用于等宽等高上。

还是上面的Demo，我们改一下代码

1 2 3 4 5 6 7 8 9

NSArray *constraints3=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1(button)]" 　　　　　　　　　　　　　　　　　　　　　　　　　options:0 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];            NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(button)]" 　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0 　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil 　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];

通过@"H:|-[button1(button)]"，@"V:[button]-[button1(button)]"，这两句就可以轻松实现等宽等高了！

三：最后对格式的字符串作一个总结介绍

功能　　　　　　　　表达式

水平方向  　　　　　　  H:

垂直方向  　　　　　　  V:

Views　　　　　　　　 [view]

SuperView　　　　　　|

关系　　　　　　　　　>=,==,<=

空间,间隙　　　　　　　-

优先级　　　　　　　　@value

 

NSLayoutFormatDirectionLeadingToTrailing 怎么理解？

 

NSLayoutFormatDirectionLeadingToTrailing

Arrange objects in order based on the normal text flow for the current user interface language. In English this results in the first object being placed farthest to the left, the next one to its right, and so on. In right to left languages this ordering is reversed.

意思就是默认的排版方式，就是从左往右看，从上往下看。

 

于是就引出了：

NSLayoutFormatDirectionLeftToRight  与 NSLayoutFormatDirectionRightToLeft

 

也不难理解，前一个是从屏幕左沿布局开始算起，后一个是从屏幕右沿开始算起。