Равномерные интервальные представления с использованием ConstraintLayout

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

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

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

Ответ 1

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

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

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

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

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

Затем щелкните правой кнопкой мыши по просмотрам и выберите "Центр по горизонтали":

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

Это более заметно в ландшафтном представлении:

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

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
    android:id="@+id/button_save"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_save_text"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="4dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button_share"
    app:layout_constraintHorizontal_chainStyle="spread" />

<Button
    android:id="@+id/button_share"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_share_text"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintLeft_toRightOf="@+id/button_save"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

Подробнее:

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

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

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

Затем выберите "Добавить вертикальный указатель":

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

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

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

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

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

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

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

Ответ 2

Хорошо, если это помогает кому-то

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

Для первого ребенка
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"

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

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

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

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputParent"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <EditText
        android:id="@+id/editTextParent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/state" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputFirstChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/pin_code" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputSecondChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildSecond"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/country" />
</android.support.design.widget.TextInputLayout>