iOS 自定义键盘自动布局

Posted 2023-02-23

技术标签:

【中文标题】iOS 自定义键盘自动布局【英文标题】：iOS Custom Keyboard Autolayout 【发布时间】：2014-11-11 14:38:09 【问题描述】：

我应该在 Interface Builder 中向自定义键盘添加哪些约束，以在用户改变方向时完全像内置键盘一样操作，如下图所示（所有按钮水平拉伸和垂直收缩，它们之间的间距相等）。

【问题讨论】：

【参考方案1】：

这很容易（如果您知道如何进行自动布局）。

首先，只需将您想要的按钮（或 UIView）拖到背景视图中。并按照您想要的方式手动布置它们。

我会从第一行（Q~P）开始，约束可以这样设置

Q -> 容器前导空间：4px

P -> 到容器的尾随空间：4px

Q-W、W-E、E-R、R-T、T-Y、Y-U、U-I、I-O、O-P都有4px左右的水平空间

有趣的部分是确定宽度，简单地让Q-W，W-E，E-R，R-T，T-Y，Y-U，U-I，I-O，O-P具有相等的宽度。我们为什么要设置这个约束？因为一旦你修复了 Q 前导、P 尾随和所有间隙，将它们设置为相等宽度将自动让所有第一行按钮平均共享键盘宽度的其余部分（这是我们的按钮宽度）。忘了说，WERTYUIOP 应该以 Q 为中心。

现在您刚刚确定了第一行的按钮宽度。

你如何确定高度？想法是一样的，总键盘高度由上边距（Q 顶部的间隙）和下边距（空格下方的间隙，或 123）、行之间的间隙和 4 * 按钮高度组成。

因此，您可以像这样设置约束，使用 Q、A、Z 和 123 来确定按钮高度。

Q -> 到容器的顶部空间：4px 123 -> 容器底部空间：4px Q-A、A-Z、Z-123，都有垂直间距 4px 然后将它们的高度设置为相等，就像我们为按钮宽度所做的那样。

然后您可以向 W-P 添加约束，使其具有与 Q 相等的高度（我们刚刚确定了 Q、A、Z、123 的高度）。

现在第一行已正确确定，接下来我们考虑第二行。我们需要第二行的 x 位置的参考基准，您可以将约束添加到 G 以使容器视图水平居中，然后将第二行中所有按钮的间隙设置为与第一行相同（在此示例中， 4 像素）。现在你已经确定了第二行。

对于第 3 行，这非常简单，您只需将每个按钮定位在第 2 行即可。例如，

Z -> 中心 x 到 S -> 与 S 等宽

请记住，我们已经确定了 Z 的 y 位置和高度，因此不再需要这样做。对于 X-M，y 以 Z 为中心，x 以第 2 行按钮为中心，与第 2 行按钮等宽，与 Z 等高。

我希望你明白，自动布局的主要部分是找到 BASE，你需要有一个起点，以便所有元素都知道随着容器视图大小的变化它们应该在哪里。

希望这会有所帮助。

【讨论】：