Автомаркет: Xcode 6: Центрирование элементов пользовательского интерфейса

Я использую Interface Builder в Xcode 6, чтобы создать приложение, и у меня возникли проблемы с получением текстовых полей и кнопки, чтобы сосредоточиться на экране для экранов разного размера.

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

Я просто хочу видеть все мои кнопки и текстовые поля для экрана iPhone любого размера, и сейчас симулятор отображает только часть этих элементов интерфейса:

View in iPhone 6 simulator

Я также хочу сделать это в раскадровке, а не в коде, поскольку я еще не достиг уровня этого кода.

ОТВЕТЫ

Ответ 1

Шаг 1. Убедитесь, что класс размера охватывает все экраны iPhone, по крайней мере, в портретном режиме. Итак, измените класс размера на "wCompact hRegular".

Шаг 2: После правильной установки класса размера добавьте UITextFields и UIButton в свою раскадровку. Для меня это выглядит примерно так:

enter image description here

Шаг 3: Прежде чем вы начнете добавлять ограничения, вам нужно запомнить две вещи -

а. Ваш элемент (UITextField, UIButton, UIView или любой компонент) должен знать свою начальную позицию однозначно, а

б. Ваш элемент должен знать его размер, его высоту и ширину.

В этом случае, поскольку вы хотите сосредоточить свои элементы, я просто предполагаю, что он должен быть центрирован, начиная с 10 шкал от левого края и должен заканчивать 10 шкал от правого края экрана вашего iPhone. Теперь это означает, что ширина будет отличаться в зависимости от размера экрана, но ее высота будет одинаковой.

Итак, я просто добавляю ограничения, следующие для первого текстового поля -

enter image description here

Обратите внимание, что в инспекторе размеров я устанавливаю начальную точку текстового поля, x и ширину таким образом, чтобы она находилась на расстоянии 10 pt от левого края и 10 pt от правого края. Не волнуйтесь, это просто математика.

Для второго текстового поля я добавляю ограничение, так же -

enter image description here

Наконец, для кнопки следующие ограничения:

enter image description here

Теперь вам хорошо идти. Все сосредоточено.

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

Ответ 2

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

enter image description here

Сначала выберите представление, которое вы хотите установить для автоматического макета, а затем выберите опцию контакта в правом нижнем углу раскадровки и затем добавьте ограничения, как показано на рисунке выше, и нажмите кнопку Add 4 constrains

Повторите процесс для всех представлений и установите ограничения как Fix the top, bottom, left and right constrains of all views except the last button that should be fix from top,left,right and fixed height.

Ответ 3

Вам нужно использовать селектор класса размера в нижней части окна раскадровки.

Итак, для iPhone 6 или 6 Plus в портрете вы выбираете компактную ширину и регулярную высоту, например:

enter image description here

И тогда вы будете делать все, что нужно для автоматического макета для данного устройства.