当用户改变方向时，我应该在 Interface Builder 中添加哪些约束到自定义键盘以完全像内置键盘一样操作，如下图所示（所有按钮水平拉伸并垂直收缩，它们之间的间距相等）。
问问题
1013 次
1 回答
4
这很容易（如果您知道如何进行自动布局）。
所以首先，只需将您想要的按钮（或 UIView）拖到背景视图中。并像您想要的那样手动布置它们。
我将从第一行（Q~P）开始，可以像这样设置约束
Q -> 容器前导空间：4px
P -> 到容器的尾随空间：4px
QW, WE, ER, RT, TY, YU, UI, IO, OP都有4px的水平空间
有趣的部分是确定宽度，简单地让 QW, WE, ER, RT, TY, YU, UI, IO, OP 具有相等的宽度。我们为什么要设置这个约束？因为一旦你修复了 Q 前导、P 尾随和所有间隙，将它们设置为相等宽度将自动让所有第一行按钮平均共享键盘宽度的其余部分（这是我们的按钮宽度）。忘了说，WERTYUIOP 应该以 Q 为中心。
现在您刚刚确定了按钮宽度的第一行。
你如何确定高度？想法是一样的，总键盘高度由上边距（Q 顶部的间隙）和下边距（空间下方的间隙，或 123）、行之间的间隙和 4 * 按钮高度组成。
因此，您可以像这样设置约束，使用 Q、A、Z 和 123 来确定按钮高度。
Q -> 容器顶部空间：4px 123 -> 容器底部空间：4px QA、AZ、Z-123，它们都有垂直空间 4px，然后将它们的高度设置为相等，就像我们为按钮宽度所做的那样。
然后您可以向 WP 添加约束，使其具有与 Q 相等的高度（我们刚刚确定了 Q、A、Z、123 的高度）。
现在第一行已正确确定，接下来我们考虑第二行。我们需要第二行的 x 位置的参考基准，您可以将约束添加到 G 以使容器视图水平居中，然后将第二行中所有按钮的间隙设置为与第一行相同（在此示例中， 4 像素）。现在你已经确定了第二行。
第 3 行非常简单，您只需将每个按钮定位到第 2 行即可。例如，
Z -> 中心 x 到 S -> 等宽到 S
请记住，我们已经确定了 Z 的 y 位置和高度，因此不再需要这样做。对于 XM，y 以 Z 为中心，x 以第 2 行按钮为中心，与第 2 行按钮等宽，与 Z 等高。
我希望你明白，自动布局的主要部分是找到 BASE，你需要有一个起点，以便所有元素都知道随着容器视图大小的变化它们应该在哪里。
希望这可以帮助。
于 2014-11-13T02:10:32.823 回答