从零开始学习VFL (一)

一、VFL语言简介

• VFL（Visual format language）是苹果公司为了简化Autolayout的编码而推出的抽象语言

二、使用步骤

• 创建控件
• 添加到父控件
• 禁用Aoturesizing
• 添加约束

三、使用方法

• NSLayoutConstraint 的方法参数

    /**
     *  vfl方法
     *
     *  @param format  这里写入vfl语句
     *  @param opts    枚举参数，默认写0
     *  @param metrics 这里是一个字典，当在format中使用了动态数据比如上现这句:@"H:|-[button(==width)]-|",    表示这个button的宽度为width,那么这个参数去哪里找呢？    就是在这个字典里面找到key对就的值，如果没有找到这个值，app就会crash. 比如我写 @{@"width":@20}
     *  @param views   这是传所有你在vfl中使用到的view，那在上面这句例子中的应该怎么传呢？结果是这样的：NSDictionaryOfVariableBindings(button).如果你使用到了多个view，就可以这样NSDictionaryOfVariableBindings(button,button1,button3...),这个名字也要跟参数format中的一一对应，缺一不可. 或者写成 @{@"button1":button1}
     *
     *  @return 返回一个数组
     */  
    + (NSArray *)constraintsWithVisualFormat:(NSString *)format
                                     options:(NSLayoutFormatOptions)opts
                                     metrics:(NSDictionary *)metrics
                                       views:(NSDictionary *)views   
                                       

• UIView的添加约束的方法 (这个方法将在未来某个时间变成deprecated的方法）

  
  - (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints NS_AVAILABLE_IOS(6_0); // This method will be deprecated in a future release and should be avoided.  Instead use +[NSLayoutConstraint activateConstraints:].
    
如: 
    [self.view addConstraints:layoutConstraints1];

替换的方法（效果是一样的）:

    [NSLayoutConstraint activateConstraints:layoutConstraints1];

基本使用示例

 - (void)viewDidLoad {
    [super viewDidLoad];

    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    [button setTitle:@"第一个按钮" forState:UIControlStateNormal];
    button.titleLabel.textColor = [UIColor redColor];
    button.backgroundColor = [UIColor greenColor];
    [self.view addSubview:button];
    
    //在用代码创建的UIView，一定要加上下面这句代码
    button.translatesAutoresizingMaskIntoConstraints = NO;
    
    // “-”的含义:如果是距离父view则为20px;如果是同级,则为8px
    NSArray *constraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|" options:0 metrics:nil views:@{@"button":button}];
    
    //"==30@1000":约定了它的优先级是1000
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(>=30@1000)]" options:0 metrics:nil views:@{@"button":button}];
    
    [self.view addConstraints:constraints1];
    [self.view addConstraints:constraints2];
 
    
    //多个view之间的约束
    UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];
    [button1 setTitle:@"第二个按钮" forState:UIControlStateNormal];
    button1.titleLabel.textColor = [UIColor blackColor];
    button1.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:button1];
    
    button1.translatesAutoresizingMaskIntoConstraints = NO;
    
    //注意不能写中文
    NSArray *constraitsA = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1]-|" options:0 metrics:nil views:@{@"button1":button1}];
    NSArray *constraitsB = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==abc)]" options:0 metrics:@{@"abc":@100} views:@{@"button1":button1 ,@"button":button}]; //[button1(button)]即为等宽布局
 
    [self.view addConstraints:constraitsA];
    [self.view addConstraints:constraitsB];
    
    
} 

运行结果.png

---

参考1 Autolayout-VFL语言添加约束

参考2 http://www.cocoachina.com/ios/20141209/10549.html