Android自定义键盘如何显示按键旁popupCharacters小字字符

原生KeyboardView默认不会自动渲染popupCharacters对应的角标小字提示，按以下步骤修改即可实现目标效果：

1. 给按键配置popupCharacters属性 #

打开keysLayout.xml，为所有需要显示角标提示的按键添加android:popupCharacters属性，属性值为长按该键弹出的候选字符序列，序列的第一个字符会作为角标小字显示。示例配置：

<Row>
    <!-- q键长按首选项为1，右上角显示小字1 -->
    <Key android:codes="113" android:keyLabel="q" android:popupCharacters="1" android:keyEdgeFlags="left"/>
    <!-- w键长按首选项为2，右上角显示小字2 -->
    <Key android:codes="119" android:keyLabel="w" android:popupCharacters="2"/>
    <Key android:codes="101" android:keyLabel="e" android:popupCharacters="3"/>
    <!-- 其余字母、数字键按相同规则配置对应popupCharacters即可 -->
</Row>

配置该属性后，原生KeyboardView自带的长按弹出候选选择功能会自动生效，无需额外编写长按交互逻辑。

2. 自定义KeyboardView重写绘制逻辑 #

新建自定义View继承KeyboardView，在原生绘制逻辑执行完成后，遍历所有按键，将每个按键popupCharacters的首字符绘制在按键右上角作为提示小字：

public class CustomKeyboardView extends KeyboardView {
    private Paint hintTextPaint;

    public CustomKeyboardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint(context);
    }

    public CustomKeyboardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint(context);
    }

    private void initPaint(Context context) {
        hintTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        // 设置小字号，和主字符形成层级差
        hintTextPaint.setTextSize(TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP, 12,
                context.getResources().getDisplayMetrics()
        ));
        // 浅灰色，和主字符做视觉区分
        hintTextPaint.setColor(Color.GRAY);
        // 右对齐，固定绘制在按键右上角区域
        hintTextPaint.setTextAlign(Paint.Align.RIGHT);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        List<Keyboard.Key> allKeys = getKeyboard().getKeys();
        for (Keyboard.Key key : allKeys) {
            // 跳过无popup字符、图标功能键（删除、切换输入法、回车、空格等）、无主标签的按键
            if (TextUtils.isEmpty(key.popupCharacters)
                    || key.icon != null
                    || TextUtils.isEmpty(key.label)) {
                continue;
            }
            // 取popup字符序列第一个值作为角标
            String hint = String.valueOf(key.popupCharacters.charAt(0));
            // 计算绘制坐标，可根据自己的UI设计调整偏移数值
            float drawX = key.x + key.width - TypedValue.applyDimension(
                    TypedValue.COMPLEX_UNIT_DIP, 8,
                    getResources().getDisplayMetrics()
            );
            float drawY = key.y + TypedValue.applyDimension(
                    TypedValue.COMPLEX_UNIT_DIP, 16,
                    getResources().getDisplayMetrics()
            );
            canvas.drawText(hint, drawX, drawY, hintTextPaint);
        }
    }
}

可根据自己的键盘UI风格，自由调整小字的字号、颜色、位置偏移量。

3. 替换布局文件中的原生KeyboardView #

修改keyboardView.xml，将根标签的原生KeyboardView替换为上面实现的自定义CustomKeyboardView，其余原有属性保持不变：

<?xml version="1.0" encoding="utf-8"?>
<!-- 替换为自定义View的全类名，com.your.package替换为你自己的项目包名 -->
<com.your.package.CustomKeyboardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/keyboard_view"
    android:keyPreviewLayout="@layout/keyboard_preview"
    android:layout_alignParentBottom="true"
    android:keyBackground="@color/bbb"
    android:background="#bbb"
    android:keyPreviewOffset="50dp">

</com.your.package.CustomKeyboardView>

编译运行后即可实现参考图中的效果：主字符旁显示小字提示，长按按键弹出对应候选字符选择面板。

注：如果需要调整长按候选的顺序，直接修改popupCharacters内的字符排列顺序即可，角标提示会自动同步取第一个字符显示。

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