Xcode故事板约束和自动布局

Question

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

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

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

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

我也尝试过检查宽度和高度的复选框以保持宽度和高度，但是这只会使某些设备上的按键太大或太小。 有没有办法拉伸这些按键，使其适应设备？ 我听说过固有尺寸内容，但不知道超过24个按钮如何应用...

编辑：我尝试了一个堆栈视图，但是我所有的白色键都被间隔开了，离开了故事板：

Answer 1

这就是我要做的。 让我们暂时忽略顶部的黑条，只专注于按键。 暂时让我们忽略黑键。 因此，让我们想象一下，我们有14个白键视图，无论它们的大小如何，它们都会填满整个屏幕。

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

当然，到那时，Interface Builder会大吃一惊，因为宽度的总和并没有全部累加，因此可以将最左边的键固定在左侧，而将最右边的键固定在右侧。 但是现在您删除了第一个键的宽度限制！ Presto，按键会自行调整以填满屏幕的整个宽度。

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

黑键类似，除了您需要三个不可见的“空格”黑键来指示系列中的间隙。 这是添加了黑键的我的Interface Builder：

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

它在iPhone 5s模拟器上运行：

我认为，这表明这是一种可行的策略。 从现在开始，只需进行一些细微调整即可获得所需的外观。

Answer 2

在触发动作方面，按钮比视图更易于使用，因此请坚持使用按钮。 我们将限制它们的大小，以便它们表现出来。

从摆脱黑键开始，直到所有白键都已设置。

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

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

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

选择除最后一个按键以外的所有白色按键，并将右边的空格固定为0。

这样就可以使所有白色键填满整个屏幕，在边缘周围或边缘之间没有任何空间。

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

白色键看起来正确后，将黑色键添加到混合中。

仅从一个黑键开始，然后拖动以在情节提要中将其调整为适当的大小。 正确设置尺寸后，添加一个宽高比约束，因此您只需要担心调整宽度而不是高度。

暂时将黑键的标签设置为“ b”或其他某个单个字符，稍后我们将需要它。

您将需要做一点点的数学运算，以使黑键在所有屏幕上都具有正确的宽度...选择黑键，然后在大小检查器中查找其宽度，对超级视图执行相同的操作。 一旦有了这些数字，就将黑键宽度除以超级视图宽度。 请记下结果，因为稍后您会需要它。

现在您知道了黑键占据的屏幕宽度百分比，选择黑键和超级视图。 将它们设置为相同的宽度。 （这可能会使黑键变得疯狂起来，我们稍后会修复）

仅选择黑键，转到大小检查器，然后双击使其宽度与父视图匹配的约束。

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

这就照顾了黑键的大小，现在可以处理它们的位置。

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

选择所有黑键，然后将其固定在超级视图的顶部。

手动将所有黑键拖到正确的位置（您不必在正确的区域内保持精确）。

我们需要做的最后对齐工作是使每个黑键的中心都在白键之间的直线上。

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

在大小检查器中，双击该新约束（该约束应为负数）。

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

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

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

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

如果白色键在某些屏幕上最终以空格结束，请尝试确保将它们设置为缩放以填充（希望这样不会使底部曲线混乱太多）。