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

91
11

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

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

enter image description here

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

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

enter image description here

Это макет:

    <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

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

спросил(а) 2018-05-07T12:46:00+03:00 2 года, 5 месяцев назад
1
Решение
58

Можно было бы подумать, что размещение четырех изображений в цепочке, привязанной к началу и концу родителя 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.

enter image description here

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

ответил(а) 2018-05-07T18:10:00+03:00 2 года, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема