Android布局XML问题：如何让验证图标紧邻名称文本并适配宽度

我想把验证对勾图标嵌入名称文本区域内，但目前图标始终显示在文本外部，且名称文本过长时图标会消失。需求是让验证图标紧邻名称文本，同时名称TextView的宽度设为match_parent。

当前布局代码：

<TextView
    android:id="@+id/name"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="16dp"
    android:fontFamily="sans-serif-black"
    android:text="Hiddy"
    android:textColor="?attr/textcolor"
    android:textSize="20sp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/circleImageView"
    tools:ignore="HardcodedText" />

<ImageView
    android:id="@+id/verified"
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:layout_marginStart="8dp"
    android:src="@drawable/ic_verify"
    android:visibility="gone"
    app:layout_constraintBottom_toBottomOf="@+id/name"
    app:layout_constraintStart_toEndOf="@+id/name"
    app:layout_constraintTop_toTopOf="@+id/name"
    android:contentDescription="TODO"
    tools:ignore="ContentDescription,HardcodedText" />

<TextView
    android:id="@+id/username"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="3dp"
    android:layout_marginEnd="16dp"
    android:fontFamily="sans-serif-black"
    android:text="hiddy"
    android:textColor="?attr/texttwocolor"
    android:textSize="18sp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/name"
    tools:ignore="HardcodedText" />

方法一：使用SpannableString + ImageSpan（推荐） #

该方法让图标真正融入文本流，文本过长时图标会跟随文本保持在末尾，完全适配match_parent的宽度要求。

1. 移除布局中的独立ImageView，仅保留名称TextView。
2. 在代码中为TextView设置带图标的文本：

val nameTextView = findViewById<TextView>(R.id.name)
val iconDrawable = resources.getDrawable(R.drawable.ic_verify, theme)
// 调整图标尺寸并对齐文本基线
iconDrawable.setBounds(0, 0, 20.dpToPx(), 20.dpToPx())
val spannableText = SpannableString("${nameTextView.text}  ")
spannableText.setSpan(
    ImageSpan(iconDrawable, ImageSpan.ALIGN_BASELINE),
    spannableText.length - 1,
    spannableText.length,
    Spannable.SPAN_INCLUSIVE_EXCLUSIVE
)
nameTextView.text = spannableText

需要添加dp转px的扩展函数：

fun Int.dpToPx(): Int {
    return (this * Resources.getSystem().displayMetrics.density).toInt()
}

方法二：使用TextView的drawableEnd属性 #

利用TextView自带的CompoundDrawable功能，直接将图标绑定在文本末尾，无需额外控件。

修改名称TextView的布局代码：

<TextView
    android:id="@+id/name"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="16dp"
    android:fontFamily="sans-serif-black"
    android:text="Hiddy"
    android:textColor="?attr/textcolor"
    android:textSize="20sp"
    android:drawableEnd="@drawable/ic_verify"
    android:drawablePadding="8dp" <!-- 图标与文本的间距，替代原ImageView的marginStart -->
    android:drawableTint="?attr/textcolor" <!-- 可选，让图标颜色与文本一致 -->
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/circleImageView"
    tools:ignore="HardcodedText" />

在代码中控制图标显示/隐藏：

// 显示图标
nameTextView.setCompoundDrawablesWithIntrinsicBounds(null, null, resources.getDrawable(R.drawable.ic_verify, theme), null)
// 隐藏图标
nameTextView.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null)

原方案失效原因 #

原布局中TextView设为match_parent会占满父布局可用宽度，导致右侧的ImageView被挤出屏幕可视区域，文本过长时自然无法显示图标。上述两种方法均能避免此问题，同时满足宽度要求。

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