Создание сетки 3x3 с ограничениями автоматической компоновки

Xcode сказал, что нет проблем с макетами, но, как вы можете видеть, есть. Я все пробовал. Apple docs, YouTube, Google и т.д. Кажется, я делаю это правильно, однако, возможно, заказ, который я делаю, что-то еще или что-то еще, вызывает эти проблемы. Попробовав все, я наконец-то позволю Xcode add missing constraints и это лучший результат. У меня 9 кнопок на 9 UIImages, поэтому я должен делать то же самое, что и с кнопками, как с UIImages. Я временно разместил UIImages поверх кнопок, чтобы я мог видеть, что я делаю более легко. У меня 2 скриншота. Пожалуйста, порекомендуйте.

Начало

Это после использования опции Xcode add missing constraints. Сорта, что я хочу, но без сигары.

Ответ 1

iOS 9 или более поздняя версия

Если целью развертывания является iOS 9 или новее, существует более простое решение, использующее UIStackView. См. мой другой ответ.

iOS 8 или ранее

Существует несколько способов создания этого макета с ограничениями. Здесь один.

Во-первых, подсказка: вы можете называть свои взгляды в контуре документа. Это значительно облегчает понимание того, с какими представлениями связаны и какие ограничения связаны. Чтобы назвать представление, щелкните его в контуре, нажмите "вернуться" и введите имя. Тогда схема может выглядеть так:

Если вы измените имена, вам может потребоваться закрыть файл (панель меню > Файл > Закрыть "Main.storyboard" ) и снова открыть его, чтобы все было правильно обновлено.

(Обратите внимание, что эти имена используются только при редактировании раскадровки. Невозможно получить эти имена во время выполнения.)

ОК, теперь для создания ограничений. Начните с ограничения всех левых-правых ребер ближайшему соседу с постоянным значением ноль:

Далее, ограничьте верхний и нижний края верхней строки ближайшим соседом с постоянным значением ноль. Если вы хотите ограничить верхний край супервизора, а не верхний макет руководства, вы должны делать это один за другим. Здесь, как сделать первый:

Повторите для двух других представлений в верхней строке.

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

Повторите для двух других представлений в нижней строке.

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

Наконец, выберите все ваши представления и создайте ограничения равной ширины и равной высоты:

Проверьте результат, используя Preview в редакторе Assistant:

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

Ответ 2

Если вы ориентируетесь на iOS 9 или более позднюю версию,, вы можете сделать сетку любых измерений гораздо проще с помощью представлений стека. Сделайте одно горизонтальное представление стека для каждой строки, а затем поместите все горизонтальные представления стека в виде одного вертикального стека. Установите "Распределение" всех представлений стека (как по горизонтали, так и по вертикали), чтобы заполнить одинаково. Затем установите ограничения на представление вертикального стека для управления общим размером сетки.

Вот демо. Я начну с девяти изображений:

Сначала я создам три горизонтальных представления стека, по одному для каждой строки сетки. Поскольку я уже вручную упорядочил изображения в грубой форме сетки, Xcode достаточно умен, чтобы автоматически использовать горизонтальные представления стека:

Далее я выберу три горизонтальных представления стека и задаю распределение всех трех, чтобы заполнить одинаково одновременно:

Теперь я поместил все горизонтальные представления стека в одно вертикальное представление стека и установил вертикальное представление стека Распределение для заполнения одинаково. Опять же, поскольку горизонтальные представления стека уже выложены примерно вертикально, Xcode достаточно умен, чтобы автоматически использовать вертикальное представление стека:

Наконец, я поставлю ограничения на представление вертикального стека, чтобы он заполнил его контейнер (за исключением области строки состояния). Затем я расскажу Xcode, чтобы обновить фреймы всех просмотров, и у меня будет идеальная сетка 3x3 с почти никакой работой: