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


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

Начало

Начало

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

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

2   26   2015-02-21 06:55:46

2 ответа:

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

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

IOS 8 или более ранняя версия

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

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

контур с именами

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

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

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

ограничения слева направо

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

сверху-снизу ограничения сверху-слева

Повторите для двух других видов в верхнем ряду.

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

сверху-снизу ограничения снизу-слева

Повторите для двух других видов в нижнем ряду.

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

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

равные ограничения по ширине и высоте

Проверьте результат, используя предварительный просмотр в помощнике редактора:

предварительный просмотр

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

ошибка отсутствующих ограничений

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

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

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

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

горизонтальные виды стека для строк

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

Настройка распределения стеков строк

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

вертикальный вид стека

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

ограничения на представление вертикального стека