在 XCode 中使用 Size Class 的正确方法是什么?

What is the proper way to use Size Class in XCode?

我以任意宽度、任意高度大小 class 开始了一个项目,其中一个场景有几个 UI 元素(超过 10 个)。最近我想将这个场景的布局更改为 Any With, Compact Height 尺寸 class(适用于横向 iPhone)。而且我找不到合适的方法来管理它。

最后,我不得不删除 Any Width, Any Height 中的所有 UI 元素,然后为该场景的所有元素创建两个副本,一个用于 Any Width, Compact Height 和另一个为任意宽度,常规 高度。所以Any, Any中的场景实际上变成了一片空白。但是我觉得这样应该不是正确的做法。

这是一个例子:

我从任意宽度、任意高度开始,并放置了两个标签(一个在另一个之上)以填满屏幕。

任何宽度,任何高度。约束设置。

任意宽度、紧凑高度,带有任意宽度、任意高度的约束

现在对于横向的 iPhone,我想移动标签,使它们并排,所以首先,在 XCode 的底部,我更改为 wAny hCompact,然后拖动并调整大小标签,使它们并排。在添加其他约束之前,它看起来如下所示。

请注意,文档大纲中突出显示的约束来自任意宽度、任意高度,它们都应用于任意宽度、紧凑高度。

任意宽度,紧凑高度。卸载任意宽度、任意高度的约束

所以我卸载了这些约束

任意宽度,紧凑高度。添加了自己的约束

然后我为当前大小添加了约束 class,任意宽度,紧凑高度

任何宽度,任何高度。现在没有约束,Xcode 抛出错误和警告

返回到任意宽度、任意高度大小 class,约束未应用,因为我卸载了它们。但如果我加回约束,任何宽度、紧凑高度都会受到影响。

所以我安装了最初从任意宽度、任意高度到任意宽度、常规 高度的所有约束。这将使项目 运行 并且屏幕将在纵向和横向上正确显示。

但是,在任意宽度、任意高度中,仍然没有约束,XCode 抛出警告

就像我说的,我最终删除了那个场景的任意宽度、任意高度中的所有 UI 元素,然后分别在任意宽度、紧凑高度和任意宽度、常规高度中创建了一个版本。还必须为每个人创建出口和行动。

每次我想使用另一个尺寸 class 时,如果不创建一组单独的 UI 元素(并且没有控制拖动来创建出口和动作),我应该如何做到这一点?

为了实现您想要的效果,您需要管理两组约束。

一组用于 Any,Any class,另一组用于 Any,Compact class。

诀窍是确保给定大小 class 不需要的约束在 class 中被专门卸载 - 我将在下面向您展示我的意思。

您的 Any,Any 大小限制为:

  • 标签 1

    • 将 space 引导至超级视图 = 0
    • 尾随 space 到超级视图 = 0
    • 顶部 space 至顶部布局指南 = 0
    • 底部 space 到标签 2 = 0
    • 与标签 2 等高 = 0
  • 标签 2

    • 将 space 引导至超级视图 = 0
    • 尾随 space 到超级视图 = 0
    • 底部 space 到底部布局指南 = 0
    • 顶部 space 到标签 1 = 0
    • 与标签 1 等高 = 0

您的标签 1 约束应如下所示,您的标签 2 约束应类似:

现在,select Any,Compact class 并调整两个标签位置并添加以下约束:

  • 标签 1

    • 底部 space 到底部布局指南 = 0
    • label2 的后缘到前缘 = 0
    • 与标签 2 等宽
  • 标签 2

    • 顶部 space 至顶部布局指南 = 0
    • label1 的前缘到后缘 = 0
    • 与标签 1 等宽

现在,通过双击约束关闭 Any,Compact 中不必要的约束,单击“+”添加 Any,Compact,然后清除复选框,如下所示:

Any,Compact 的不必要约束是:

  • 标签 1

    • 尾随 space 到超级视图
    • 底部 space 到标签 2
    • 与标签 2 等高
  • 标签 2

    • 将 space 引导至 superview
    • 顶部 space 到标签 1
    • 与标签 1 等高

现在,回到 Any,Any class 并以同样的方式关闭 Any,Any 不必要的约束

Any,Any 的不必要限制是:

  • 标签 1

    • 尾随 space 标签 2
    • 底部 space 到底部布局指南
    • 与标签 2 等宽
  • 标签 2

    • 前导 space 到标签 1
    • 顶部 space 到顶部布局指南
    • 与标签 1 等宽

现在,您应该可以在 Any,AnyAny, Compact 之间切换,并将标签移动到正确的位置。

我在这里上传了一个带有适当约束的故事板:https://gist.github.com/paulw11/f1b0faa229b152f1c53dadefcf9e0885

更新:我刚刚注意到你的标签之间的 space 不是 0,但你可以根据需要调整 leading/trailing & top/bottom 约束.