如何在多行TextView最后字符后放置可点击图标（使用Data Binding）

方案1：基于Spannable的自定义可点击Span（轻量适配） #

既然你已经尝试过Spannable Strings，可通过自定义Span实现图标绘制+点击监听，完美适配多行文本末尾位置：

步骤1：实现自定义ClickableSpan #

继承ClickableSpan，重写绘制和点击逻辑，把图标绘制在文本末尾并对齐：

class EndIconClickableSpan(
    private val icon: Drawable,
    private val clickAction: () -> Unit
) : ClickableSpan() {

    init {
        // 初始化图标尺寸
        icon.setBounds(0, 0, icon.intrinsicWidth, icon.intrinsicHeight)
    }

    override fun onClick(widget: View) {
        clickAction.invoke()
    }

    override fun updateDrawState(ds: TextPaint) {
        ds.isUnderlineText = false // 移除默认下划线
    }

    override fun onDraw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
        // 垂直居中对齐文本基线
        val iconTop = y - icon.intrinsicHeight / 2 - paint.fontMetricsInt.descent / 2
        icon.setBounds(x.toInt(), iconTop, x.toInt() + icon.intrinsicWidth, iconTop + icon.intrinsicHeight)
        icon.draw(canvas)
        // 绘制原文本（若需保留最后一个单词）
        canvas.drawText(text, start, end, x, y.toFloat(), paint)
    }
}

步骤2：Data Binding绑定逻辑 #

编写Binding Adapter，自动为文本末尾添加Span：

@BindingAdapter(value = ["textWithEndIcon", "endIcon", "onIconClick"], requireAll = true)
fun TextView.bindTextWithEndIcon(text: String, icon: Drawable, onClick: () -> Unit) {
    val spannable = SpannableStringBuilder(text)
    // 定位最后一个单词的起始位置（按空格分割，复杂场景可优化文本检测逻辑）
    val lastSpaceIdx = text.lastIndexOf(' ')
    val targetStart = if (lastSpaceIdx == -1) 0 else lastSpaceIdx + 1
    // 为最后一个单词绑定Span
    spannable.setSpan(
        EndIconClickableSpan(icon, onClick),
        targetStart,
        text.length,
        Spannable.SPAN_INCLUSIVE_EXCLUSIVE
    )
    this.text = spannable
    // 开启点击支持并移除高亮背景
    this.movementMethod = LinkMovementMethod.getInstance()
    this.highlightColor = Color.TRANSPARENT
}

步骤3：布局中使用 #

<TextView
    android:id="@+id/contentTv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:textWithEndIcon="@{viewModel.contentText}"
    app:endIcon="@{@drawable/ic_your_icon}"
    app:onIconClick="@{() -> viewModel.onEndIconClick()}" />

方案2：FlexboxLayout动态拼接（复杂视图适配） #

如果图标需要复杂布局（比如带文字、多状态），用FlexboxLayout自动处理换行对齐更省心：

步骤1：添加依赖 #

implementation "com.google.android:flexbox:2.0.1"

步骤2：布局编写 #

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexWrap="wrap"
    app:alignItems="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{viewModel.contentText}" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_your_icon"
        android:clickable="true"
        android:onClick="@{() -> viewModel.onEndIconClick()}" />
</com.google.android.flexbox.FlexboxLayout>

FlexboxLayout会自动把图标跟在文本后，即使文本换行也能保持正确的末尾对齐，图标作为独立View，点击逻辑无需额外处理。

注意事项 #

• Spannable方案需确保TextView设置movementMethod，否则点击事件不生效；
• 若文本包含其他可点击Span，需注意事件冲突；
• FlexboxLayout适合复杂视图场景，Spannable方案更轻量，适合简单图标需求。

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