Обычно LinearLayout равномерно распределяет (по весу) представления, например: example layout

Как реализовать такие равномерно распределенные представления, используя новый ConstraintLayout?

ConstraintLayout ссылки для справки: сообщение в блоге, видео сеанса ввода-вывода

Ответы (5)

Есть два способа сделать это, используя ConstraintLayout: Цепочки и Рекомендации. Чтобы использовать цепочки, убедитесь, что вы используете ConstraintLayout Beta 3 или новее, и если вы хотите использовать редактор визуального макета в Android Studio, убедитесь, что вы используете Android Studio 2.3 Beta 1 или новее.

Метод 1 - Использование цепочек

Откройте редактор макета и добавьте свои виджеты как обычно, добавляя родительские ограничения по мере необходимости. В этом случае я добавил две кнопки с ограничениями внизу родительского элемента и сбоку от родительского элемента (левая сторона для кнопки «Сохранить» и правая сторона для кнопки «Поделиться»):

enter image description here

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

enter image description here

Выделите оба представления, нажав Ctrl / Cmd или перетащив рамку вокруг представлений:

enter image description here

Затем щелкните правой кнопкой мыши виды и выберите «Центрировать по горизонтали»:

enter image description here

Это устанавливает двунаправленное соединение между представлениями (так определяется цепочка). По умолчанию стиль цепочки - «распространение», который применяется, даже если атрибут XML не включен. Придерживаясь этого стиля цепочки, но установка ширины наших представлений на 0dp позволяет представлениям заполнять доступное пространство, равномерно распределяясь по родительскому элементу:

enter image description here

Это более заметно в альбомной ориентации:

enter image description here

Если вы предпочитаете пропустить редактор макета, результирующий XML будет выглядеть так:



Подробности:

  • установка ширины каждого элемента на 0dp или MATCH_CONSTRAINT позволяет представлениям заполнять родительский элемент (необязательно)
  • представления должны быть связаны между собой двунаправленно (справа от ссылок кнопки сохранения на кнопку совместного использования, слева от ссылок кнопки общего доступа к кнопке сохранения), это произойдет автоматически через редактор макета при выборе «По центру по горизонтали»
  • первое представление в цепочке может указывать стиль цепочки через layout_constraintHorizontal_chainStyle, см. документацию для различных стилей цепочки, если стиль цепочки опущен, по умолчанию используется «распространение»
  • вес цепочки можно настроить с помощью layout_constraintHorizontal_weight
  • этот пример для горизонтальной цепочки, есть соответствующие атрибуты для вертикальных цепочек

Метод 2 - Использование рекомендаций

Откройте свой макет в редакторе и нажмите кнопку с указанием:

enter image description here

Затем выберите «Добавить вертикальную направляющую»: enter image description here

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

layout editor relative guideline

Щелкните стрелку влево, чтобы переключить ее на процентное значение, затем перетащите направляющую до отметки 50%:

layout editor percent guideline

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

final layout

Если вы хотите, чтобы представления заполняли доступное пространство, тогда ограничение должно быть установлено на «Any Size» (волнистые линии, идущие по горизонтали):

any size constraint

(Это то же самое, что установить layout_width на 0dp).

Руководство можно также довольно легко создать в XML, вместо использования редактора макета:


Вы должны прочитать о цепях с утяжелителями. Пример кода здесь.



    

    

    

    

Итак, установите android: layout_width = "0dp", app: layout_constraintHorizontal_weight = "1" и свяжите каждое представление с соседями, например:

app:layout_constraintStart_toEndOf="@id/figure_2"
app:layout_constraintEnd_toStartOf="@id/figure_4"

enter image description here

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


 
 
 

enter image description here

ну если кому то поможет

здесь ключ app: layout_constraintHorizontal_weight = "1" и
Лучшее в компоновке ограничений - это то, что она поддерживает круговую зависимость, и вот что я сделал, используя именно это.

Первому ребенку
приложение: layout_constraintEnd_toStartOf = "@ + id / textInputSecondChild"

Для второго ребенка

приложение: layout_constraintLeft_toRightOf = "@ + id / textInputFirstChild"

вот полная демонстрация



    




    




    

Чтобы создать 2 вида в одной строке одинаковой ширины, просто нужно определить



    

Примечание

  • ширина = 0dp (MATCH_CONSTRAINT)
  • Ограничение button1 и button2 должно быть как указано выше

Результат

БОЛЬШЕ
Если вы хотите View1 больше, чем View2, вы можете использовать weight или процент.
Например, View1 width = 2 *View2 использование ширины вес



    

Результат

Пример, Вид1 ширина = 2 *Вид2 ​​ использование ширины процентов



    

Результат

2022 WebDevInsider