vfl

Posted 2020-07-03 爱上咖啡的唐

说明

• 苹果官方提供的autoLayout框架
• 不能实现所有的关系描述(比如控件之间有倍数\比例关系时,无法实现)

单个控件

    [super viewDidLoad];
    UIView *blueView=[[UIView alloc]init];
    blueView.backgroundColor=[UIColor blueColor];
    //不要将autoresizingMask转为autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];

    NSNumber *[email protected]20;
    //水平方向
    //水平方向距离左右边框20
    NSString *vfl=@"H:|-20-[abc]-margin-|";
    NSDictionary *[email protected]{@"abc":blueView};
    NSDictionary *mertics=NSDictionaryOfVariableBindings(margin);
    NSArray *constraints=[NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:mertics views:views];
    [self.view addConstraints:constraints];

    //垂直方向
    //垂直方向距离顶部20,高度20
    NSString *vflV=@"V:|-20-[abc(20)]|";
    NSArray *constraintsV=[NSLayoutConstraint constraintsWithVisualFormat:vflV options:kNilOptions metrics:nil views:views];
    [self.view addConstraints:constraintsV];

说明:

• H表示水平方向设置
• V表示垂直方向设置
• |代表边框
• -表示间距
• [abc(20)]
  • []表示里面是控件
  • abc(20)可以是随便起的名字
  • 20表示在垂直方向表示高度,水平表示宽度
• NSDictionary *[email protected]{@"abc":blueView};表达式中abc表示blueView控件,即使key值使用blueView,这个也不能省略
• NSDictionaryOfVariableBindings(margin);表示key值和变量名一样

多个控件

    [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 *[email protected]20;
    //水平方向
    //水平方向距离左右边框20
    NSString *vfl=@"H:|-20-[blueView]-margin-[redView(==blueView)]-margin-|";
    NSDictionary *[email protected]{@"blueView":blueView,@"redView":redView};
    NSDictionary *mertics=NSDictionaryOfVariableBindings(margin);
    NSArray *constraints=[NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:mertics views:views];
    [self.view addConstraints:constraints];

    //垂直方向
    //垂直方向距离顶部20,高度20
    NSString *vflV=@"V:|-[blueView(20)]-20-|";
    NSArray *constraintsV=[NSLayoutConstraint constraintsWithVisualFormat:vflV options:kNilOptions metrics:nil views:views];
    [self.view addConstraints:constraintsV];

    //添加红色控件垂直约束
    NSLayoutConstraint *redConstraint1=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
    NSLayoutConstraint *redConstraint2=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
    [self.view addConstraint:redConstraint1];
    [self.view addConstraint:redConstraint2];

说明:

• 两个控件时,有时需要结合非框架代码(如添加红色垂直方向约束部分代码),否则不能实现
• [redView(==blueView)]两个控件时,等于另一个控件的宽或者高时,前面的==不能省略
• 添加红色控件垂直约束也可以去掉,不过水平约束要修改options如下

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