UILabel 内在大小

我们必须创建一个视图，该视图将具有文本的图像前缀。text 可以是可变长度的。我们必须实现一个结果，其中 Image + text 始终位于父视图的中心。

步骤 1： 首先创建一个单独的视图项目并将其命名为你选择的内容并打开故事板拳头视图。拖动具有合理大小的视图并将其背景颜色设置为黄色。我已将我的视图控制器调整为 3.5“。view 应该看起来像这样的东西

第 2 步： 现在我们将向黄色视图添加约束。首先，我们将添加宽度和高度约束（等一下我们不是说视图将具有动态宽度？好的我们稍后会再回到它）添加根据下图中的下列约束不要打扰宽度值任何值都可以很好地保持宽度，只需保持足够大，以便我们可以正确添加自动布局。

添加这两个约束后，你将看到 XCode 正在为你提供错误，如下图所示，让我们看到它们并理解它们。

我们有两个错误（红色表示错误）如上所述，我们可以重新审视歧义部分

缺少约束： 需要约束：X 位置： - 如上所述，我们给出了视图的宽度和高度，因此定义了它的 BOUNDS，但我们没有给出它的原点，因此没有定义它的 FRAME。Autolayout 无法确定黄色视图的 X 位置

缺少约束： 需要约束：Y 位置： - 如上所述，我们给视图一个宽度和一个高度，因此它的 BOUNDS 被定义但我们没有给它的原点，所以它的 FRAME 没有被定义。Autolayout 无法确定我们的黄色视图的 Y 位置要解决这个问题，我们必须给 autolayout 一些东西来解析 X 和 Y.由于我们无法设置帧，我们将自动布局方式。按照以下约束添加下面给出的图片我将在稍后解释

我们所做的是，我们添加了一个垂直中心和水平中心，这些约束告诉 autolayout 我们的黄色视图将始终位于水平中心：因此确定的 X 与垂直约束相同，并确定 Y.（你可能要调整框架）。

第 3 步： 到目前为止，我们的基本黄色视图已准备好。我们将前缀图像作为黄色视图的子视图添加以下约束。你可以选择任何你选择的图像。

由于我们的前缀图像具有固定的尺寸，因此我们将为此 imageview 设置固定的宽度。添加约束并继续下一步。

步骤 4： 添加 UILabel 作为黄色视图的子视图，并添加以下约束

正如你所看到的，我只对 UILabel 给出了相对的约束。它从前缀图像中得到 8 个点，从顶部拖尾看到 0,0,0，从黄色视图得到底部。因为我们希望宽度是动态的，所以我们不会给出宽度或高度限制。

问：为什么我们现在没有出现任何错误，我们没有给出任何宽度和高度？Ans： - 我们只有在自动布局无法解决任何必须在屏幕上渲染视图的事情时才会收到错误或警告。它是高度宽度或原点。因为我们的标签是相对于黄色视图和前缀图像及其框架定义良好的 autolayout 能够计算我们的 Label 的框架。

第 5 步： 现在如果我们回想一下，我们会意识到我们已经给出了黄色视图的固定视图，但我们希望它是动态依赖于我们标签的文本。所以我们将修改黄色视图的宽度约束。黄色视图的宽度有必要解决歧义，但我们希望它在运行时基于 UILabel 的内容被否决。因此，我们将选择黄色视图并转到大小检查器，并将宽度约束的优先级降低为 1，以使其超出规则。请按照下面给出的图像。

第 6 步： 我们希望 UILabel 根据文本进行扩展并推动我们的黄色视图。因此我们降低了黄色视图宽度的优先级。现在我们将增加 UILabel 的文本压缩阻力的优先级。我们希望我们的视图减少为那么我们将增加 UILabel 的内容拥抱的优先级。请按下图所示

正如你所看到的，我们将内容优先级增加到 500 并将压缩阻抗优先级提高到 751，这将成功地超过宽度约束的 1 优先级。

现在构建并运行，你将看到以下内容。