如何根据宽度更改视图的高度？

Question

我有 ConstraintLayout，里面有 4 个 ImageView，我需要为任何 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

人们会认为将四个图像视图放置在一个链中，该链锚定到您定义的高度为 wrap_content 的 ConstraintLayout 父级的开头和结尾会产生所需的结果。不幸的是，在我的最佳估计中，链条不足以强制布局“打开”并假设正确的高度。你的布局中唯一能给出布局高度的是你的drawable；链不会导致布局打开到足以假定指定的比率。

我不清楚这种行为是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>