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

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

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

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

View in iPhone 6 simulator

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

источник

2014-10-20 cheznead

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

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

enter image description here

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

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

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

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

Таким образом, я просто добавить Сдерживает следующим образом для 1-го текста box-

enter image description here

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

Для 2-го TextField, я добавляю Ограничить, то же ПУТЬ

enter image description here

Наконец, для кнопки, то сдерживает являются following-

enter image description here

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

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

источник

2015-04-08 10:18:46 Natasha

+12

Я хочу плакать. И я думал, что XML-макеты Android выглядели ужасно. – Josh

Как только вы привыкнете к авто макету, он станет вашим лучшим другом, но да, кривая обучения может быть очень жесткой, поскольку вам придется пройти пробную версию и ошибку, чтобы понять, что вы должны делать и что вы должны делать «т. Кроме того, есть много способов, вы можете достичь того же. – Natasha

@ Josh Ты бы заплакал, если бы тебе пришлось отказаться от XAML за это дерьмо. Такова жизнь ... по мере того, как Microsoft отменила покупку телефона Nokia. Кусайте пулю здесь. – Stonetip

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

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

enter image description here

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

источник

2014-10-20 17:51:13 Chris

Хорошо, как только я сделал этот выбор для портрета, что мне нужно сделать в автоматическом макете после этого? Я бы хотел, чтобы он работал на iPhone 6, я все равно использую портрет, поэтому он не должен соответствовать ландшафтному режиму. – cheznead

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

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.

источник

2014-10-20 18:04:27 iHulk

По умолчанию это любая ширина и высота. Где я могу сделать константы? – cheznead

@shinnyWhack Если он по умолчанию имеет любую ширину и высоту, просто просто выберите свои представления один за другим и задайте ограничения, указанные в приведенном выше изображении. Исправьте верхние, нижние, левые и правые ограничения всех видов, кроме последней кнопки, которая должна быть исправлена с верхней, левой, правой и фиксированной высоты. – iHulk

Но где я могу исправить эти ограничения и как? (Я не хочу делать эти ограничения программным путем). Я использую автоматический макет, и если да, какую операцию я использую: выровнять или вывести? С ними трудно работать, поскольку я полный новичок. – cheznead

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

ответ

Смежные вопросы