如何在 ConstraintLayout 中的 TextView 之间获得均匀的间距？答案

【问题标题】：How to get even spacing between TextView in ConstraintLayout?如何在 ConstraintLayout 中的 TextView 之间获得均匀的间距？
【发布时间】：2017-06-03 16:25:43
【问题描述】：

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

<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>

【问题讨论】：

您能否包含您当前的 ConstraintLayout 以方便人们提供答案？
添加了一张图片
对不起，我的意思是你的布局代码，xml。

标签： android android-layout android-linearlayout android-constraintlayout

【解决方案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>

【讨论】：

【解决方案2】：

对于我发布的信息，此答案将对将来的参考有用我认为这是 wrap_content 数据处理的 ConstarintLayout 问题，现在这很容易从新的 ConstraintLayout 版本（现在处于 beta强>

它引入了新功能，通过使用它我们可以解决这个wrap_content问题，由于ImageView的高度固定，@kazhiu 的回答也会在这里解决问题strong> 如果 ImageView 具有 wrap_content 或动态高度，它将不起作用，因此在这种情况下 constraint.Barrier 很有用。对于设置投注 ContraintLayout，我们必须执行以下操作

在项目 gradle 文件中添加 maven 支持，如下所示

allprojects {
    repositories {
        maven { url 'https://maven.google.com' }
        jcenter()
    }
}

然后在app gardle依赖中添加ConstarintLayout库依赖

compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1'

这里是@kazhiu 使用constraint.Barrier 的相同代码

<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: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/barrierone"
        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: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/barrierone2" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        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.Barrier
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/barrierone"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:constraint_referenced_ids="imageView,textView"
        app:barrierDirection="bottom" />

    <android.support.constraint.Barrier
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/barrierone2"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:constraint_referenced_ids="imageView2,textView2"
        app:barrierDirection="bottom" />

</android.support.constraint.ConstraintLayout>

设计和蓝图

在android.support.constraint.Barrier

中

app:constraint_referenced_ids="id1,id2"

将包含在其他视图之上的 wrap_content 视图的 id，我们也可以通过将高度替换为 match_constraint(0dp) 并将宽度替换为 wrap_content 来创建水平屏障

【讨论】：

是的，您的解决方案是完美的。我的解决方案是变通方法，因为我不在商业项目中使用测试版:)
@kazhiu 我知道没有人会在现场项目中使用 Beta，我注意到它处于 beta 阶段，为了将来参考没有其他意图:)