Android - ConstraintLayout 内的 TextView 向右无限远 - 如何使用 ImageView 固定并有省略号

Question

我正在尝试使我的TextView 具有动态宽度，并且ImageView 固定在其末尾，位于ConstraintLayout 内部。当文本很长时，我想使用省略号并将ImageView 引脚放在它右侧的视图中。

这是我试图在视觉上实现的示例：

使用我的代码，我可以使用thisIsShortText 实现第一张图片，但是当我有长文本时，它看起来不好，如下所示：

TextView 和 ImageView 向右移动到无穷大。谁能帮我解决这个问题？这是我拥有的 XML 代码。如果你只是把它放到你的 Android Studio 中，它看起来就像我的图像。谢谢：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="70dp">

    <!-- This view does not move or change size. -->
    <View
        android:id="@+id/firstView"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </View>

    <!-- This view's width is dynamic and changes size based on it's text length.
     If the length of text is too long to fit, it uses an ellipsize. -->
    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="thisIsVeryLongTextThatIsTooLongAndIsLong"
        android:textColor="@color/primary_text_dark"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/firstView"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- This view is pinned to the end of textView. -->
    <ImageView
        android:id="@+id/imageview"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginStart="8dp"
        android:background="@android:color/holo_purple"
        android:src="@android:drawable/ic_dialog_info"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/textview"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- This view does not move or change size. -->
    <View
        android:id="@+id/secondView"
        android:layout_width="80dp"
        android:layout_height="35dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/thirdView"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- This view does not move or change size. -->
    <View
        android:id="@+id/thirdView"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:background="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

您可以通过将以下内容添加到TextView 来实现：

• 启用宽度限制。
• 使用水平偏移为 0 的打包链。
• 将结束约束到右视图的开始 (imageview)

并将信息imageview 的结尾限制为secondView 的开头

因此，您需要在textview 中添加以下内容：

    app:layout_constrainedWidth="true"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintEnd_toStartOf="@id/secondView"

还有imageview：

    app:layout_constraintEnd_toStartOf="@+id/secondView"

现在整个布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="70dp">

    <!-- This view does not move or change size. -->
    <View
        android:id="@+id/firstView"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </View>

    <!-- This view's width is dynamic and changes size based on it's text length.
     If the length of text is too long to fit, it uses an ellipsize. -->
    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="thisIsVeryLongTextThatIsTooLongAndIsLong"
        android:textColor="@color/primary_text_dark"
        android:textSize="16sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/imageview"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@id/firstView"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- This view is pinned to the end of textView. -->
    <ImageView
        android:id="@+id/imageview"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:background="@android:color/holo_purple"
        android:src="@android:drawable/ic_dialog_info"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/secondView"
        app:layout_constraintStart_toEndOf="@id/textview"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- This view does not move or change size. -->
    <View
        android:id="@+id/secondView"
        android:layout_width="80dp"
        android:layout_height="35dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/thirdView"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- This view does not move or change size. -->
    <View
        android:id="@+id/thirdView"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:background="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

预览：

Answer 2

我使用了一个垂直线性布局和另一个水平线性布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="left|center">

        <View
            android:id="@+id/firstView"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:background="@android:color/holo_red_dark">

        </View>

        <TextView
            android:id="@+id/textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="thisIsVeryLongTextThatIsTooLongAndIsLong"
            android:textSize="16sp"
            android:layout_weight="1.0"/>

        <ImageView
            android:id="@+id/imageview"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginStart="8dp"
            android:background="@android:color/holo_purple"
            android:src="@android:drawable/ic_dialog_info"/>
        
        <View
            android:id="@+id/secondView"
            android:layout_width="80dp"
            android:layout_height="35dp"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:background="@android:color/holo_blue_light" />

        <!-- This view does not move or change size. -->
        <View
            android:id="@+id/thirdView"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:background="@android:color/holo_orange_dark" />

    </LinearLayout>

</LinearLayout>