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

How to change the height of the view based on width?

我有 ConstraintLayout,里面有 4 个 ImageView,我需要像 LinearLayout 一样放置任何 ImageView 权重,并根据宽度更改视图的高度。

这是我需要的:

正如你在这里看到的,我有 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

如何获得与我所附示例相同的结果?

人们会认为将四个图像视图放置在一个链中,锚定到 ConstraintLayout 父级的开始和结束,高度为您定义的 wrap_content 会产生所需的结果。不幸的是,根据我的最佳估计,链条不足以强制布局为 "open up" 并假定正确的高度。布局中唯一提供布局高度的是可绘制对象;链条不会导致布局打开到足以采用指定的比率。

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