自动布局引擎如何计算UI组件框架。

考虑一个需要两个输入的自动布局

1. 视图约束
2. 应用画面尺寸

自动布局引擎使用以下步骤来呈现UI组件的位置和大小。

1. UI组件的x位置
2. UI组件的y位置
3. UI组件的宽度
4. UI组件的高度

AutoLayout使用约束来计算以上步骤。

让我们从例子开始。 还认为iPhone是SE（屏幕宽度320像素，高度568像素）

示例1.0（x，y，宽度，高度定义）

看起来很简单的例子

框架计算

我们可以推断x，y，宽度，高度分别为50、50、100、100。 由于我们知道x，y，宽度，高度为正，因此AutoLayout Engine将在所有屏幕上呈现该视图。

示例2.0（未定义x，y位置）

它与前面的示例相似，但是现在我们定义了right和bottom约束。

框架计算

1. 要计算视图的x位置，AutoLayout Engine使用屏幕宽度。

2.为了计算视图的y位置，AutoLayout Engine使用屏幕高度。

3.宽度和高度已明确指定（即宽度= 100，高度= 100），因此AutoLayout不会对其进行计算。

现在，x，y和宽度（即视图的高度）已知，自动布局引擎将在所有屏幕上呈现该视图。

示例3.0（宽度，高度未定义）

现在我们还没有定义视图的宽度，高度。 取而代之的是，我们在屏幕上设置视图的顶部，左侧，右侧，底部约束。

框架计算

1. 我们可以推断出x，y的视点位置分别是50、50。
2. 为了计算视图的宽度，自动布局引擎使用屏幕宽度

3.为了计算视图的高度，自动布局引擎使用屏幕高度

示例4.0（宽度未定义）

我们尚未定义视图宽度，而是定义了该视图水平居中于屏幕的中心。

框架计算

1. 我们可以推断出x，y位置，视点高度分别为50、50、100。
2. 为了计算视图宽度，自动布局引擎使用屏幕宽度。

由于视图是水平居中的，这意味着宽度的左半部分与右半部分相同。