Равномерное расстояние между видами с помощью ConstraintLayout

Question

Равномерное расстояние между видами с помощью ConstraintLayout

С помощью LinearLayout для равномерного пространства (веса) просмотров, например:

как вы реализуете равномерно распределенные представления, как это с помощью нового ConstraintLayout?

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

3 101

android android-layout android-constraintlayout constraint-layout

3 ответа:

Ну если это кому-то поможет

the ключ здесь 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>

19

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

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

    <TextView
        android:id="@+id/figure_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_2"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="1"
        />

    <TextView
        android:id="@+id/figure_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_1"
        tools:text="2"
        />

    <TextView
        android:id="@+id/figure_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_2"
        tools:text="3"
        />

    <TextView
        android:id="@+id/figure_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_3"
        tools:text="4"
        />
</android.support.constraint.ConstraintLayout>

Итак, set android:layout_width="0dp",app:layout_constraintHorizontal_weight="1" и связать каждый вид с соседями, как:

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

3

AdamK · Accepted Answer · 2017-10-03 06:07:15

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

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

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

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

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

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

это устанавливает двунаправленную связь между представлениями (так определяется цепочка). По умолчанию стиль цепочки - "spread", который применяется даже при отсутствии атрибута 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%:

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

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

(это то же самое, что установить 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" />