UILayoutGuide终极指南

使用自动版式创建所需的版式就像要解决的难题。 虚拟视图是解决方案的重要元素。 在某些情况下,您不能仅依赖约束。 例如,您有三个要等距分布的按钮。 没有任何类型的约束可以使您做到这一点。 作为一个技巧,您可以在按钮之间使用虚拟视图,并为所有虚拟视图分配相等的宽度约束。 因此,每当布局发生变化时,虚拟视图都会相应地进行调整,以使其宽度相等,从而以相似的间距分隔按钮。

使用虚拟视图的等距按钮

虚拟视图的另一个用途是将多个控件组合在一起,然后将虚拟视图与外部视图对齐。 在下图中,按钮在视图中进行了分组,然后又将其在超级视图中居中。

用虚拟视图对视图进行分组

在任何需要的地方使用虚拟视图都没有错。 唯一的问题是虚拟视图就像普通视图一样。 它被添加到视图层次结构中,并参与布局过程。 即使它是不可见的,UIKit的布局引擎也像对待普通视图一样对待它,并执行在普通视图上完成的所有工作。 如果您在单个视图中使用许多虚拟视图,则这会降低性能。

为了解决此问题,Apple在iOS 9中引入了UILayoutGuideAPI。UILayoutGuide旨在执行虚拟视图以前用于的所有任务。 就像视图一样,UILayoutGuide对象也添加到视图中。 UILayoutGuide在其父视图的坐标系统中定义一个矩形区域。 可以将多个UILayoutGuide实例添加到视图中。 与虚拟视图不同,布局指南实例不会在屏幕上呈现,因此它不参与视图层次结构。

本示例演示了UILayoutGuide的用法。 在该示例中获得的结果也可以仅通过添加适当的约束来实现。

例子1
例子1

为了动态调整子视图,UIViewController提供了topLayoutGuide和bottomLayoutGuide属性。 顶部布局指南会根据屏幕上状态栏和导航栏的可见性而变化。 同样,底部布局指南会根据标签栏的可见性而变化。

通过从视图控制器提供的这些顶部和底部布局指南中锚定子视图,可以使用户界面根据不断变化的顶部和底部布局动态地进行调整。

顶部布局指南
底部布局指南

正如您在上面的示例中看到的那样,固定有顶部或底部布局指南的视图会根据顶部和底部栏的可见性进行动态调整。

导航栏会在横向方向上更改其高度,并且在通话时也会更改其高度,使用布局指南可涵盖很多边缘情况,并防止您的UI随顶部和底部的更改而被遮盖。

顶部和底部布局指南不是UILayoutGuide对象。 相反,它们是在UIViewController上定义的属性,用于确认UILayoutSupport协议。 UILayoutSupport协议提供可在NSLayoutConstraint和NSLayoutAnchor API中使用的属性,以使视图与视图控制器的顶部或底部对齐。 这些属性是:

(注意:请查看 我有关NSLayoutAnchor API的 这篇 详细文章。)

  1. 长度
  2. topAnchor
  3. bottomAnchor
  4. heightAnchor

顶部布局指南的长度取决于状态栏和导航栏的可见性。 如果状态栏和导航栏均可见,则在纵向模式下长度为64像素(20 + 44),在横向模式下长度为52像素(20 + 32)。 如果导航栏被隐藏,则为20像素。 如果两个都隐藏,则其为零。

同样,底部布局指南的长度取决于标签栏的可见性。 如果可见,则横向和纵向的长度均为49像素。 如果隐藏,则长度为零。

topAnchor代表矩形导轨的顶面,而bottomAnchor代表下部。

要将视图固定在InterfaceBuilder中的顶部/底部布局指南中:

  1. 选择您的视图。
  2. 在InterfaceBuilder中选择“添加新约束”选项。
  3. 从顶部或底部约束的下拉菜单中,选择“顶部布局指南”或“底部布局指南”。
IB中的顶部/底部布局指南

要以编程方式固定视图:

以编程方式将视图固定到顶部和底部布局指南有一个小技巧。 若要将视图固定在顶部,请将视图的顶部固定器与顶部布局指南的底部固定器固定在一起。 同样,要将视图固定在底部,请使用底部布局指南的顶部锚点将其固定。

以编程方式添加顶部/底部布局指南

本示例说明如何使用UILayoutGuide将多个相关视图组合在一起。

注意:这里的警告是,如果使用UIView对视图进行分组,则可以通过隐藏父视图来一次隐藏分组的控件。 UILayoutGuide不提供该选项,因为它只是一个矩形区域。

可以在Xcode的Debug View Hierarchy窗口中查看布局指南。 Xcode不仅显示在视图中添加的UILayoutGuide实例,而且在选择特定实例时还显示其框架和应用的约束。

为了使事情更加可见,您可以添加一个与UILayoutGuide实例具有相同框架的CALayer对象。 UILayoutGuide的layoutFrame属性在其拥有的视图的坐标系中返回框架。 仅在拥有视图上调用-layoutSubviews方法后,此属性才有效。 一个更好的地方是UIViewController的’viewDidLayoutSubviews()’方法。

下图显示了layoutMarginsGuide的视图框架。

此示例代码段演示了如何使用UILayoutGuides创建间距相等的视图。

等距视图

正如我们在本文中看到的,UILayoutGuide是Apple引入的一种便捷的API。 它不仅为我们提供了轻松添加约束的灵活性,而且还以高效的方式做到了这一点,而无需在UIKit渲染引擎上增加额外的工作。

如果您喜欢这个小小的矿井,请点击下面的拍手按钮。 我写了一篇关于LayoutAnchors API的类似文章,也请检查一下。