如何设置ClickableSpan点击后变色并保持，及TextView单单词互斥高亮？

API 探路者

2026-5-21

问题1：ClickableSpan点击后变色并保持，直到点击其他区域

我来给你一步步拆解这个需求，核心是要维护选中状态的唯一性，同时处理好Span的样式更新和TextView的重绘逻辑：

自定义带选中状态的ClickableSpan
先创建一个继承自ClickableSpan的类，添加状态字段来标记是否被选中，再根据状态修改文本颜色：

public class SelectableClickableSpan extends ClickableSpan {
    private boolean isSelected;
    private final int normalColor;
    private final int selectedColor;

    public SelectableClickableSpan(int normalColor, int selectedColor) {
        this.normalColor = normalColor;
        this.selectedColor = selectedColor;
    }

    public void setSelected(boolean selected) {
        isSelected = selected;
    }

    @Override
    public void updateDrawState(TextPaint ds) {
        super.updateDrawState(ds);
        ds.setColor(isSelected ? selectedColor : normalColor);
        ds.setUnderlineText(false); // 可选，去掉默认下划线
    }

    @Override
    public void onClick(View widget) {
        TextView textView = (TextView) widget;
        CharSequence text = textView.getText();
        if (text instanceof Spannable) {
            Spannable spannable = (Spannable) text;
            // 先重置所有已选中的Span
            SelectableClickableSpan[] spans = spannable.getSpans(0, text.length(), SelectableClickableSpan.class);
            for (SelectableClickableSpan span : spans) {
                span.setSelected(false);
            }
            // 标记当前Span为选中状态
            this.setSelected(true);
            // 通知TextView重绘更新样式
            textView.postInvalidate();
        }
    }
}

处理外部点击的重置逻辑
给TextView添加触摸监听，当点击位置不在任何Span上时，清空所有选中状态：

textView.setOnTouchListener((v, event) -> {
    if (event.getAction() == MotionEvent.ACTION_UP) {
        TextView tv = (TextView) v;
        CharSequence text = tv.getText();
        if (text instanceof Spannable) {
            Spannable spannable = (Spannable) text;
            // 计算点击的文本偏移量
            int x = (int) event.getX() - tv.getTotalPaddingLeft() + tv.getScrollX();
            int y = (int) event.getY() - tv.getTotalPaddingTop() + tv.getScrollY();
            Layout layout = tv.getLayout();
            int line = layout.getLineForVertical(y);
            int offset = layout.getOffsetForHorizontal(line, x);

            // 检查点击位置是否有Span
            SelectableClickableSpan[] spans = spannable.getSpans(offset, offset, SelectableClickableSpan.class);
            if (spans.length == 0) {
                // 点击外部，重置所有选中状态
                SelectableClickableSpan[] allSpans = spannable.getSpans(0, text.length(), SelectableClickableSpan.class);
                for (SelectableClickableSpan span : allSpans) {
                    span.setSelected(false);
                }
                tv.postInvalidate();
            }
        }
    }
    // 让LinkMovementMethod继续处理Span点击事件
    return false;
});

开启Span点击支持
最后别忘了给TextView设置MovementMethod，否则ClickableSpan不会响应点击：
```
textView.setMovementMethod(LinkMovementMethod.getInstance());
```

问题2：选中单词背景变灰色，最多一个高亮，点击别处恢复

这个需求和问题1逻辑类似，只是把文本颜色改成背景高亮，核心还是确保同一时间只有一个Span处于高亮状态，我给你一个完整的解决方案，解决你之前扩展MovementMethod的问题：

步骤1：自定义带背景高亮的Span

public class HighlightWordSpan extends ClickableSpan {
    private boolean isHighlighted;
    private final int normalBgColor;
    private final int highlightBgColor;

    public HighlightWordSpan(int normalBgColor, int highlightBgColor) {
        this.normalBgColor = normalBgColor;
        this.highlightBgColor = highlightBgColor;
    }

    public void setHighlighted(boolean highlighted) {
        isHighlighted = highlighted;
    }

