使用Swift探索视觉格式语言

几周前，我开始介绍如何在Objective-C和Swift中使用自动布局的想法，以确保我的应用在所有iOS设备上都能正确显示。 您可以在Interface Builder（IB）中创建约束或以编程方式构建约束。 具有视觉设计的背景，我立即着迷于IB，因为它使我想起了许多设计程序。 实际情况似乎是，构建程序约束的时间往往会被可能与您的项目一起工作的其他人重用和可读性更高。 因此，我很想知道是否可以通过某种方式在视觉上构造程序约束。 使用视觉格式语言输入约束。

视觉格式语言

视觉格式语言允许您使用视觉语法字符串构建程序约束。 想法是文本在视觉上与布局匹配。 这是摘录的Apple文档：

 完整的布局线 

  H：|-[查找]-[findNext]-[findField（> = 20）]-| 

让我们分解一下：

  H ：（水平）//水平方向 

  |  （管道）// superview 

  -（破折号）//标准间距（通常为8点） 

  []（方括号）//对象名称（uilabel，unbutton，uiview等） 

  （）（括号）//对象的大小 

因此，如果我们要说一句话，我们会说findButton是距超级视图的开头（左边缘）的填充点（空白）为8点，而距findNextButton的开头的填充点为8点。 findNextButton是距findField的开头的8个填充点。 最后，findField的大小至少为20点，并且距超级视图的尾部（右侧）有8个填充点。

上面的代码特别有趣的是，它同时处理（设置）对findButton，findNextButton和findField的所有水平约束。

这里发生了很多魔术，所以我将尽力向您介绍如何在模拟项目中实现此功能的基本示例。

在一个快速的项目中，我们需要向您的超级视图添加一些对象，我们也可以附加约束。 我还喜欢为您的对象添加背景色，以便在测试约束时可以看到它占用的空间：

 覆盖func viewDidLoad（）{ 

  super.viewDidLoad（） 

  //创建四个视图对象以表示我们的超级视图中的元素 

 让topBar = UIView（） 
 让middleFrameTop = UIView（） 
 让middleFrameBottom = UIView（） 
 让bottomBar = UIView（） 

  //设置这些子视图的背景颜色 

  topBar.backgroundColor = UIColor.grayColor（） 

  middleFrameTop.backgroundColor = UIColor.orangeColor（） 

  middleFrameBottom.backgroundColor = UIColor.blueColor（） 

  bottomBar.backgroundColor = UIColor.grayColor（） 

  //将子视图添加到超级视图 

  self.view.addSubview（topBar） 

  self.view.addSubview（middleFrameTop） 

  self.view.addSubview（middleFrameBottom） 

  self.view.addSubview（bottomBar） 

  //删除我们在Interface Builder中可能做出的任何约束 

  topBar.translatesAutoresizingMaskIntoConstraints = false 

  middleFrameTop .translatesAutoresizingMaskIntoConstraints = false 

  middleFrameBottom.translatesAutoresizingMaskIntoConstraints = false 

  bottomBar.translatesAutoresizingMaskIntoConstraints = false 

  } 

现在我们有了基本的设置，我们可以开始使用Visual Format Language来处理约束了。 我们需要添加的第一部分是创建一个字典，其中包含带有参考键的子视图。 我们还将创建一个数组来容纳我们的约束。 现在将其添加到您的viewDidLoad函数。

  let viewsDict = [ “ topBar” ：topBar， “ middleFrameTop” ：middleFrameTop， “ middleFrameBottom” ：middleFrameBottom， “ bottomBar” ：bottomBar]; 

  var viewConstraints = [NSLayoutConstraint]（） 

在这里，我们设置使用Visual Format Language进行约束时将引用的参考字符串。 现在我们可以开始建立水平约束：

 让topBarConstraintsHorizo​​ntal = NSLayoutConstraint.constraintsWithVisualFormat（ 
  “ H：| -16- [topBar] -16- |” ， 
 选项：[]，指标：无，观看次数： viewsDict ） 

  viewConstraints + = topBarConstraintsHorizo​​ntal 

  //从超级视图的前缘和后缘创建具有16个填充点的水平约束 

  //注意，我们引用了viewsDict 

  //将约束添加到constraints数组 

 让middleFrameTopHorizo​​ntal = NSLayoutConstraint.constraintsWithVisualFormat（ 
  “ H：| -16- [middleFrameTop] -16- |” ， 
 选项：[]，指标：无，观看次数： viewsDict ） 

  viewConstraints + = middleFrameTopHorizo​​ntal 

  //从超级视图的前缘和后缘创建带有16个填充点的水平约束 

 让middleFrameTopBottomHorizo​​ntal = NSLayoutConstraint.constraintsWithVisualFormat（ 
  “ H：| -16- [middleFrameTopBottom] -16- |” ， 
 选项：[]，指标：无，观看次数： viewsDict ） 

  viewConstraints + = middleFrameBottomHorizo​​ntal 

 让bottomBarHorizo​​ntal = NSLayoutConstraint.constraintsWithVisualFormat（ 
  “ H：| -16- [bottomBar] -16- |” ， 
 选项：[]，指标：无，观看次数： viewsDict ） 

  viewConstraints + = bottomBarHorizo​​ntal 

