VFL初探

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