Автоматическая компоновка – 5 кнопок в центре

Я пытаюсь войти в бизнес Auto Layout, но я нахожу это довольно тяжелым.

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

Вот как это выглядит в IB (и вроде как нужно искать при запуске приложения): IB просмотров

Поэтому у меня есть следующие ограничения:

  • Добавлено соотношение сторон 1: 1, чтобы они всегда были квадратами
  • Первая кнопка «обнимает» левую сторону представления, поэтому она будет отображаться сбоку.
  • Следующие 4 кнопки имеют горизонтальное расстояние к кнопке рядом с ними
  • Каждая кнопка имеет ограничение на верхнюю и нижнюю части экрана, поэтому они будут увеличиваться, если вы измените размер экрана.

Однако, когда я запускаю его, он выглядит так: Результаты

И я просто немного здесь. Что я делаю не так?

Спасибо заранее, с наилучшими пожеланиями – / JBJ

** РЕДАКТИРОВАТЬ ** Я добавил ограничение для последней кнопки. Это гарантирует, что все они находятся в пределах экрана, но это довольно проблематично, когда мы думаем о его размере, так что это тоже не решило. добавлена ​​последняя кнопка

* EDIT EDIT * Пробовал удалить верхнее и нижнее ограничение, так как они заставляют размер вверх. Добавлено ограничение по вертикали для всех. Это тоже не сработает. Отображение их очень мало (выстроено красиво, но слишком мало), а также содержит предупреждения: В ИБ

В симуляторе

4 Solutions collect form web for “Автоматическая компоновка – 5 кнопок в центре”

Хорошо, здесь идет …

  1. Добавить 5 кнопок в представление … Нет ограничений.

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

  1. Добавьте горизонтальные ограничения пространства между ними. Также добавьте ограничения из первого и последнего просмотров в супервизор. Я также изменил последнее ограничение на 0 (обратите внимание, что +306 говорит мне, что это сейчас неуместно).

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

  1. Выберите все кнопки и (с помощью кнопки добавления ограничения) введите описание изображения здесь добавьте «Равные ширины» для всех. Обратите внимание, что оранжевый пунктирный контур говорит мне, что теперь у всех будет одинаковая ширина.

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

  1. Теперь выровняйте их в вертикальном центре представления с помощью этой кнопки …

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

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

  1. Последнее, что нужно сделать, это перейти к каждому из них и добавить соотношение сторон 1: 1. Вам нужно будет добавить ограничение, а затем отредактировать его до 1.

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

Убедитесь, что вы обновили кадры, как только вы закончите, чтобы переместить кнопки в новые ограничения …

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

Экран предварительного просмотра показывает, что это работает на всех разных размерах …

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

Для размещения их в центре экрана по вертикали используйте

NSLayoutConstraint *constraintHorizontal = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:attribute multiplier:1.0f constant:0.0f]; 

Для размещения их по горизонтали. Ширина кнопки = (ширина экрана) – (размер интервала между кнопками) – (левое расстояние) – (правое расстояние) / 5;

То же самое для высоты. Исходное левое ограничение для первого изображения будет левым.

То, что я всегда делаю в такой ситуации, просто подумайте. Сколько ограничений мне нужно, чтобы 100% определить дизайн? Что я должен написать, чтобы сообщить кому-нибудь по телефону, как это выглядит?

В вашем случае это следующие ограничения (надеюсь, что я его не забуду)

  • Это все квадраты (высота ширины, а не значение)
  • Они имеют одинаковый размер, просто устанавливают его равным, а не значением
  • Горизонтальное расстояние между элементами и краем, установите его на фиксированный размер
  • Вертикально центрированный
  1. Поместите 5 кнопок вертикально и горизонтально в UIView

  2. Выделите их все и вставьте в виде стека

  3. Измените распределение, чтобы заполнить одинаково.

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

  5. Добавьте ограничения для верхнего и конечного пространства и высоты для представления стека. Также вертикально выровняйте его.

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

  • Многолинейный UILabel iOS AutoLayout
  • iOS Autolayout, как растянуть 2 кнопки по горизонтали
  • Автоматическое добавление ограничений автоопределения в контроллер навигации
  • Автомасштабирование в малом пространстве (программно)
  • Анимация двух ограничений одновременно - порядок вопросов?
  • Странный сбой при отклонении диспетчера просмотров, авто-макета виноват?
  • UILabel во вложенном представлении в UIScrollView сжимается при автозапуске даже с 1000 степенью сжатия содержимого
  • Как бороться с многословием NSLayoutConstraint в коде?
  • iOS 11 безопасных областей против анимации UIView
  • Как настроить размер шрифта UILabel в зависимости от высоты, доступной для метки
  • Автозапуск внутри пользовательского представления UIBarButtonItem
  • PhoneC: Разработка iOS проста с помощью XCode, Swift3, UITableView, cocatouch, давайте создадим приложения для iPhone, iPad и Macbook.