下一步是建立我们的垂直约束：

 让verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat（ 
  “ V：| -40- [topBar] -16- [middleFrameTop（== topBar）]-16- [middleFrameBottom（== topBar）]-16- [bottomBar（== topBar）]-20- |”， 
 选项：[]，指标：无，观看次数：viewsDict） 

  viewConstraints + =垂直约束 

  //创建垂直约束，其中topBar是距超级视图顶部边缘40个填充点和middlebarTop顶部顶部16个填充点。 

  // middleFrameTop的大小等于topBar的一侧，并等于middleFrameBottom的16个填充点。 

  // middleFrameBottom和bottomBar也等于topBar的大小，它们彼此之间是16个填充点。 

  // bottomBar是距superview底部边缘20个填充点。 

至此，我们已经创建了所需的所有自动布局约束。 我们可以使用以下约束从约束数组中附加约束：

  NSLayoutConstraint.activateConstraints（viewConstraints） 

当我们运行应用程序时，它看起来像这样：

如果我们想花更多的钱，我们可以将垂直约束更改为如下所示：

 让verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat（ 
  “ V：| -40- [topBar（> = 20，<= 50）]-16- [middleFrameTop] -16- [middleFrameBottom（== middleFrameTop）]-16- [bottomBar（== topBar）]-20- |”  ， 
 选项：[]，指标：standardMetrics，视图：viewsDict） 

  viewConstraints + =垂直约束 

  //我们将topBar的大小设置为至少20点但不超过50点的高度（> = 20，<= 50） 
  //我们使bottomBar的大小等于topBar的大小。 
  //我们可以通过将middleBottomFrame设置为与middleTopFrame （== middleFrameTop）相等的大小来使MiddleFrame彼此相等 
  // /因为topBar和bottomBar参考超级视图知道了它们的大小和位置，它将自动计算middleTopFrame和middleBottomFrame的大小。 
  //这意味着middleTopFrame和middleBottomFrame各自将占据可用剩余空间的一半 

以下是完整的代码：

 覆盖func viewDidLoad（）{ 

  super.viewDidLoad（） 

  //创建子视图 
 让topBar = UIView（） 
 让middleFrameTop = UIView（） 
 让middleFrameBottom = UIView（） 
 让bottomBar = UIView（） 

  //设置视图的背景色 
  topBar.backgroundColor = UIColor.grayColor（） 
  middleFrameTop.backgroundColor = UIColor.orangeColor（） 
  middleFrameBottom.backgroundColor = UIColor.blueColor（） 
  bottomBar.backgroundColor = UIColor.grayColor（） 

  //将子视图添加到超级视图 
  self.view.addSubview（topBar） 
  self.view.addSubview（middleFrameTop） 
  self.view.addSubview（middleFrameBottom） 
  self.view.addSubview（bottomBar） 

  //删除接口构建器中的所有约束 
  topBar.translatesAutoresizingMaskIntoConstraints = false 
  middleFrameTop .translatesAutoresizingMaskIntoConstraints = false 
  middleFrameBottom.translatesAutoresizingMaskIntoConstraints = false 
  bottomBar.translatesAutoresizingMaskIntoConstraints = false 

  //建立视图的区分 
 让viewsDict = [“” topBar“：topBar， 
  “ middleFrameTop”：middleFrameTop， 
  “ middleFrameBottom”：middleFrameBottom， 
  “ bottomBar”：bottomBar]; 

  //构建数组以存储约束 
  var viewConstraints = [NSLayoutConstraint]（） 

  //创建垂直约束 
 让verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat（“ V：| -40- [topBar（> = 20，<= 50）]-16- [middleFrameTop] -16- [middleFrameBottom（== middleFrameTop）]-16- [bottomBar（= = topBar）]-20- |“，选项：[]，指标：无，观看次数：viewsDict） 
  viewConstraints + =垂直约束 

  //创建水平约束 
  let topBarConstraintsHorizo​​ntal = NSLayoutConstraint.constraintsWithVisualFormat（“ H：| -16- [topBar] -16- |”，选项：[]，指标：无，视图：viewsDict） 
  viewConstraints + = topBarConstraintsHorizo​​ntal 

  let middleFrameTopHorizo​​ntal = NSLayoutConstraint.constraintsWithVisualFormat（“ H：| -16- [middleFrameTop] -16- |”，选项：[]，指标：无，观看次数：viewsDict） 
  viewConstraints + = middleFrameTopHorizo​​ntal 

  let middleFrameBottomHorizo​​ntal = NSLayoutConstraint.constraintsWithVisualFormat（“ H：| -16- [middleFrameBottom] -16- |”，选项：[]，指标：无，视图：viewsDict） 
  viewConstraints + = middleFrameBottomHorizo​​ntal 

  let bottomBarHorizo​​ntal = NSLayoutConstraint.constraintsWithVisualFormat（“ H：| -16- [bottomBar] -16- |”，选项：[]，指标：无，视图：viewsDict） 
  viewConstraints + = bottomBarHorizo​​ntal 

  //激活所有约束 
  NSLayoutConstraint.activateConstraints（viewConstraints） 
  } 

视觉格式语言还有很多其他额外的部分，但现在让我简要介绍一下。 尽管乍一看似乎令人困惑，但我认为它通过一些实践简化了程序约束。 乍一看绝对更易读。 直到下次，我希望这能帮助您介绍使用Visual Format Language约束。