Question

考虑以下布局：

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

图像视图（或按钮，或任何其他小部件，重要的是它具有固定大小）对齐大小为wrap_content的TextView的右/末端，因此，文本本身仅占用所需的空间。

我现在想要的是，当文本扩展时（又如果它更长），按钮与父对象的右边对齐，文本视图只获得左边的宽度并被椭圆化。目前，图像视图被推到外面，文本一旦填满整个父文件就会被椭圆化。

我尝试通过在图像中添加endToEnd =“parent”约束并将水平偏差设置为0来修复此问题（请参阅代码），但这不起作用。

关于我能做什么的任何建议？

Answer 1

为了防止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>

编辑：根据评论中的要求，这里有Barrier分析3 TextViews和ImageView的方法。在这种情况下，您不必指定TextViews末尾的约束，因此您不再将它们水平链接。相反，您创建一个Barrier，其方向是end中引用的所有TextViews的{{1}}。这将确保Barrier始终位于最宽Barrier的末尾。最后要做的是将TextView的开头限制为ImageView。

示例XML：

Barrier

ConstraintLayout：文本扩展时保留在父级中的Compound ImageView

1 个答案: