Как добавить равный интервал и равную ширину для кнопки в iOS Автоматическая компоновка

Является новым для ограничений автоматической компоновки в Xcode. У меня есть один вид снизу, например UITabBar с 6 UIButtons. Без ограничений я выровнял эти кнопки с 5 пробелами с каждой кнопкой, и каждая кнопка имела ширину 50. Теперь я пытаюсь сделать это, используя Auto layout для поддержки всех размеров экрана.

В ограничениях раскадровки я установил равную ширину для 6 кнопок, и я сделал 60 между каждой кнопкой. Я установил первую кнопку 0 в ведущее пространство и Я устанавливаю последнюю кнопку 0 на ограничения хвоста.

Я хочу buttons with equal width and flexible spaces между представлениями во всех размерах устройства.

Может ли кто-нибудь мне помочь? Ищем помощь. Спасибо заранее.

Ответ 1

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

РЕЗУЛЬТАТ: - предварительный просмотр разных размеров

С Stackview (для iOS 9.0 и выше)

ПРИМЕЧАНИЕ. Если вам нужно сделать приложение для iOS 9 и позже, то UIStackView - это еще один вариант для вас.

Ответ 2

С iOS 9 и Xcode 7 теперь вы можете получить ожидаемый результат с UIStackView и только 3 или 4 ограничения автоматической компоновки.

В следующем шаге используется Storyboard.

Создайте 6 UIButton и 5 UIView s. Выровняйте их по горизонтали. Дайте цвет вашим представлениям.

Выберите все свои виды и кнопки и нажмите кнопку Stack. У вас будут все ваши кнопки и цветные виды, выровненные в UIStackView.

Выберите представление стека, перейдите на панель Utilities и выберите элемент Attributes Inspector. Там нажмите кнопку Distribution и выберите "Заполнить равно".

Пока высота вашего стека зависит от размера встроенного содержимого кнопок. Если с ним все в порядке, вы можете перейти к шагу 5. Однако, если необходимо, вы можете дать стеку взглянуть на ограничение высоты. Выберите представление стека, нажмите кнопку Pin, проверьте кнопку Height, добавьте требуемое значение и нажмите кнопку Add 1 Constraint.

В качестве альтернативы, если вы хотите, чтобы каждый элемент вашего представления стека соответствовал его ширине, выберите первую кнопку в вашем представлении стека, нажмите кнопку Pin, выберите Aspect Ratio и нажмите Add 1 Constraint.

Вы можете проверить, что ваше ограничение соотношения сторон правильное в вашей Document outline (левая панель), и, если вам нужно, вы можете изменить его с другим ограничением в Attribute inspector (правая панель).

Теперь пришло время дать некоторые внешние ограничения вашему представлению стека. Выберите вид стека. Нажмите кнопку Pin, убедитесь, что кнопка Constrain to margin не выбрана, и установите передние, конечные и нижние ограничения на ноль. Убедитесь, что нижнее ограничение связано с вашим представлением контроллера. Затем измените кнопку Update Frames на "Все кадры в контейнере". Теперь вы можете нажать кнопку Add 3 Constraints.

Теперь отображается представление стека.

Дальнейшее замечание:

Если вам не нужна ширина вашего цветного изображения в соответствии с шириной ваших кнопок, вы можете создать представление стека только с помощью UIButtons и просто добавить интервал к представлению стека в Attribute inspector. Тем не менее, вам нужно будет найти способ добавить фоновый цвет за свой стек. Apple заявляет об этом в Справочной системе UIKit Framework:

UIStackView - это неиндексирующий подкласс UIView. Это не предоставить любой пользовательский интерфейс. Вместо этого он просто управляет положение и размер его размещенных видов. В результате некоторые свойства (например, backgroundColor) не влияют на представление стека.

Я создал проект Xcode с 4 различными представлениями стека:

один с цветными представлениями и полагающийся на встроенный размер встроенного контента UIButton для его высоты,
с цветными представлениями и с ограничением UIButton "равная ширина и высота",
один с цветными представлениями и с собственным ограничением по высоте,
один без цветных представлений, но с интервалом и встроенным в цветное изображение.

Вы можете найти этот проект на этом репозитории GitHub.

Ответ 3

Выберите все кнопки и в меню Xcodes Pin

Создайте горизонтальное ограничение в верхнем левом представлении в верхнем правом виде, выбрав красную линию для избранных представлений правой стороны ближайшего соседа
Создайте горизонтальное ограничение в верхнем правом представлении в верхнем левом окне, выбрав красную линию для выбранного ближайшего соседа левой стороны.
Создайте вертикальное ограничение из верхнего вида, выбрав красную линию для выбранного ближайшего соседа верхней стороны.
Выберите флажок рядом с высотой, равными ширинами и нажмите "Добавить 22 ограничения"

Ответ 4

iOS 9 имеет новый класс UIKit под названием UIStackView. Это очень полезно при компоновке представлений по горизонтали или вертикали, например, так, как вы хотите. Вы должны изучить этот урок: Raywenderlich: UIStackView Tutorial