如何在 ConstraintLayout 中使 TextView 之间的间距均匀？
How to get even spacing between TextView in ConstraintLayout?
我在这里遇到了这个问题，如果我像这样使用嵌套线性布局，这个问题很容易解决：
<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>
如果您将 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>
我发布此答案的信息将有助于将来参考
我认为这是 ConstarintLayout 数据处理的 wrap_content 问题，现在可以通过新的 ConstraintLayout[=42 轻松实现=] 版本现在处于 beta
它引入了新功能 通过使用这个我们可以解决这个wrap_content问题，@kazhiu 的回答也可以解决这里因为 ImageView 的固定高度，如果 ImageView 有 wrap_content 或动态高度，它将不起作用，所以在这种情况下 constraint.Barrier 很有用。
对于设置赌注 ContraintLayout，我们必须执行以下操作
在项目gradle文件中添加maven支持如下
allprojects {
repositories {
maven { url 'https://maven.google.com' }
jcenter()
}
}
然后在app gardle dependencies中添加ConstarintLayout库依赖
compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1'
这是使用 constraint.Barrier
的@kazhiu 的相同代码
<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 来创建水平屏障
我在这里遇到了这个问题，如果我像这样使用嵌套线性布局，这个问题很容易解决：
<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>
如果您将 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>
我发布此答案的信息将有助于将来参考 我认为这是 ConstarintLayout 数据处理的 wrap_content 问题，现在可以通过新的 ConstraintLayout[=42 轻松实现=] 版本现在处于 beta
它引入了新功能 通过使用这个我们可以解决这个wrap_content问题，@kazhiu 的回答也可以解决这里因为 ImageView 的固定高度，如果 ImageView 有 wrap_content 或动态高度，它将不起作用，所以在这种情况下 constraint.Barrier 很有用。 对于设置赌注 ContraintLayout，我们必须执行以下操作
在项目gradle文件中添加maven支持如下
allprojects {
repositories {
maven { url 'https://maven.google.com' }
jcenter()
}
}
然后在app gardle dependencies中添加ConstarintLayout库依赖
compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1'
这是使用 constraint.Barrier
的@kazhiu 的相同代码<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 来创建水平屏障