Как изменить высоту вида в зависимости от ширины?

Question

У меня ConstraintLayout с 4-мя ImageViews внутри, и мне нужно указать любой вес ImageView, например LinearLayout, и изменить высоту вида в зависимости от ширины.

Это то, что мне нужно:

Так что, как вы можете видеть здесь, у меня есть 4 вида с одинаковой шириной, и высота изменяется как ширина.

После того, как я покажу вам, что я пытаюсь сделать, это мой статус прямо сейчас:

Это макет:

    <android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/label_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintEnd_toStartOf="@+id/label_2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/a" />

    <ImageView
        android:id="@+id/label_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintBaseline_toBaselineOf="@id/label_1"
        app:layout_constraintEnd_toStartOf="@+id/label_3"
        app:layout_constraintStart_toEndOf="@id/label_1"
        app:srcCompat="@drawable/a" />

    <ImageView
        android:id="@+id/label_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintBaseline_toBaselineOf="@id/label_1"
        app:layout_constraintEnd_toEndOf="@id/label_4"
        app:layout_constraintStart_toEndOf="@id/label_2"
        app:srcCompat="@drawable/a" />

    <ImageView
        android:id="@+id/label_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintBaseline_toBaselineOf="@id/label_1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/label_3"
        app:srcCompat="@drawable/a" />

</android.support.constraint.ConstraintLayout>

Примечание: мой актив @ drawable / a 40X40

Как я могу получить тот же результат, что и в примере, который я приложил?

Answer 1

Можно подумать, что размещение четырех видов изображений в цепочке, привязанной к началу и концу родительского элемента ConstraintLayout с высотой wrap_content, как вы определили, даст желаемый результат. К сожалению, по моим лучшим оценкам, цепочки недостаточно, чтобы заставить макет «раскрыться» и принять правильную высоту. Единственная вещь в вашем макете, которая дает высоту макета, это ваши рисованные объекты; цепочка не приводит к тому, что раскладка раскрывается достаточно, чтобы принять указанные соотношения.

Мне неясно, является ли это поведение именно так, как ConstraintLayout работает, или это дефект. Несмотря на это, обходной путь для этого состоит в том, чтобы заставить макет открыться, чтобы позволить размеру самой цепочки и ее членов просмотреть соответственно. Чтобы принудительно открыть макет, мы определим Space представление следующим образом:

<Space
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="W,1:1.15"
    app:layout_constraintEnd_toStartOf="@id/guide25"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Вертикальная направляющая установлена ​​на 25% ширины макета, потому что каждый ImageView будет занимать 25% ширины макета. 0dp - это match_constraints. Отношение заставляет правильную высоту Space и, следовательно, высоту макета. Этот Space не виден в макете, но его достаточно, чтобы задать вертикальный размер макета.

Весь файл XML находится ниже. В цепи label_3 произошла ошибка, которая была исправлена. Я также изменил высоту всех ImageViews на 0dp, чтобы ImageViews мог принять желаемое соотношение. Я удалил выдвижные элементы, поэтому их нужно будет повторно ввести с соответствующим scaleType определенным. На снимке экрана вы видите размеры ImageViews.

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

    <Space
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintEnd_toStartOf="@id/guide25"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/label_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF00FF00"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintEnd_toStartOf="@+id/label_2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/label_2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FFFF0000"
        app:layout_constraintBaseline_toBaselineOf="@id/label_1"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintEnd_toStartOf="@+id/label_3"
        app:layout_constraintStart_toEndOf="@id/label_1" />

    <ImageView
        android:id="@+id/label_3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF0000FF"
        app:layout_constraintBaseline_toBaselineOf="@id/label_1"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintEnd_toStartOf="@id/label_4"
        app:layout_constraintStart_toEndOf="@id/label_2" />

    <ImageView
        android:id="@+id/label_4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ffea00"
        app:layout_constraintBaseline_toBaselineOf="@id/label_1"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/label_3" />

</android.support.constraint.ConstraintLayout>