Какие ограничения я должен добавить в Interface Builder к настраиваемой клавиатуре, чтобы она действовала точно так же, как встроенная, когда пользователь меняет ориентацию, как на изображениях ниже (все кнопки растягиваются по горизонтали и сжимаются по вертикали с равными промежутками между ними).
Это довольно просто (если вы знаете, как сделать авторазметку).
Итак, прежде всего, просто перетащите кнопки (или UIView), которые вы хотите иметь в фоновом режиме. И вручную расположите их так, как вы хотели.
И я бы начал с первой строки (Q ~ P), ограничения можно было бы настроить так
Q -> ведущее пространство к контейнеру: 4px
P -> пробел в конце контейнера: 4px
Q-W, W-E, E-R, RT, TY, Y-U, U-I, I-O, O-P - все имеют горизонтальное пространство, например 4 пикселя.
Интересная часть состоит в том, чтобы определить ширину, просто пусть Q-W, W-E, E-R, R-T, T-Y, Y-U, U-I, I-O, O-P имеют одинаковую ширину. Почему мы устанавливаем это ограничение? Поскольку после того, как вы исправили начальный Q, конечный P и все промежутки, установка их одинаковой ширины автоматически позволит всем кнопкам первого ряда поровну разделить остальную ширину клавиатуры (которая является шириной нашей кнопки). Забыл упомянуть, WERTYUIOP должен центрировать y на 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 пикселя). теперь у вас есть 2-й ряд определен.
Для 3-го ряда это очень просто, вам просто нужно расположить каждую кнопку со 2-м рядом. Например,
Z -> от центра x до S -> ширина равна S
Помните, что мы определили положение Y и высоту для Z, так что больше не нужно этого делать. Для X-M отцентрируйте их по Z для y, отцентрируйте их по кнопке 2-го ряда для x, равной ширине с кнопкой 2-го ряда и равной высоте по Z.
Надеюсь, вы уловили идею, основная часть автомакета — найти БАЗУ, вам нужно иметь начальную точку, с которой нужно начать, чтобы все элементы знали, где они должны быть при изменении размера представления контейнера.
Надеюсь это поможет.
