考虑以下布局:
<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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text" />
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="@id/text_view"
app:layout_constraintTop_toTopOf="parent"
tools:background="@android:color/black" />
</android.support.constraint.ConstraintLayout>
ImageView (或按钮,或任何其他小部件,重要的是它具有固定大小)在大小为 wrap_content 的 TextView 的右端/末尾对齐,因此,文本本身仅占用其所需的空间。
我现在想要的是,当文本展开时(又名如果它更长),按钮与父级的右侧对齐, TextView 仅获得左侧的宽度并被椭圆化。 目前, ImageView 被推到外面,文本在填满整个父 View 后会变成椭圆形。
我试图通过为图像添加 endToEnd="parent"约束并将水平偏差设置为 0 来解决此问题(参见代码),但这不起作用。
关于我可以做什么的任何建议?
最佳答案
为了防止 ImageView
被推到父级之外,您需要将 TextView
的末尾限制在 ImageView
的开头> 创建一个链。现在要确保 TextView
只占用它需要的空间但也强制执行其约束,您需要将 app:layout_constrainedWidth="true"
属性添加到您的 TextView
.
如果您希望 ImageView
紧靠在 TextView
的右侧,可以使用 packed
链样式,水平偏移为 0
。
如果您希望 ImageView
与父级的右侧对齐,您可以使用无偏差的 spread_inside
链样式。
经过上述更改后生成的 XML 可能如下所示:
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/image_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text" />
<ImageView
android:id="@+id/image_view"
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/text_view"
app:layout_constraintTop_toTopOf="parent"
tools:background="@android:color/black" />
</android.support.constraint.ConstraintLayout>
编辑:按照评论中的要求,下面是它如何与分离 3 个 TextViews
和 ImageView 的
。在这种情况下,您没有为 Barrier
一起工作TextViews
的末端指定约束,因此您不再水平链接它们。相反,您创建一个 Barrier
,方向是 Barrier
中引用的所有 TextViews
的 end
。这将确保 Barrier
始终位于最宽的 TextView
的末尾。最后要做的是将 ImageView
的起始端限制到 Barrier
。
示例 XML:
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/text_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toTopOf="@id/text_view2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text1" />
<TextView
android:id="@+id/text_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toTopOf="@id/text_view3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/text_view1"
tools:text="Text2" />
<TextView
android:id="@+id/text_view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/text_view2"
tools:text="Text3" />
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="text_view1,text_view2,text_view3" />
<ImageView
android:id="@+id/image_view"
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/barrier"
app:layout_constraintTop_toTopOf="parent"
tools:background="@android:color/black" />
</android.support.constraint.ConstraintLayout>
关于android - 约束布局 : Compound ImageView that stays in parent when text expands,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50817286/