    @Override
    public void updateDrawState(TextPaint ds) {
        super.updateDrawState(ds);
        // 根据状态切换背景色
        ds.bgColor = isHighlighted ? highlightBgColor : normalBgColor;
        ds.setUnderlineText(false);
    }

    @Override
    public void onClick(View widget) {
        TextView textView = (TextView) widget;
        // 先清空所有高亮
        resetAllHighlights(textView);
        // 高亮当前单词
        this.setHighlighted(true);
        textView.postInvalidate();
    }

    // 重置所有Span的高亮状态
    private void resetAllHighlights(TextView textView) {
        CharSequence text = textView.getText();
        if (text instanceof Spannable) {
            Spannable spannable = (Spannable) text;
            HighlightWordSpan[] spans = spannable.getSpans(0, text.length(), HighlightWordSpan.class);
            for (HighlightWordSpan span : spans) {
                span.setHighlighted(false);
            }
        }
    }
}

步骤2：自定义MovementMethod处理外部点击

之前你扩展LinkMovementMethod可能没处理好外部点击的逻辑，这里我们统一在MovementMethod里处理所有触摸事件：

public class HighlightMovementMethod extends LinkMovementMethod {
    @Override
    public boolean onTouchEvent(TextView widget, Spannable buffer, MotionEvent event) {
        int action = event.getAction();
        if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_CANCEL) {
            // 计算点击的文本偏移量
            int x = (int) event.getX() - widget.getTotalPaddingLeft() + widget.getScrollX();
            int y = (int) event.getY() - widget.getTotalPaddingTop() + widget.getScrollY();
            Layout layout = widget.getLayout();
            int line = layout.getLineForVertical(y);
            int offset = layout.getOffsetForHorizontal(line, x);

            // 检查点击位置是否有高亮Span
            HighlightWordSpan[] spans = buffer.getSpans(offset, offset, HighlightWordSpan.class);
            if (spans.length == 0) {
                // 点击外部，清空所有高亮
                HighlightWordSpan[] allSpans = buffer.getSpans(0, buffer.length(), HighlightWordSpan.class);
                for (HighlightWordSpan span : allSpans) {
                    span.setHighlighted(false);
                }
                widget.postInvalidate();
            }
        }
        // 调用父类处理Span的点击事件
        return super.onTouchEvent(widget, buffer, event);
    }

    // 单例模式避免重复创建
    private static HighlightMovementMethod instance;
    public static HighlightMovementMethod getInstance() {
        if (instance == null) {
            instance = new HighlightMovementMethod();
        }
        return instance;
    }
}

步骤3：给每个单词添加Span

假设你已经把文本分割成单词，现在给每个单词绑定高亮Span：

TextView textView = findViewById(R.id.tv_content);
String content = "Hello World This is a Test";
String[] words = content.split(" ");
SpannableStringBuilder ssb = new SpannableStringBuilder();
int start = 0;
for (String word : words) {
    ssb.append(word);
    // 给非最后一个单词添加空格
    if (!word.equals(words[words.length - 1])) {
        ssb.append(" ");
    }
    // 添加高亮Span
    HighlightWordSpan span = new HighlightWordSpan(Color.TRANSPARENT, Color.GRAY);
    ssb.setSpan(span, start, start + word.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    start += word.length() + 1; // +1是空格的长度
}
textView.setText(ssb);
// 设置自定义的MovementMethod
textView.setMovementMethod(HighlightMovementMethod.getInstance());

为什么这个方案能解决你的问题？

自定义HighlightMovementMethod统一接管了触摸事件，不管点击Span还是外部区域，都能正确触发状态更新；
HighlightWordSpan在点击时会先清空所有其他Span的高亮，确保同一时间只有一个单词处于选中状态；
每次状态变化后调用postInvalidate()，保证TextView及时重绘更新样式。

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

如何设置ClickableSpan点击后变色并保持，及TextView单单词互斥高亮？

步骤1：自定义带背景高亮的Span #

步骤2：自定义MovementMethod处理外部点击 #

步骤3：给每个单词添加Span #

为什么这个方案能解决你的问题？ #

步骤1：自定义带背景高亮的Span

步骤2：自定义MovementMethod处理外部点击

步骤3：给每个单词添加Span

为什么这个方案能解决你的问题？