2014-11-11 4 views
3

Какие ограничения следует добавить в Interface Builder к пользовательской клавиатуре, чтобы действовать точно так же, как встроенная в нее, когда пользователь меняет ориентацию, как на изображениях ниже (все кнопки растягиваются горизонтально и вертикально с равными промежутками между ними).Автозапуск пользовательской клавиатуры iOS

enter image description here

ответ

4

Это довольно легко (если вы знаете, как сделать autolayout).

Прежде всего, просто перетащите кнопки (или UIView), которые вы хотели бы иметь в фоновом режиме. И вручную разместите их так, как вы хотели.

И я хотел бы начать с первой строкой (Q ~ Р), ограничения могут быть установлены как этот

Q -> ведущего пространства в контейнер: 4px

P -> заднего пространства для контейнера: 4px

КЯ, мы, Е. Р., РТ, TY, YU, пользовательский интерфейс, IO О.П. все имеет горизонтальное пространство, как 4px

интересно то, чтобы определить ширину, просто пусть QW, мы, ER, RT, TY, YU, UI, IO, OP имеют равную ширину. Почему мы устанавливаем это ограничение? Поскольку после того, как вы установили Q-ведущий, P-трейлинг и все промежутки, установив их равной ширине, автоматически разрешите всем кнопкам первой строки одинаково распределять оставшуюся часть ширины клавиатуры (это наша ширина кнопки). Вспомним, что WERTYUIOP должен центрировать y до Q.

Теперь вы только что определили первый ряд с шириной кнопки.

Как вы определяете высоту? Идея такая же, общая высота клавиатуры состоит из верхнего края (зазора сверху Q) и нижнего края (промежуток ниже пространства или 123), промежуток между строками и высотой кнопки 4 *.

Итак, вы можете установить такие ограничения, используя Q, A, Z и 123, чтобы определить высоту кнопки.

Q -> сверху пространство контейнера: 4px 123 -> Дно пространство контейнера: 4px QA, AZ, Z-123, все они имеют вертикальное пространство 4px , а затем установить их высоту равной, как и то, что мы сделал для кнопка ширина.

Тогда вы можете добавить ограничения на W-P, чтобы иметь равную высоту с Q (мы только что определили высоту для Q, A, Z, 123).

Теперь первая строка правильно определена, затем мы рассмотрим вторую строку. Нам нужна эталонная база для позиции x второй строки, вы можете добавить ограничение на G для горизонтального горизонтального просмотра контейнера, а затем установить промежутки для всех кнопок во второй строке, чтобы они были такими же, как в первой строке (в этом примере, 4px). теперь у вас есть 2-й ряд.

Для 3-го ряда, это очень просто, вам просто нужно разместить каждую кнопку со второй строкой. Например,

Z -> центр х до S -> равной ширины к S

Помните, что мы определили позицию у и высоту Z, поэтому нет необходимости делать это больше. Для X-M центрируйте их на Z для y, центрируйте их на кнопку 2-го ряда для x, равной ширине на 2-й строке и равной высоте на Z.

Надеюсь, вы поняли, что основная часть автозапуска заключается в том, чтобы найти BASE, вам нужно начинать отправку, чтобы все элементы знали, где они должны быть, когда изменяется размер контейнера.

Надеюсь, это поможет.

+0

Это не работает со мной, ширина строк первой строки увеличивается неравномерно, так что в первой строке отображаются только 4 кнопки! и да, я установил равные ограничения ширины !!!! – Meseery