VFL初探

最近准备研究一下自动布局，看了苹果的VFL后，整个人都不好了，密密麻麻的象形文字，呵呵。
说一下使用方法

首先你要有视图，不设置他们的frame,并关闭自动转化约束。

self.redView = [UIView new];  self.redView.translatesAutoresizingMaskIntoConstraints = NO;  self.redView.backgroundColor = [UIColor redColor];self.yellowView = [UIView new];self.yellowView.translatesAutoresizingMaskIntoConstraints = NO;self.yellowView.backgroundColor = [UIColor yellowColor];[self addSubview:_redView];[self addSubview:_yellowView];

之后设置一个引用关联映射

NSDictionary *viewsDictionary = @{@"redView":self.redView,@"yellowView":self.yellowView};

创建约束

NSArray *constraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(100)]"                                                                    options:0                                                                    metrics:nil                                                                      views:viewsDictionary];NSArray *constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[redView(100)]"                                                                    options:0                                                                    metrics:nil                                                                      views:viewsDictionary];

添加约束

[self.redView addConstraints:constraint_H];[self.redView addConstraints:constraint_V];

解释一下其中H 代表横向，V 代表纵向 []中引用其中的视图

类似的

    NSArray *yellowConstraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[yellowView(50)]"                                                                          options:0                                                                          metrics:nil                                                                            views:viewsDictionary];    NSArray *yellowConstraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[yellowView(100)]"                                                                          options:0                                                                          metrics:nil                                                                            views:viewsDictionary];    [self.yellowView addConstraints:yellowConstraint_H];    [self.yellowView addConstraints:yellowConstraint_V];    NSArray *constraint_POS_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[redView]-30-|"                                                                        options:0                                                                        metrics:nil                                                                          views:viewsDictionary];    NSArray *constraint_POS_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView]-10-[yellowView]"                                                                        options:0                                                                        metrics:nil                                                                          views:viewsDictionary];    NSArray *constraint_POS_V1 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[yellowView]"                                                                        options:0                                                                        metrics:nil                                                                          views:viewsDictionary];    [self addConstraints:constraint_POS_V];    [self addConstraints:constraint_POS_H];    [self addConstraints:constraint_POS_V1];

其中 | 代表父视图 例如 @”H:|-20-[redView]-10-[yellowView]” 可以翻译为：在横向中redView距俯视图左边20单位长度，yellowView左边距redView右边10单位长度，是不是醉了。

呵呵，那么其中options,metrics,有什么用呢?

metrics 也可以理解为一个映射关系,options可用来设置对齐关系 详见代码

// 1. Create a dictionary of views and metrics    NSDictionary *viewsDictionary = @{@"redView":self.redView, @"yellowView":self.yellowView};    NSDictionary *metrics = @{@"redWidth": @100,                              @"redHeight": @100,                              @"yellowWidth": @100,                              @"yellowHeight": @150,                              @"topMargin": @120,                              @"leftMargin": @20,                              @"viewSpacing":@10                              };    // 2. Define the views Sizes    NSArray *red_constraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[redView(redHeight)]"                                                                        options:0                                                                        metrics:metrics                                                                          views:viewsDictionary];    NSArray *red_constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(redWidth)]"                                                                        options:0                                                                        metrics:metrics                                                                          views:viewsDictionary];    [self.redView addConstraints:red_constraint_H];    [self.redView addConstraints:red_constraint_V];    NSArray *yellow_constraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[yellowView(yellowHeight)]"                                                                           options:0                                                                           metrics:metrics                                                                             views:viewsDictionary];    NSArray *yellow_constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[yellowView(yellowWidth)]"                                                                           options:0                                                                           metrics:metrics                                                                             views:viewsDictionary];    [self.yellowView addConstraints:yellow_constraint_H];    [self.yellowView addConstraints:yellow_constraint_V];    // 3. Define the views Positions    NSArray *constraint_POS_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-topMargin-[redView]"                                                                        options:0                                                                        metrics:metrics                                                                          views:viewsDictionary];    NSArray *constraint_POS = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-leftMargin-[redView]-viewSpacing-[yellowView]"                                                                      options:NSLayoutFormatAlignAllTop                                                                      metrics:metrics                                                                        views:viewsDictionary];    [self.view addConstraints:constraint_POS_V];    [self.view addConstraints:constraint_POS];

参考：

官方VFL文档
http://www.cnblogs.com/lee0oo0/p/4220557.html