Использование соотношений в обоих измерениях с ConstraintLayout для отображения 3 квадратов одинакового размера

Я хочу отобразить 3 квадрата одинаковых размеров, используя ConstraintLayout. Размер квадрата должен составлять 1/3 высоты экрана. Я хотел бы знать, как это сделать с помощью ConstraintLayout.

Я начал с этого кода:

<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">

    <View
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/view2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintVertical_chainStyle="spread"
        android:background="#ff0000" />

    <View
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/view1"
        app:layout_constraintBottom_toTopOf="@+id/view3"
        app:layout_constraintLeft_toLeftOf="parent"
        android:background="#00ff00" />

    <View
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/view2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#0000ff" />


</android.support.constraint.ConstraintLayout>

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

Я пробовал с этим кодом:

<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">

    <View
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/view2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintVertical_chainStyle="spread"
        app:layout_constraintDimensionRatio="W,1:1"
        android:background="#ff0000" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/view1"
        app:layout_constraintBottom_toTopOf="@+id/view3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintDimensionRatio="W,1:1"
        android:background="#00ff00" />

    <View
        android:id="@+id/view3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/view2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintDimensionRatio="W,1:1"
        android:background="#0000ff" />

</android.support.constraint.ConstraintLayout>

Как я могу исправить эти ограничения и правильно отобразить 3 квадрата одинакового размера? Я хочу использовать только функции ConstraintLayout, если это возможно.

Спасибо


android android-layout android-constraintlayout
person guillaume    schedule 01.04.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я опубликую реализацию с рекомендациями:

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
        tools:layout_editor_absoluteY="81dp"
        tools:layout_editor_absoluteX="0dp">

    <android.support.constraint.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline1"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.33"/>

    <android.support.constraint.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline2"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.66"/>

    <TextView
            android:id="@+id/view1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#ff0000"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.5"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintBottom_toTopOf="@+id/guideline1"
            android:layout_marginBottom="0dp"
            android:layout_marginLeft="0dp"
            app:layout_constraintDimensionRatio="1:1"/>

    <TextView
            android:id="@+id/view2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#00ff00"
            app:layout_constraintTop_toBottomOf="@id/guideline1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintVertical_bias="0.5"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintBottom_toTopOf="@id/guideline2"
            app:layout_constraintDimensionRatio="1:1"/>

    <TextView
            android:id="@+id/view3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#0000ff"
            app:layout_constraintTop_toBottomOf="@id/guideline2"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintVertical_bias="0.5"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="1:1"/>


</android.support.constraint.ConstraintLayout>

Портрет

Пейзаж

person azizbekian    schedule 03.04.2017
comment
Благодарю вас! Я пойду с этим решением. - person guillaume; 04.04.2017

arrow_upward
2
arrow_downward

Выровняйте горизонтальные поля View2 и View3 по View1 вместо Parent:

<View
    android:id="@+id/view1"
    android:background="#ff0000"
    android:layout_height="0dp"
    android:layout_width="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/view2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintVertical_chainStyle="spread"
    app:layout_constraintHorizontal_chainStyle="spread"/>

<View
    android:id="@+id/view2"
    android:background="#00ff00"
    android:layout_height="0dp"
    android:layout_width="0dp"
    app:layout_constraintTop_toBottomOf="@id/view1"
    app:layout_constraintBottom_toTopOf="@id/view3"
    app:layout_constraintLeft_toLeftOf="@id/view1"
    app:layout_constraintRight_toRightOf="@id/view1"
    app:layout_constraintDimensionRatio="1:1"/>

<View
    android:id="@+id/view3"
    android:background="#0000ff"
    android:layout_height="0dp"
    android:layout_width="0dp"
    app:layout_constraintTop_toBottomOf="@id/view2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="@id/view1"
    app:layout_constraintRight_toRightOf="@id/view1"
    app:layout_constraintDimensionRatio="1:1"/>

Обратите внимание, что layout_constraintLeft_toLeftOf и layout_constraintRight_toRightOf для View2 и View3 установлены на @id/view1 вместо parent.

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

(Я добавил layout_constraintHorizontal_chainStyle="spread", чтобы цепочка располагалась по центру по горизонтали. Вы можете изменить горизонтальные ограничения View1, чтобы решить, следует ли выравнивать по левому, центральному или правому краю.)

person kennytm    schedule 03.04.2017
comment
Благодарю вас! Действительно работает. Теперь, если я хочу выровнять по левому краю первый квадрат, выровнять по правому краю второй и выровнять по левому краю третий, это не сработает. - person guillaume; 04.04.2017
comment
Серьезно спасибо вам дюжину раз, это невероятно, что это так просто, но в то же время совершенно из окна, черт возьми, суперневозможно! Это должен быть принятый ответ. - person Pär Nils Amsen; 14.08.2017