Xcode故事板约束和自动布局

Question

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

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

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

过去一周我一直在不停地工作，不知道出了什么问题。我遵循了manny教程，但我所遵循的是非常基本的，最多只有一些标签或按钮被大量空间隔开。我不确定是不是因为我的按钮没有足够的间距，或者它只是非常沮丧。任何帮助或指南/教程都会非常有用......

此外，我已经尝试检查宽度和高度的方框以保持宽度和高度，但这只会使某些设备上的按键太大或太小。有没有办法拉伸这些键，以便它们适应他们的设备？我已经听说过内在的尺寸内容，但不知道如何应用超过24个按钮......

编辑： 我尝试了一个堆栈视图，但是我的所有白键都被分开了，然后走出了故事板：

Answer 1

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

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

当然，在这一点上，Interface Builder会犹豫不决，因为宽度并不是所有的加起来都可以将最左边的键固定在左边，而最右边的键固定在右边。但现在你删除第一个键的宽度限制！ Presto，按键调整自己以填充屏幕的总宽度。

这是我的屏幕上的Interface Builder中的结果。我已经允许了一点额外的空间，为了清晰起见，我将白色键绿色。我创建了一个IBDesignable自定义UIView子类，以模拟键底端的圆形形状。

黑键是相似的，除了你需要三个不可见的“间隔”黑键来决定系列中的间隙。这是我的Interface Builder添加了黑键：

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

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

我认为这表明这是一个可行的策略。从这一点来看，这只是一个小小的调整，以获得你想要的精确外观。

Answer 2

当触发动作时按钮比按钮更容易使用。我们会限制它们的大小以便它们表现出来。

首先删除黑键，直到白键全部设置完毕。

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

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

将第一个键固定到前缘，将最后一个键固定到superview的后缘。

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

这应该使得所有白键都填满屏幕，边缘周围或它们之间没有空间。

使用故事板中的助理编辑器并从中选择预览。添加几种不同的屏幕尺寸并将其转换为横向。它可能看起来不像设备上的样子，但它应该非常接近。

一旦白键看起来正确，将黑键添加到混音中。

从一个黑键开始并拖动以在故事板中将其调整为适当的大小。一旦你有这个尺寸，就添加一个宽高比约束，这样你只需要担心调整宽度而不是高度。

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

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

现在您知道黑键占用屏幕宽度的百分比，选择黑键和超级视图。将它们设置为具有相同的宽度。 （这可能会使黑键变得疯狂，我们马上就会解决这个问题）

只选择黑键，转到尺寸检查器，然后双击使其宽度与超级视图匹配的约束。

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

它负责处理黑键的大小，现在处理它们的定位。

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

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

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

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

选择一个黑键并进行控制或右键单击并从中拖动到右侧的白键。从显示的菜单中选择水平间距。

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

在约束的属性中，您应该看到它有第一个项目和第二个项目。其中一个项目是“b”（或者您之前用于黑键的任何标签）。如果单击弹出菜单，则应该看到尾随检查。请改为选择中心X.最后将常数设为0.

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

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

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

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