iOS Autolayout: две кнопки одинаковой ширины, расположенные рядом


93

В настоящее время у меня проблемы с AutoLayout. Я использую конструктор интерфейса и пытаюсь расположить две кнопки одинаковой ширины рядом, как показано на следующем изображении.

план цели

Из следующего изображения предварительного просмотра мой titleImage был правильно ограничен и отображается правильно, но кнопки - нет. Я экспериментировал, выравнивая кнопку 1 по переднему краю titleImage, а кнопку 2 - по заднему краю titleImage, однако в этот момент распределение ширины между двумя кнопками искажается, как показано ниже.

проблемный сценарий

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


1
Масонство - рекомендуемый способ сделать это программно. Ссылка: github.com/Masonry/Masonry
Итачи

1
вот ссылка ... вы можете проверить ... stackoverflow.com/questions/29620409/…
EI Captain v2.0

Ответы:


246

Добавьте следующие ограничения

  1. Назначьте одинаковую ширину от button1 до button2.
  2. Назначьте горизонтальный интервал между обеими кнопками.
  3. Назначьте начальный пробел от button1 его супервизору.
  4. Назначьте конечный пробел от button2 его супервизору.
  5. Назначьте верхнее пространство обеим кнопкам.
    Сообщите мне, если это сработает для вас.

7
Отлично - у меня это сработало. В частности, пункт №2 - добавление горизонтального интервала.
Scratcha

WoW !!! Что ты имел в виду? Это действительно работает как шарм, и я потратил на это около 3 часов! :( В моем случае у меня было два представления равной ширины в супер-представлении, разделяющем его. Однако в конце он спросил меня что-то вроде «Требуются ограничения для Y или высоты». Я решил сделать «Добавить недостающие ограничения», и это разрешилось.
Рандика Вишман

@Abubakr: работает только для экрана одного размера, так как обе кнопки имеют одинаковую ширину.
AG

1
Также работает более чем с 2 смежными элементами пользовательского интерфейса!
siege_Perilous 05

1
Хорошо, спасибо, но я нашел решение, и его лучше в коде. Выровняйте любой из них по центру по родительскому объекту и задайте постоянную половину размера содержимого, которое вы можете вычислить в коде, или, если содержимое статично, вы можете просто обновить кадры и обновить константу. Наряду с этим также добавьте половину расстояния между двумя кнопками к центру выравнивания. И просто дайте это начало или конец другой кнопке. Исправляет это для меня. А если ваш контент является внутренним и его нужно обновить, просто вызовите метод обновления макета и снова вычислите постоянное значение.
Amber K

80

Следуйте инструкциям и снимкам экрана для простого решения


Шаг 1)

  • Для кнопки 1: установите ограничения: (1) ведущий, (2) верхний или нижний, как вам нужно, (3) высота


Шаг 2)

  • Для кнопки 2: установите ограничения: (1) в конце, (2) сверху или снизу, как вам нужно, (3) высота

Шаг 3)

  • Нажмите Ctrl + перетащите от кнопки 1 к кнопке 2

  • Выберите интервал по горизонтали


Шаг-4)

  • Выберите обе кнопки (используя команду) и добавьте ограничения одинаковой ширины


ВЫХОД

Надеюсь, это поможет вам :)


1
Высота не должна быть фиксированной. Позвольте представлению определять высоту кнопки в соответствии с размером экрана.
Кунал Кумар

@KunalKumar в этом случае высота фиксирована. не могли бы вы сказать мне, что вы хотите?
Vvk

@Vvk ... идеальный брат :)
Jaywant Khedkar

18

Макет стека в iOS9 отлично справится со своей задачей. Добавьте представление стека в представление и настройте его следующим образом:

введите описание изображения здесь


2

Вы можете проверить мой пример - вы можете легко нацелить это, используя пропорциональное ограничение. Также вы можете легко прицелиться пропорционально нескольким UIViews. Пожалуйста, посмотрите прикрепленный пример

https://dl.dropboxusercontent.com/u/48223929/TestViewController.xib


0

Мое решение -

  1. Поместите небольшой вид в середину двух кнопок и сделайте его центром (горизонтальный центр в контейнере и вертикальный центр в контенте как 0).
  2. Добавьте высоту и ширину маленькому представлению.
  3. Добавьте кнопки ограничения и задайте ограничения по горизонтали для маленького вида.
  4. Задайте цвет фона небольшого представления такой же, как у кнопок или цвета представления.

Примечание. См. Снимок экрана.

введите описание изображения здесь

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.