Question

我正在为Android应用程序设计constraint layout，并且希望布局看起来像这样：

layout

问题在于，只要我constraint图像视图的高度，它们就会缩小，直到没有剩余的东西为止。我希望图像视图的高度至少与其包围的text views一样高，再加上一点填充。如何在不为图像视图指定绝对高度的情况下做到这一点？

这是我的XML代码：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryLightBlue">

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageView12"
        android:layout_width="0dp"
        android:layout_height="125dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView13"
        app:srcCompat="@drawable/button_round_bg_off" />

    <ImageView
        android:id="@+id/imageView14"
        android:layout_width="0dp"
        android:layout_height="125dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView12"
        app:srcCompat="@drawable/button_round_bg_off" />

    <ImageView
        android:id="@+id/imageView13"
        android:layout_width="0dp"
        android:layout_height="125dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/button_round_bg_off" />

    <TextView
        android:id="@+id/textView15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="@+id/imageView14"
        app:layout_constraintEnd_toEndOf="@+id/imageView14"
        app:layout_constraintStart_toStartOf="@+id/imageView14"
        app:layout_constraintTop_toTopOf="@+id/imageView14" />

    <TextView
        android:id="@+id/textView17"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="@+id/imageView12"
        app:layout_constraintEnd_toEndOf="@+id/imageView12"
        app:layout_constraintStart_toStartOf="@+id/imageView12"
        app:layout_constraintTop_toTopOf="@+id/imageView12" />

    <TextView
        android:id="@+id/textView16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="@+id/imageView13"
        app:layout_constraintEnd_toEndOf="@+id/imageView13"
        app:layout_constraintStart_toStartOf="@+id/imageView13"
        app:layout_constraintTop_toTopOf="@+id/imageView13" />

</android.support.constraint.ConstraintLayout>

Answer 1

<?xml version="1.0" encoding="utf-8"?>

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_bright">

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

        <ImageView
            android:id="@+id/imageView12"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:contentDescription="Image description."
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView13"
            app:layout_constraintBottom_toTopOf="@id/imageView14" />

        <ImageView
            android:id="@+id/imageView14"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:contentDescription="Image description."
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView12"
            app:layout_constraintBottom_toBottomOf="parent"
            app:srcCompat="@android:drawable/alert_dark_frame" />

        <ImageView
            android:id="@+id/imageView13"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:contentDescription="Image description."
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/imageView12"
            app:srcCompat="@android:drawable/alert_dark_frame" />

        <TextView
            android:id="@+id/textView15"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:padding="15dp"
            android:text="TextView"
            android:textColor="@android:color/white"
            app:layout_constraintBottom_toBottomOf="@+id/imageView14"
            app:layout_constraintEnd_toEndOf="@+id/imageView14"
            app:layout_constraintStart_toStartOf="@+id/imageView14"
            app:layout_constraintTop_toTopOf="@+id/imageView14" />

        <TextView
            android:id="@+id/textView17"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:padding="15dp"
            android:text="TextView"
            android:textColor="@android:color/white"
            app:layout_constraintBottom_toBottomOf="@+id/imageView12"
            app:layout_constraintEnd_toEndOf="@+id/imageView12"
            app:layout_constraintStart_toStartOf="@+id/imageView12"
            app:layout_constraintTop_toTopOf="@+id/imageView12" />

        <TextView
            android:id="@+id/textView16"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:padding="15dp"
            android:text="TextView"
            android:textColor="@android:color/white"
            app:layout_constraintBottom_toBottomOf="@+id/imageView13"
            app:layout_constraintEnd_toEndOf="@+id/imageView13"
            app:layout_constraintStart_toStartOf="@+id/imageView13"
            app:layout_constraintTop_toTopOf="@+id/imageView13" />

    </android.support.constraint.ConstraintLayout>

</ScrollView>

使用上面的代码并保存“图像描述”。您可能会注意到，在images.xml文件中，imageView12没有app：srcCompat属性，在其中您指定了可绘制对象，但是三个图像视图在其所占据的空间方面仍具有相同的分布。另外，我给所有可以根据需要管理的三个文本视图填充了“ 15dp”。希望对您有帮助。

Answer 2

ConstraintLayout中有一个神奇的属性。

app:layout_constraintHeight_min="wrap"

我认为您的约束已经逆转。 ImageView应该约束到TextView。

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2222">

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/textView16"
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:text="TextView"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/imageView13"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/imageView13"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:padding="2dp"
            app:layout_constraintBottom_toBottomOf="@+id/textView16"
            app:layout_constraintEnd_toStartOf="@+id/textView16"
            app:layout_constraintHeight_min="wrap"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/textView16"
            app:srcCompat="@drawable/ic_message_check" />

    </android.support.constraint.ConstraintLayout>
</ScrollView>

这将不允许ImageView的高度低于“ wrap_content”值。但是，如果选择此选项，则必须确保TextView的高度至少为ImageView的“环绕”高度。

但这应该是唯一的警告。 ImageView将根据TextView的高度（以及宽度的环绕）自动调整大小

如何防止imageView缩小到超出约束布局中包含项的大小？

2 个答案: