iOS操作方法-添加自适应约束以支持通用应用
Xcode的界面生成器使我们能够配置布局，这些布局将根据一系列环境变量自动更改形状和大小，例如：
- 设备屏幕尺寸（例如iPhone或iPad）
- 设备方向（人像或风景）
- 适应（在iPad上执行多任务处理）
在本文中，我们将学习如何在界面构建器中添加NSLayoutConstraints来适应这些变量的变化，从而使我们能够构建可在iPhone和iPad上运行的通用应用程序。
术语
首先，一些有用的术语。
特性-上面描述的每个环境变量都是一个特征； 屏幕尺寸，方向和适应性。
设备配置-设备配置是上述三个特征的组合； 屏幕尺寸，方向（纵向或横向）和适应性（以多任务模式运行的iPad在分屏中显示，称为适应性）。
尺寸类别-尺寸类别是一种特征，标识可用于视图的宽度（水平）或高度（垂直）的相对量。 尺寸等级取决于已经描述的三个特征。 接口构建器定义了两个大小类。 紧凑（在纵向模式下，iPhone宽度紧凑，iPhone高度固定）和常规（在横向模式下，iPhone宽度规则，iPhone高度紧凑）。
添加自适应约束
为了演示如何添加自适应约束，我们将使用以下简单（有些许人为！）的示例，将一个UIView添加到另一个视图。
我们的目标是添加根据环境变量而适应和变化的约束。 这将导致三种布局变化：
- iPhone，肖像 —我们添加的视图应为矩形，固定在设备的左侧，并垂直居中。
- iPhone，横向 —我们添加的视图应为正方形，固定在设备顶部，并水平居中。
- iPad，纵向或横向 -我们添加的视图应为矩形，固定在设备的右侧，并垂直居中。
注意：我们仅针对本文开头提到的三个特征中的两个调整约束。 我们没有根据iPad改编（多任务分屏）改编。 换句话说，我们只处理iPad上的全屏模式。 这纯粹是为了简洁。 下面描述的步骤可以轻松地应用于此特征。
- 我们从界面构建器开始，使用仅包含默认UIView的UIViewController。
- 我们添加一个新的UIView作为子视图，并更改其背景颜色以使其易于识别。
- 现在，通过单击界面生成器左下方的“查看方式：…”按钮来打开设备配置窗格。
- 上面显示的设备配置窗格允许我们选择设备，方向和适应性（如果选择了iPad设备）。 在上图中，所选设备为iPhone 8 Plus，方向为纵向。 设备配置窗格还向我们显示了所选设备配置的尺寸类别。 在这种情况下，宽度尺寸类别是紧凑的，而高度尺寸类别是规则的。 这由设备配置窗格顶部的“（wC hR）”文本指示。
- 现在，我们将为第一个布局变体（纵向iPhone）添加约束。 点击右下角的“因性状而异”按钮。 出现一个弹出窗口，使我们可以选择要为其创建布局变体的尺寸类特征，例如宽度，高度或两者。 选择一个尺寸类别特征，将基于当前所选设备配置的尺寸类别创建一个变体。 例如，如果我们选择宽度，则变化将适用于所有紧凑宽度，因为这是当前所选设备配置的宽度尺寸类别。 在我们的情况下，我们要基于所选设备配置的宽度和高度尺寸类别创建一个变体。 在弹出框中选择这两个选项。
- 在弹出框外单击以将其删除，现在我们将为该布局变化添加约束。 请记住，在iPhone纵向模式下，我们添加的视图应为矩形，固定在设备的左侧，并垂直居中。 在我们添加的视图中添加100的宽度约束，以及600的高度约束。然后将视图的前沿约束到安全区域的前沿，并将视图的中心Y值约束到安全区域的中心Y值。 添加约束后，点击右下角的“完成变化”按钮。 添加的约束和结果布局如下所示。
- 现在，我们进入第二个布局变体，即横向iPhone。 我们当前选择的设备配置为竖向iPhone 8，因此在设备配置窗格中，将方向更改为横向。 界面构建器将更新，以在许多地方反映此更改。 首先，界面构建器Canvas进行更新，以横向显示iPhone的轮廓。 其次，设备配置窗格顶部的文本将更新以显示新的尺寸类别。 在这种情况下，新的尺寸类别是常规宽度和紧凑高度’（wR hC）’。 第三，我们先前为第一个设备配置添加的约束现在显示为禁用，在界面生成器“文档大纲”中显得褪色。 所有这些更改如下图所示。
- 和以前一样，我们单击“因性状而异”按钮。 在出现的弹出窗口中，选择width和height大小类。 此特定配置仅适用于横向iPhone。 接下来，我们添加约束。 请记住，对于此配置，我们的视图应为正方形，固定在设备顶部，并水平居中。 向我们添加的视图中添加300的宽度约束，以及300的高度约束。然后将视图的顶部边缘约束到安全区域的顶部边缘，并将视图的中心X值约束到安全区域的中心X值。 添加约束后，点击右下角的“完成变化”按钮。 我们为此配置添加的约束将显示为活动状态，而我们为先前配置添加的约束将显示为淡入状态，表明它们处于非活动状态。 参见下图。
- 最后，我们的第三个布局变体，iPad为纵向或横向。 但是等等……为什么我们在横向和纵向上都使用一种布局变化？ 好吧，原因是iPad的纵向和横向配置都具有常规的宽度和常规的高度尺寸类别（忽略“适应”，即仅考虑全屏iPad配置）。 这意味着我们为常规宽度和常规高度配置添加的任何约束变化都将适用于iPad上的纵向和横向。 太棒了，我们继续。 使用设备配置窗格选择设备配置，选择纵向或横向（忽略“适应”选项，因为我们说过我们仅考虑全屏iPad配置），然后单击“针对特征而变化”按钮。 与以前一样，从弹出窗口中选择宽度和高度尺寸类别，并添加约束，这将导致我们的视图为矩形，固定在设备的右侧并垂直居中。 添加约束后，请点击“完成变化”按钮。 约束和生成的布局如下图所示。
- 现在，我们为三种设备配置添加了约束。 为了快速检查添加的约束是否正确，我们可以再次选择每种设备配置，并观察“文档大纲”中的相关约束是否处于活动状态。 另外，值得一看的是Canvas，因为我们要注意布局的外观。
摘要
所以我们学了什么？
- 我们了解到，Xcode和界面生成器使我们能够根据许多特征来调整布局。
- 我们了解了如何使用界面生成器选择特定的设备配置 ，然后添加仅适用于该配置的约束。
- 我们还了解到，创建此类布局变体时特别重要的是可配置的尺寸类 ，该尺寸类基于宽度和高度。
- 使用所有这些，我们学习了如何根据设备配置来调整示例布局，如何根据设备是iPhone还是iPad以及方向是纵向还是横向来改变UIView的位置和大小。
太棒了！ 我们现在可以构建在iPhone和iPad上通用，运行且外观精美的应用程序。 🎉
这篇文章的Xcode项目在这里。
而已！ 📱🚀👍🏽
也可以在petethedeveloper.com上获得