Android(Java)中实现HTML <abbr>标签等效点击提示功能的方法

核心实现逻辑是用可点击文本标记识别段落中的缩写词，点击后通过弹窗组件展示全称，同时动态计算目标词汇的屏幕坐标定位弹窗，完全复刻HTML中<abbr>标签的交互效果，适配移动端点击操作。

第一步：维护缩写词映射表 #

先把所有需要识别的缩写和对应全称存在键值对中，方便后续匹配：

HashMap<String, String> abbrMap = new HashMap<>();
abbrMap.put("WHO", "World Health Organization");
abbrMap.put("HTML", "HyperText Markup Language");
// 后续新增缩写直接往map里加就行

第二步：给目标缩写词绑定点击响应 #

用ClickableSpan给文本中匹配到的缩写词单独绑定点击事件，同时可以给缩写词改个文字颜色，提示用户该内容可点击：

TextView contentTv = findViewById(R.id.content_tv);
String originText = "HTML is not a programming language. WHO is a specialized agency of the United Nations.";
SpannableString spannable = new SpannableString(originText);

// 遍历所有缩写，整词匹配文本中的对应位置
for (String abbr : abbrMap.keySet()) {
    String fullName = abbrMap.get(abbr);
    // 用整词正则匹配，避免把长单词里的片段误识别成缩写
    Pattern pattern = Pattern.compile("\\b" + abbr + "\\b");
    Matcher matcher = pattern.matcher(originText);
    while (matcher.find()) {
        int start = matcher.start();
        int end = matcher.end();
        ClickableSpan abbrSpan = new ClickableSpan() {
            @Override
            public void onClick(@NonNull View widget) {
                showAbbrTip(widget, start, end, fullName);
            }

            @Override
            public void updateDrawState(@NonNull TextPaint ds) {
                super.updateDrawState(ds);
                ds.setColor(getColor(R.color.purple_500));
                ds.setUnderlineText(false);
            }
        };
        spannable.setSpan(abbrSpan, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }
}
contentTv.setText(spannable);
// 必须设置，否则ClickableSpan不会响应点击
contentTv.setMovementMethod(LinkMovementMethod.getInstance());
// 去掉点击文本时的默认高亮背景
contentTv.setHighlightColor(Color.TRANSPARENT);

第三步：实现悬浮弹窗与位置计算 #

用原生PopupWindow做悬浮提示框，通过TextView的Layout对象拿到点击词汇的相对坐标，转换为屏幕坐标后定位弹窗，自动适配屏幕边界避免内容溢出。

先写个简单的弹窗布局res/layout/layout_abbr_tip.xml：

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tip_tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_abbr_tip"
    android:paddingHorizontal="12dp"
    android:paddingVertical="8dp"
    android:textColor="@android:color/white"
    android:textSize="14sp"
    android:maxWidth="240dp"/>

上述布局中引用的bg_abbr_tip是自定义的圆角黑色半透明shape，按自己的UI风格写即可。

然后实现弹窗显示逻辑：

private PopupWindow abbrTipPopup;
private TextView tipContentTv;

private void showAbbrTip(View anchorView, int wordStart, int wordEnd, String fullName) {
    // 先关闭之前已经显示的弹窗
    if (abbrTipPopup != null && abbrTipPopup.isShowing()) {
        abbrTipPopup.dismiss();
    }
    // 初始化弹窗，只初始化一次避免重复创建对象
    if (abbrTipPopup == null) {
        View tipView = LayoutInflater.from(this).inflate(R.layout.layout_abbr_tip, null);
        tipContentTv = tipView.findViewById(R.id.tip_tv);
        abbrTipPopup = new PopupWindow(tipView, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        abbrTipPopup.setOutsideTouchable(true);
        abbrTipPopup.setFocusable(true);
        abbrTipPopup.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
    }
    tipContentTv.setText(fullName);

    // 计算点击词汇的屏幕坐标
    TextView textView = (TextView) anchorView;
    Layout textLayout = textView.getLayout();
    int line = textLayout.getLineForOffset(wordStart);
    int[] tvLocation = new int[2];
    textView.getLocationOnScreen(tvLocation);
    float wordLeft = textLayout.getPrimaryHorizontal(wordStart);
    float wordRight = textLayout.getPrimaryHorizontal(wordEnd);
    int wordTop = textLayout.getLineTop(line);
    int wordBottom = textLayout.getLineBottom(line);

    int screenX = (int) (tvLocation[0] + wordLeft);
    int screenYTop = tvLocation[1] + wordTop;
    int screenYBottom = tvLocation[1] + wordBottom;

    // 测量弹窗宽高，用于位置校准
    abbrTipPopup.getContentView().measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
    int tipWidth = abbrTipPopup.getContentView().getMeasuredWidth();
    int tipHeight = abbrTipPopup.getContentView().getMeasuredHeight();
    int screenWidth = getResources().getDisplayMetrics().widthPixels;
    int screenHeight = getResources().getDisplayMetrics().heightPixels;

    // 水平居中对齐词汇，左右留16dp边距不超出屏幕
    int offsetX = (int) ((wordRight - wordLeft)/2 - tipWidth/2);
    int showX = Math.max(16, Math.min(screenX + offsetX, screenWidth - tipWidth - 16));
    // 默认在词汇下方显示，下方空间不足时改到上方显示
    int showY;
    if (screenYBottom + tipHeight + 16 < screenHeight) {
        showY = screenYBottom + 8;
    } else {
        showY = screenYTop - tipHeight - 8;
    }

    abbrTipPopup.showAtLocation(anchorView, Gravity.NO_GRAVITY, showX, showY);
}

可选优化点 #

• 给弹窗加淡入淡出动画：给PopupWindow设置setAnimationStyle属性，搭配简单的补间动画即可让交互更顺滑
• 长文本滚动适配：如果TextView支持滚动，添加滚动监听，滚动时主动关闭弹窗，避免弹窗错位
• 点击同个缩写切换显隐：增加变量记录上一次点击的词汇位置，本次点击位置和上次一致且弹窗正在显示时，直接关闭弹窗即可
• 大小写不敏感匹配：初始化正则Pattern时传入Pattern.CASE_INSENSITIVE参数，即可匹配不同大小写的缩写词

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