Автоматическая компоновка – 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. Добавьте ограничения для верхнего и конечного пространства и высоты для представления стека. Также вертикально выровняйте его.

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

  • запуск экрана xib не отображает изображение правильно
  • Поскольку Xcode 8 и iOS10, представления не имеют должного размера на viewDidLayoutSubviews
  • Как я могу получить текущую ширину и высоту представления при использовании ограничений автоопределения?
  • Как простить Auto Layout при добавлении / удалении ограничений?
  • Код NSLayoutConstraints, чтобы центрировать представление и поддерживать его соотношение сторон
  • Как я могу инициировать обновление всех ограничений автоопределения?
  • iPhone: автоматический макет не работает
  • iOS: простой автозапуск с 1 меткой и 3 кнопками
  • «Автоматическая компоновка по-прежнему требуется после выполнения -layoutSubviews» в подклассе UINavigationBar
  • iOS AutoLayout растущая строка
  • Автозапуск внутри пользовательского представления UIBarButtonItem
  • Interesting Posts

    PFQuery FindObjectsInBackground Возвращает 0

    UIImage, проверьте, содержат ли изображение

    Как заменить пробелы на + в Xcode

    Скопируйте / вставьте номер телефона в клавиатуру или наберите бесплатный номер в iOS программно

    «Инициализатор удобства не имеет« собственного »вызова другому инициализатору"

    Ошибка после переименования проекта Xcode 6: «команда компоновщика не удалась с кодом выхода 1 (используйте -v для вызова вызова)»

    как использовать автоматическую компоновку при установке цели 5.1 в xcode 5

    Запуск установки пакета из плагина Xcode cocoapods

    Проект построения ошибки компоновщика с помощью SDK для Facebook

    Тема 1: сигнал SIGABRT ошибка –

    Приложение отклонено Apple, вызванное использованием SDK Google Maps

    Путь Безье с динамическим изменением ширины

    iOS – heightForRowAtIndexPath не срабатывает при прокрутке

    Как я могу нарисовать полукруг с помощью CoreGraphics

    Событие Touch UIButton попадает в основной вид

    PhoneC: Разработка iOS проста с помощью XCode, Swift3, UITableView, cocatouch, давайте создадим приложения для iPhone, iPad и Macbook.