Autolayout-VFL语言添加约束

一、VFL语言简洁

• VFL（Visual format language）语言是苹果为了简化手写Autolayout代码所创建的专门负责编写约束的代码。为我们简化了许多代码量。

---

二、使用步骤

使用步骤同手动添加约束保持一致

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

---

三、使用方法

• 这里先展示一个实例：

NSArray *blueHArr = [NSLayoutConstraint constraintsWithVisualFormat:
@"H:|-20-[blueView]-20-|" 
options:kNilOptions
 metrics:nil views:
NSDictionaryOfVariableBindings(blueView)];

• 方法介绍：
  • constraintsWithVisualFormat：这个方法返回了一个数组;
  • @"H:|-20-[blueView(100)]-20-|":这句话表明所添加的约束，H的意思是水平方向添加约束，blueView 视图名称，(100)代表着blueView 的宽为100，blueView距离父类的左边20，距离父类的右边是20;
  • options：是对其方式;
  • metrics：返回的是一个字典，它的意思是可以将约束中的值用某些字符串来代理，然后在这个字典中给多对应的字符串赋值，方便修改，并且增加可读性;
  • views：返回的也是一个字典，这个字典的意思是：你可以将前面的view用其他字符串来代替，在这里在给他赋给对应的view的名字。
• 我可以将上面的约束语句改成如下这样：

  NSArray *blueHArr = [NSLayoutConstraint 
  constraintsWithVisualFormat:@"H:|-aa-[cccc(100)]-20-|"
  options:kNilOptions
  metrics:@{@"aa":@20}
  views:@{@"cccc":blueView}];

  • 这里我用aa替换了20，cccc替换了blueVuew
  • 这里有一个简单的方法，就是使用NSDictionaryOfVariableBindings(blueView)来替换views中的内容也是可以的。

---

四、VFL的缺点

• VFL语句不支持乘除法
• 比如我想表示redview是blueview高度的一半，
  我们是不能这样写的:

  NSArray *redVArr = [NSLayoutConstraint 
  constraintsWithVisualFormat:@"V:[blueView]-20-[redView(==blueView*0.5)]" 
  options:NSLayoutFormatAlignAllRight 
  metrics:nil 
  views:NSDictionaryOfVariableBindings(blueView, redView)];

  原因就是这里包含了乘法，而一旦VFL语句中包含了乘除法那么系统就会不识别而崩溃。
• 所以，当一涉及到乘除法的时候，我们又不得不再次使用系统原来的方法中来：

  NSLayoutConstraint *redWidth = [NSLayoutConstraint 
  constraintWithItem:redView 
  attribute:NSLayoutAttributeWidth 
  relatedBy:NSLayoutRelationEqual
  toItem:blueView 
  attribute:NSLayoutAttributeWidth
  multiplier:0.5
  constant:0.0];

---

五、总结

• 苹果虽然推出了这项简单的语言，简化了代码量，也方便了我们用代码来书写约束。
• 但是VFL的缺陷也是很明显的，不支持乘除法的的弊端让它的应用也是大打折扣。

六、示例解释

NSDictionary *views = NSDictionaryOfVariableBindings(_cameraView, _cancelButton);

  

  [self.view addConstraints:

   [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_cameraView][_cancelButton(40)]|" options:0 metrics:nil views:views]];

  [self.view addConstraints:

   [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_cameraView]|" options:0 metrics:nil views:views]];

  [self.view addConstraints:

   [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_cancelButton]-|" options:0 metrics:nil views:views]];

  

  if (_switchCameraButton) {

    NSDictionary *switchViews = NSDictionaryOfVariableBindings(_switchCameraButton);

    

    [self.view addConstraints:

     [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_switchCameraButton(50)]" options:0 metrics:nil views:switchViews]];

// V:|[_switchCameraButton(50)]  中 '|'表示距离top，没有值则表示距离top距离为0；(50)表示控件_switchCameraButton的高度为50

    [self.view addConstraints:

     [NSLayoutConstraint constraintsWithVisualFormat:@"H:[_switchCameraButton(70)]|" options:0 metrics:nil views:switchViews]];

  }