android - 如何在 ConstraintLayout 中使 TextView 之间的间距均匀？

Question

我在这里遇到了这个问题，如果我像这样使用嵌套的线性布局，这个问题很容易解决:

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout android:layout_marginTop="32dp" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content">
        <ImageView/>
        <TexView/>
    </LinearLayout>

    <LinearLayout android:layout_marginTop="32dp" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content">
        <ImageView/>
        <TexView/>
    </LinearLayout>

    <LinearLayout android:layout_marginTop="32dp" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content">
        <ImageView/>
        <TexView/>
    </LinearLayout>
</LinearLayout>

但是有没有办法在约束布局中解决这个问题？图中，正方形代表一个固定大小的imageview，矩形代表一个textview，可以是1行(高度小于imageview)或多行(高度大于imageview)

我尝试用 xDp 限制每个 ImageView 的间距，如果所有 TextView 不高于 ImageView 是可以的，但如果 TextView 高于 ImageView ，它将重叠。我也尝试过从 ImageView 到 TextView 做间距，但是如果 TextView 小于 ImageView，间距又会出错。

ConstraintLayout 有办法解决这个问题吗？

这是它在编辑器中的样子

及其布局xml

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


        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_timer_black_24dp"
            app:layout_constraintEnd_toEndOf="@+id/imageView3"
            android:layout_marginTop="24dp"
            app:layout_constraintTop_toBottomOf="@+id/imageView3" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_timer_black_24dp"
            app:layout_constraintEnd_toEndOf="@+id/imageView"
            android:layout_marginTop="24dp"
            app:layout_constraintTop_toBottomOf="@+id/imageView" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_timer_black_24dp"
            tools:layout_editor_absoluteX="40dp"
            tools:layout_editor_absoluteY="32dp" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:fontFamily="@font/source_sans"
            android:text="This text is a lot longer and overlaps the one below which is bad."
            android:textColor="@color/primary_text"
            android:textSize="24sp"
            android:typeface="normal"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/imageView"
            app:layout_constraintTop_toTopOf="@+id/imageView" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:fontFamily="@font/source_sans"
            android:text="This is a normal length text and that makes it."
            android:textColor="@color/primary_text"
            android:textSize="24sp"
            android:typeface="normal"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/imageView4"
            app:layout_constraintTop_toTopOf="@+id/imageView4"
            app:layout_constraintHorizontal_bias="0.0" />

        <TextView
            android:id="@+id/textView8"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:fontFamily="@font/source_sans"
            android:text="Small Text"
            android:textColor="@color/primary_text"
            android:textSize="24sp"
            android:typeface="normal"
            app:layout_constraintTop_toTopOf="@+id/imageView3"
            app:layout_constraintStart_toEndOf="@+id/imageView3"
            android:layout_marginStart="16dp" />

    </android.support.constraint.ConstraintLayout>

Answer 1

如果您将 ImageView 中的 android:layout_width 和 android:layout_height 更改为恒定尺寸，例如48dp 而不是 wrap_content 然后在你的 TextView 添加 android:minHeight="48dp"。下面添加了一个工作示例和 xml:

<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="match_parent"
    android:layout_margin="20dp">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:srcCompat="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:minHeight="48dp"
        android:layout_marginLeft="16dp"
        android:text="Lorem ipsum"
        app:layout_constraintLeft_toRightOf="@+id/imageView"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="16dp"
        app:layout_constraintTop_toTopOf="@+id/imageView" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:srcCompat="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="16dp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:minHeight="48dp"
        android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. "
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="16dp"
        app:layout_constraintTop_toTopOf="@+id/imageView2" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:srcCompat="@mipmap/ic_launcher"
        android:layout_marginLeft="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:minHeight="48dp"
        android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. "
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="0dp"
        app:layout_constraintLeft_toRightOf="@+id/imageView4"
        android:layout_marginLeft="16dp"
        app:layout_constraintTop_toTopOf="@+id/imageView4"
        android:layout_marginTop="0dp" />

</android.support.constraint.ConstraintLayout>