VFL－自动布局

VFL全称是Visual Format Language，翻译成中文是“可视化格式语言”，VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言

VFL的使用：

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

- 它返回一组constraint. 

- format：是VFL字串（VFL语句）

- opts   ：约束类型

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

- views  ：是需要constraint关系的所有控件(也可以是一个)

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的边缘）

1)"|"表示superview. 

 

    |-间距-[view1对象名]-(>=20)-[view2对象名]

 

    不写H/V就表示横向，间距可以写固定值也可写>/<。

 

    形象化的理解，"|"是用来确定view上、下、左、右关系的。

 

    想要确定从上到下的关系，就加V:|     那么这个vfl字串就可以描述从上到下的view们的关系。

 

2)方括号表示view，圆括号表示尺寸数值。支持大小等于。或者另一个view　|-[view1(view2)]，v１的宽度等于v２。

 

3)优先级用＠表示。如V:|-50@750-[view(55)]，或者写到metrics里面更好。

 

    具体定义查看UILayoutPriority。有几个固定的数值。1000表示必须支持。

 

4)options，这个要看具体需要。如果是竖排V布局，可以添加NSLayoutFormatAlignAllLeft，让他们对齐。

 

    根据需要也可以添加按位或NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight。

- 它返回一组constraint. 

- format是你的VFL字串，等下讲。

 

- opts自己点去头文件看。有些情况会用，等下有例子。

 

- metrics是一个奇妙的字典，是你自己定义的。这个字典里面的key可以写在format字串中。编译器解析时，自动替换为metrics字典中的value。等下有例子。

 

- views是需要constraint关系的所有view.(也可以是一个)

下面是练习代码：

#import "DXTVFLTest.h"

@implementation DXTVFLTest

- (void)viewDidLoad {

    [super viewDidLoad];

    

    UIView *blueView = [[UIView alloc] init];

    blueView.backgroundColor = [UIColor blueColor];

    // 不要将AutoresizingMask转为Autolayout的约束

    blueView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:blueView];

    

    UIView *redView = [[UIView alloc] init];

    redView.backgroundColor = [UIColor redColor];

    // 不要将AutoresizingMask转为Autolayout的约束

    redView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:redView];

    

    // 间距

    NSNumber *margin = @20;

    

    // 添加水平方向的约束

    NSString *vfl = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|";

    NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);

    NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);

    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];

    [self.view addConstraints:constraints];

    

    // 添加竖直方向的间距

    NSNumber *height = @40;

    NSString *vfl2 = @"V:[blueView(height)]-margin-|";

    NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, height);

    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];

    [self.view addConstraints:constraints2];

    

    // 添加红色剩余的约束

    //    NSLayoutConstraint *redContraint1 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];

    //    NSLayoutConstraint *redContraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];

    //    [self.view addConstraint:redContraint1];

    //    [self.view addConstraint:redContraint2];

}

- (void)test2

{

    UIView *blueView = [[UIView alloc] init];

    blueView.backgroundColor = [UIColor blueColor];

    // 不要将AutoresizingMask转为Autolayout的约束

    blueView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:blueView];

    

    // 间距

    NSNumber *margin = @20;

    

    // 添加水平方向的约束

    NSString *vfl = @"H:|-margin-[blueView]-margin-|";

    NSDictionary *views = NSDictionaryOfVariableBindings(blueView);

    NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);

    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:mertrics views:views];

    [self.view addConstraints:constraints];

    

    // 添加竖直方向的间距

    NSNumber *height = @40;

    NSString *vfl2 = @"V:|-margin-[blueView(height)]";

    NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, height);

    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];

    [self.view addConstraints:constraints2];

}

- (void)test1

{

    UIView *blueView = [[UIView alloc] init];

    blueView.backgroundColor = [UIColor blueColor];

    // 不要将AutoresizingMask转为Autolayout的约束

    blueView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:blueView];

    

    // 添加水平方向的约束

    NSString *vfl = @"H:|-20-[abc]-20-|";

    NSDictionary *views = @{@"abc" : blueView};

    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:nil views:views];

    [self.view addConstraints:constraints];

    

    // 添加竖直方向的间距

    NSString *vfl2 = @"V:|-20-[abc(40)]";

    NSDictionary *views2 = @{@"abc" : blueView};

    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:nil views:views2];

    [self.view addConstraints:constraints2];

}

@end

实际操作中的问题：

1.addConstraint(s)前，view应该去部被addSubView上去了。

2.不必给views写frame

3.给必要的view关掉AutoresizeingMask。[_aView setTranslatesAutoresizingMaskIntoConstraints:NO];

4.UILabel换行要写linebreakMode,要写numberOfLines(iOS7.0默认好像是1，坑爹了)

5.UILabel要想换行，一定要添加preferredMaxLayoutWidth。否则没法初始化宽度。

- 它返回一组constraint. 

- format是你的VFL字串，等下讲。

 

- opts自己点去头文件看。有些情况会用，等下有例子。

 

- metrics是一个奇妙的字典，是你自己定义的。这个字典里面的key可以写在format字串中。编译器解析时，自动替换为metrics字典中的value。等下有例子。

 

- views是需要constraint关系的所有view.(也可以是一个)