Как организовать UIButtons с помощью Autolayout

Question

Я просто хочу, чтобы мои кнопки имели равные промежутки друг другу и фиксированное конечное и ведущее пространство. Я являюсь любопытным Autolayout noob, поэтому я не знаю, как решить эту проблему. Я пробовал много разных конфигураций, но ничего не работало, как должно. Любые идеи, как решить эту проблему? Это было бы действительно потрясающе.

Answer 1

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

шаги:

1. Создать видимые виды.

2. Создайте проспекты, равные количеству видимых видов плюс один.

3. Альтернативное размещение ваших просмотров, начиная с проставки.

4. В пространстве два видимых представления, поместить все представления в следующей схеме, начиная с левой стороны экрана и перемещение вправо:

spacer1 | view1 | spacer2 | view2 | spacer3.

5. Ограничьте вид распорки так, чтобы их длины были равны друг другу.

6. Создайте ведущее ограничение с первого спейсерного вида на вид контейнера.

7. Создайте ограничение для трейлинга с последнего спейсерного вида на вид контейнера.

8. Создайте ограничения между видами проставки и видимыми видами.

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

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

Создать следующие ограничения для взглядов распорных:

1. ограничивают ширину обзора 2 распорной и вид разделительного 3, чтобы быть равной ширине зрения распорной 1.
2. Ограничить ширина проставки 1 должна быть больше или равна минимальной требуемой ширине.
3. Создайте ведущее пространство для ограничения контейнера из вида спейсера 1 в контейнер.
4. Создайте ограничение горизонтального интервала из представления spacer 1 для просмотра 1. Установите это ограничение как ограничение, меньшее или равное ему, с приоритетом 1000.
5. Создайте ограничения горизонтального расстояния с позиции spacer 2 до view 1 и view 2. Установите эти ограничения как ограничение, меньшее или равное, с приоритетом 999.
6. Создайте ограничение горизонтального интервала из представления spacer 3 для просмотра 2. Установите это ограничение как меньше или равно - с ограничением с приоритетом 1000.

7. Создайте трейлинг-пространство для ограничения контейнера из проставки 3 в контейнер.

   Эти ограничения создают два видимых вида и три невидимых вида (спейсер). Эти виды распорные автоматически изменять размер в ориентации устройства меняется, сохраняя видимые вид на пропорционально расстоянии друг от друга, как показано на следующих двух рисунках:

Это путь яблоко также предлагает сделать в this example

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

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

Answer 2

Если вы добавляете эти кнопки из XIB затем удалить Автокомпоновка и установить пружину и распорки из установки XIb под автоматическим изменением раздела