如何实现带边距的Android TextView截断并适配尾部图标显示？

问题描述 #

需要实现以下布局：

• 两行文本信息，每行首列为静态标签，后接动态信息文本
• 第二行的信息文本末尾需附加一个与文本尺寸等高宽的小图标
• 信息文本过长超出屏幕时自动截断显示（末尾加“...”）

目前用android:layout_width="wrap_content"+android:maxLines="1"+android:ellipsize="end"能实现普通文本截断，但第二行的文本会占满父布局空间导致图标无法显示，仅靠硬编码maxWidth无法适配多屏幕尺寸。

解决方案 #

利用ConstraintLayout的横向链约束和**match_constraint宽度（0dp）**来实现文本和图标的自适应布局，核心修改点：

• 将第二行的信息文本宽度设为0dp，让其宽度被约束限制在标签右侧与图标左侧之间
• 给文本和图标设置横向紧凑链，确保图标始终紧贴文本末尾
• 让图标与文本垂直居中对齐，保证视觉一致性

修改后的完整代码 #

<androidx.constraintlayout.widget.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:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- Txt Label 1-->
    <TextView
        android:id="@+id/txtLabel1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Txt Label 1:"
        android:textColor="@android:color/darker_gray"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- Txt Info 1-->
    <TextView
        android:id="@+id/txtInfo1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:maxLines="1"
        android:ellipsize="end"
        android:textColor="@android:color/darker_gray"
        app:layout_constraintStart_toEndOf="@+id/txtLabel1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- Txt Label 2-->
    <TextView
        android:id="@+id/txtLabel2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Txt Label 2:"
        android:textColor="@android:color/darker_gray"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtLabel1" />

    <!-- Txt Info 2-->
    <TextView
        android:id="@+id/txtInfo2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:maxLines="1"
        android:ellipsize="end"
        android:textColor="@android:color/darker_gray"
        app:layout_constraintStart_toEndOf="@+id/txtLabel2"
        app:layout_constraintEnd_toStartOf="@+id/img1"
        app:layout_constraintTop_toTopOf="@+id/txtLabel2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0" />

    <!-- Img 1-->
    <ImageView
        android:id="@+id/img1"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginStart="8dp"
        app:layout_constraintStart_toEndOf="@+id/txtInfo2"
        app:layout_constraintTop_toTopOf="@+id/txtInfo2"
        app:layout_constraintBottom_toBottomOf="@+id/txtInfo2"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

关键修改说明 #

1. txtInfo2宽度设置：将android:layout_width改为0dp，结合app:layout_constraintStart_toEndOf和app:layout_constraintEnd_toStartOf，让文本宽度自动填充标签右侧到图标左侧的剩余空间
2. 横向链设置：通过app:layout_constraintHorizontal_chainStyle="packed"让文本和图标紧贴在一起，避免出现空隙
3. 图标垂直对齐：给img1添加app:layout_constraintTop_toTopOf和app:layout_constraintBottom_toBottomOf，使其与文本垂直居中对齐
4. 移除硬编码maxWidth：去掉android:maxWidth="240dp"，让布局自动适配不同屏幕尺寸

内容的提问来源于stack exchange，提问作者nick_j_white