Ios Xcode脚本约束和自动布局

我现在正在开发一个应用程序，在过去的两周里，我一直在努力解决的一件事就是自动布局。我对iOS编程还不熟悉，所以我不确定解释我的问题的最佳方式，但我想说的是

我正在制作一个钢琴应用程序，它的工作原理是，我的键盘只是一堆相互相邻的按钮

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

过去一周我一直在不停地工作，不知道出了什么问题。我已经学习了manny教程，但我所学习的是非常基本的，最多有几个标签或按钮，它们之间有大量的空间。我不确定这是因为我的按钮没有足够的间距还是什么，但这只是非常沮丧。任何帮助或指南/教程都会非常有用

此外，我还尝试勾选表示宽度和高度的框，以保持宽度和高度，但这只会使某些设备上的按键过大或过小。有没有办法拉伸这些按键，使其适应自己的设备？我听说过固有大小的内容，但不知道这将如何应用于超过24个按钮

编辑： 我尝试了堆栈视图，但我所有的白键都被隔开并退出了故事板：

---

以下是我要做的。让我们暂时忽略顶部的黑条，只关注按键。让我们暂时忽略黑键。让我们想象一下，我们有14个白键视图，它们将填充屏幕，而不管其大小

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

当然，在这一点上，Interface Builder会犹豫不决，因为宽度加起来并不能使最左边的关键点固定在左边，最右边的关键点固定在右边。但是现在您删除了第一个关键点上的宽度约束！首先，按键会自动调整以填充屏幕的总宽度

以下是界面生成器在我的屏幕上显示的结果。我留出了一点额外的空间，为了清晰起见，我把白色的按键涂成了绿色。我创建了一个IBDesignable自定义UIView子类，以便模拟键底端的圆形

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

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

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

---

我认为，这表明这是一个可行的战略。从这一点来说，只需稍作调整即可获得您想要的准确外观。

以下是我要做的。让我们暂时忽略顶部的黑条，只关注按键。让我们暂时忽略黑键。让我们想象一下，我们有14个白键视图，它们将填充屏幕，而不管其大小

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

当然，在这一点上，Interface Builder会犹豫不决，因为宽度加起来并不能使最左边的关键点固定在左边，最右边的关键点固定在右边。但是现在您删除了第一个关键点上的宽度约束！首先，按键会自动调整以填充屏幕的总宽度

以下是界面生成器在我的屏幕上显示的结果。我留出了一点额外的空间，为了清晰起见，我把白色的按键涂成了绿色。我创建了一个IBDesignable自定义UIView子类，以便模拟键底端的圆形

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

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

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

---

我认为，这表明这是一个可行的战略。从这一点来说，只需稍作调整即可获得您想要的准确外观。

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

从摆脱黑键开始，直到白键都设置好

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

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

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

选择除最后一个外的所有白色关键点，并固定右侧，间距为0

这样，所有的白键都会填满屏幕，边缘或边缘之间没有空间

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

一旦白键看起来正确，添加t