Xcode 故事板约束和自动布局

Question

我目前正在开发一个应用程序，过去两周我一直在努力解决的一件事就是自动布局。我是 iOS 编程的新手，所以我不确定解释我的问题的最佳方法，但这里是。

我正在制作一个钢琴应用程序，它的工作方式是我的键盘只是一堆彼此相邻的按钮。

这些按钮代表按键。这些按钮具有普通钢琴键图像的背景图像。现在我的问题是我的键上方有一个黑色，每当我尝试使用 pin 工具为我的钢琴键创建约束时，只要我添加约束，所有东西都会被向上推，我的键会垂直拉伸。

上周我一直在不停地工作，不知道出了什么问题。我遵循了许多教程，但我遵循的教程非常基础，最多有几个标签或按钮，由大量空间隔开。我不确定是不是因为我的按钮间隔不够，还是什么，但它只是非常沮丧。任何帮助或指南/教程都会非常有帮助...

我还尝试选中显示宽度和高度的框以保持宽度和高度，但这只会使某些设备上的按键太大或太小。有没有办法拉伸这些键以便它们适应他们的设备？我听说过固有大小的内容，但不知道如何应用超过 24 个按钮...

编辑： 我尝试了堆栈视图，但我所有的白键都被隔开并从情节提要中消失了：

Answer 1

这就是我要做的。让我们暂时忽略顶部的黑条，只关注按键。暂时让我们忽略黑键。所以让我们假设我们有 14 个白键视图，无论屏幕大小，它们都将填满屏幕。

这很容易。从一个白键视图开始。将其固定在超级视图的顶部、左侧和底部，并将其宽度任意设置为 10。现在只需继续添加白键视图，将其左侧固定在前一个视图的右侧，将其顶部和底部固定到超级视图，并且它们的宽度设置等于第一个视图的宽度。最后，将第 14 个关键视图的右侧固定到父视图的右侧。

到那时，当然，Interface Builder 会退缩，因为宽度不会全部相加，无法将最左边的键固定在左边，最右边的键固定在右边。但是现在您删除了第一个键的宽度限制！很快，按键会自行调整以填满屏幕的总宽度。

这是我屏幕上 Interface Builder 中的结果。我留出了一点额外的空间，为了清楚起见，我把白键涂成绿色。我创建了一个 IBDesignable 自定义 UIView 子类，以模拟按键底端的圆形。

黑键是相似的，只是您需要三个不可见的“间隔”黑键来指示系列中的间隙。这是我添加了黑键的界面生成器：

这是在 iPad 模拟器上运行的应用程序：

这里是在 iPhone 5s 模拟器上运行的：

我认为，这表明这是一个可行的策略。从这一点开始，只需稍作调整即可获得您想要的外观。

Answer 2

在触发动作时，按钮将比视图更容易使用，因此请坚持使用按钮。我们将限制它们的大小以使其行为正常。

首先摆脱黑键，直到白键全部设置。

将所有白键固定在屏幕的顶部和底部。

将它们全部设置为具有相同的宽度。

将第一个键固定到父视图的前沿，将最后一个键固定到父视图的后沿。

选择所有的白键除了最后一个，并将右侧固定，间距为0。

这样应该可以让所有的白键填满屏幕，边缘周围或它们之间没有空间。

使用情节提要中的助理编辑器并从中选择预览。添加一些不同的屏幕尺寸并将它们变成横向。它可能看起来与设备上的不完全一样，但应该非常接近。

一旦白键看起来正确，就将黑键添加到组合中。

从一个黑键开始并拖动以将其调整到情节提要中的适当大小。一旦你有了正确的尺寸，就添加一个纵横比约束，这样你只需要担心调整宽度而不是高度。

暂时将黑键的标签设置为“b”或其他单字符，我们稍后会用到。

您需要做一些数学运算才能让黑键在所有屏幕上都具有正确的宽度……选择黑键并在尺寸检查器中查看它的宽度，对超级视图执行相同操作。一旦你有了这些数字，黑键宽度除以超级视图宽度。记下结果，稍后您将需要它。

现在您知道黑键占据屏幕宽度的百分比，选择黑键和超级视图。将它们设置为具有相同的宽度。 （这可能会使黑键变大，我们稍后会解决）

只选择黑键，进入尺寸检查器，双击使其宽度与父视图匹配的约束。

这将选择约束本身。在其属性中，将乘数设置为与黑键宽度除以屏幕宽度得到的十进制数相同。

这处理了黑键的大小，现在来处理它们的定位。

首先复制您创建的黑键，直到您拥有所需的所有内容。

选择所有黑键并将它们固定到超级视图的顶部。

手动将所有黑键拖到正确的位置（您不需要精确到正确的区域）。

我们需要做的最后一点对齐是使每个黑键的中心在白键之间的线上方……

选择一个黑键，然后控制或右键单击并从它拖动到其右侧的白键。从出现的菜单中选择水平间距。

在尺寸检查器中双击该新约束（它应该有一个负数）。

在约束的属性中，您应该看到它具有第一项和第二项。其中一项是“b”（或您之前用于黑键的任何标签）。如果您单击弹出菜单，您应该会看到尾随被选中。而是选择中心 X。最后将常量设置为0。

这应该将黑键锁定在适当的大小和位置。现在对其余的黑键重复这个过程。

完成后，您可以去掉标签并确保所有图像都已正确设置。

这不是一个快速的过程，但随着时间的推移会变得更容易。

如果白键最终在某些屏幕上出现空间，请尝试确保将它们设置为按比例填充（希望不会过多地弄乱底部曲线）。