Tag: Universal App

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 […]