ConstraintLayout 高度与 `wrap_content`

ConstraintLayout height with `wrap_content`

我有以下 xml:

<ImageView
    android:id="@+id/iv1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/gray"
    android:layout_margin="8dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/iv2"
    app:layout_constraintDimensionRatio="1:1"
    />

<ImageView
    android:id="@+id/iv2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/red"
    android:layout_margin="8dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/iv1"
    app:layout_constraintRight_toLeftOf="@id/iv3"
    app:layout_constraintDimensionRatio="1:1"
    />

<ImageView
    android:id="@+id/iv3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_margin="8dp"
    android:background="@color/yellow"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/iv2"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    />

这在布局预览中给出了以下内容:

但是,我打算 ConstraintLayout 成为 RelativeLayout 的 child,ConstraintLayout 的高度设置为 wrap_content。但是设置 wrap_content 会导致整个 ConstraintLayout 的高度缩小为 0。如何让 wrap_content 工作?

好的,首先你可能不应该将 ConstraintLayout 放在 RelativeLayout 中。

其次,如果您的 Constraintlayout 没有定义大小并且其子元素也没有定义大小,则您不能 "make wrap_content work"

要完成这项工作,您可以 A:将 Constraintlayout 的高度和宽度设置为 100dp 或 match_parent,或 B:将 Constraintlayout 的子元素的高度和宽度设置为 100dp

100dp 为例

您可以使用线性布局和权重使其兼容所有屏幕尺寸。

下面是一个这样的示例,

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:weightSum="3">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="2" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="3" />

</LinearLayout>

ConstraintLayout不能直接分屏。您必须添加指南才能为您的 ImageView 设置最大宽度。您可以获得有关 Guideline here.

的更多信息

顺便说一句,根据您在评论部分描述的需要,您可以使用 GuideLine 进行布局,如下所示:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sunriseContainerRL"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

        <!-- first box end guide-line -->
        <android.support.constraint.Guideline
            android:id="@+id/firstBoxEndGL"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.33" />

        <!-- second box end guide-line -->
        <android.support.constraint.Guideline
            android:id="@+id/secondBoxEndGL"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.66" />

        <!-- third box end guide-line -->
        <android.support.constraint.Guideline
            android:id="@+id/thirdBoxEndGL"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.99" />

        <ImageView
            android:id="@+id/iv1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="8dp"
            android:background="@color/colorTimeText"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@+id/firstBoxEndGL"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/iv2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="8dp"
            android:background="@color/colorTimeText"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@+id/secondBoxEndGL"
            app:layout_constraintLeft_toRightOf="@+id/iv1"
            app:layout_constraintRight_toLeftOf="@+id/iv3"
            app:layout_constraintStart_toEndOf="@+id/firstBoxEndGL"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/iv3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="8dp"
            android:background="@color/colorTimeText"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="@+id/thirdBoxEndGL"
            app:layout_constraintStart_toEndOf="@+id/secondBoxEndGL"
            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

</RelativeLayout>