Android自定义键盘详解、自定义输入法简介

概述

Android中有两个系统类是用来实现键盘的，分别是Keyboard和KeyboardView。

Keyboard有个内部类Key，用于记录每个键的信息，如code、width、height等。而KeyBorad则持有一个List用于存储所有Key，并对外提供接口。

KeyBoardView则是负责绘制所有Key，监听Touch事件，根据Touch处的坐标，计算出点击的是哪个Key，然后通过OnKeyboardActionListener通知调用处，点击的是哪个Key、code是多少，调用处再把该Key对应的string值设置到EidtText中。

大致流程就是这样，但是有很多细节、坑需要注意，本文的主要内容就是来分析这些细节和坑。

这两个类的源码都很短，只有1000行左右，但是这里并不准备对所有源码进行分析，为什么呢？因为这两个类里面的成员变量、方法几乎都是private的，完全无法供我们修改、自定义。所以对于自定义键盘要求很高、很炫酷的需求，还是得完全重写特定的“KeyBoradView”，KeyBorad倒是可以直接用。

自定义键盘

下面以一个最简单的例子来讲解如何使用，该注意的点就直接在代码中以注释形势给出。

1、首先在res目录下创建xml目录，在xml目录下创建qwer.xml文件，用于键盘布局，代码如下：

<?xml version="1.0" encoding="UTF-8"?><Keyboard android:keyWidth="10%p" android:keyHeight="45dp"    android:horizontalGap="3px" android:verticalGap="3px"    xmlns:android="http://schemas.android.com/apk/res/android">// KeyBoard标签下的keyWidth="10%p"表示下面的每个键宽度占parent宽度的10%，xxxGap属性是键与键之间的水平和垂直间隔    <Row>        <Key android:codes="113" android:keyEdgeFlags="left"            android:keyLabel="q" />        <Key android:codes="119" android:keyLabel="w" />        <Key android:codes="101" android:keyLabel="e" />        <Key android:codes="114" android:keyLabel="r" />        <Key android:codes="116" android:keyLabel="t" />        <Key android:codes="121" android:keyLabel="y" />        <Key android:codes="117" android:keyLabel="u" />        <Key android:codes="105" android:keyLabel="i" />        <Key android:codes="111" android:keyLabel="o" />        <Key android:codes="112" android:keyEdgeFlags="right"            android:keyLabel="p" />    </Row>// codes属性就是该Key对应的ASCII码（其实也可以不一定得是ASCII码，反正后面会在监听事件中返回给你这个codes值，你想怎么处理都行），keyLabel属性就是该Key显示在键盘上的string，还有个keyIcon属性是该Key显示在键盘上的drawable    <Row>        <Key android:horizontalGap="5%p" android:codes="97"            android:keyEdgeFlags="left" android:keyLabel="a" />        <Key android:codes="115" android:keyLabel="s" />        <Key android:codes="100" android:keyLabel="d" />        <Key android:codes="102" android:keyLabel="f" />        <Key android:codes="103" android:keyLabel="g" />        <Key android:codes="104" android:keyLabel="h" />        <Key android:codes="106" android:keyLabel="j" />        <Key android:codes="107" android:keyLabel="k" />        <Key android:codes="108" android:keyEdgeFlags="right"            android:keyLabel="l" />    </Row>// Key标签下的horizontalGap属性表示距离parent的距离    <Row>        <Key android:keyWidth="15p" android:codes="-1"            android:keyEdgeFlags="left" android:keyLabel="Shift" />        <Key android:codes="122" android:keyLabel="z" />        <Key android:codes="120" android:keyLabel="x" />        <Key android:codes="99" android:keyLabel="c" />        <Key android:codes="118" android:keyLabel="v" />        <Key android:codes="98" android:keyLabel="b" />        <Key android:codes="110" android:keyLabel="n" />        <Key android:codes="109" android:keyLabel="m" />        <Key android:keyWidth="15p" android:codes="-5"            android:keyEdgeFlags="right" android:isRepeatable="true"            android:keyLabel="Delete" />    </Row>// Key标签下的keyWidth属性会覆盖parent中赋的值，isRepeatable属性表示是长按时是否重复输入    <Row android:rowEdgeFlags="bottom">        <Key android:keyWidth="20%p" android:codes="-2"            android:keyLabel="12#" />        <Key android:keyWidth="15%p" android:codes="44"            android:keyLabel="," />        <Key android:keyWidth="30%p" android:codes="32"            android:isRepeatable="true" android:keyLabel="Space" />        <Key android:keyWidth="15%p" android:codes="46"            android:keyLabel="." />        <Key android:keyWidth="20%p" android:codes="-3"            android:keyEdgeFlags="right" android:keyLabel="完成" />    </Row></Keyboard>

2、创建自定义的MyKeyBoradView，主要用于处理逻辑，让外界使用更加方便。网上很多文章没有创建自定义View，用的XXXUtil也是一样的。个人觉得创建自定义的View封装好这些处理逻辑更好一些。

public class MyKeyBoardView extends LinearLayout {    private EditText mEditText;    public MyKeyBoardView(Context context, AttributeSet attrs) {        super(context, attrs);        init(context);    }    private void init(Context context) {        setOrientation(VERTICAL);        LayoutInflater.from(context).inflate(R.layout.lyt_keyboard, this, true);        KeyboardView kv = (KeyboardView) findViewById(R.id.kv_lyt_keyboard);        // 加载上面的qwer.xml键盘布局，new出KeyBoard对象        Keyboard kb = new Keyboard(context, R.xml.qwer);        kv.setKeyboard(kb);         kv.setEnabled(true);        // 设置是否显示预览，就是某个键时，上面弹出小框显示你按下的键，称为预览框        kv.setPreviewEnabled(true);         // 设置监听器        kv.setOnKeyboardActionListener(mListener);    }    // 设置接受字符的EditText    public void setStrReceiver(EditText et) {        mEditText = et;    }    private KeyboardView.OnKeyboardActionListener mListener = new KeyboardView.OnKeyboardActionListener() {        @Override        public void swipeUp() {        }        @Override        public void swipeRight() {        }        @Override        public void swipeLeft() {        }        @Override        public void swipeDown() {        }        @Override        public void onText(CharSequence text) {        }        @Override        public void onRelease(int primaryCode) {            // 手指离开该键（抬起手指或手指移动到其它键）时回调        }        @Override        public void onPress(int primaryCode) {            // 当某个键被按下时回调，只有press_down时会触发，长按不会多次触发        }        @Override        public void onKey(int primaryCode, int[] keyCodes) {            // 键被按下时回调，在onPress后面。如果isRepeat属性设置为true，长按时会连续回调            Editable editable = mEditText.getText();            int selectionPosition = mEditText.getSelectionStart();            if (primaryCode == Keyboard.KEYCODE_DELETE) {                // 如果按下的是delete键，就删除EditText中的str                if (editable != null && editable.length() > 0) {                    if (selectionPosition > 0) {                        editable.delete(selectionPosition - 1, selectionPosition);                    }                }            } else {                // 把该键对应的string值设置到EditText中                editable.insert(selectionPosition, Character.toString((char) primaryCode));            }            // 其实还有很多code的判断，比如“完成”键、“Shift”键等等，这里就不一一列出了            // 对于Shift键被按下，需要做两件事，一件是把键盘显示字符全部切换为大写，调用setShifted()方法就可以了；另一件是把Shift状态下接收到的正常字符（Shift、完成、Delete等除外）的code值-32再转换成相应str，插入到EidtText中        }    };}

3、自定义的MyKeyBoardView对应的layout文件，以及预览框对应的layout文件：

<?xml version="1.0" encoding="utf-8"?><merge xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical">    <android.inputmethodservice.KeyboardView        android:id="@+id/kv_lyt_keyboard"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#999"         android:focusable="true"        android:focusableInTouchMode="true"        android:keyBackground="@color/colorWhite"        android:keyTextColor="#333"        android:shadowColor="#00000000"         android:keyPreviewHeight="100dp"        android:keyPreviewLayout="@layout/lyt_preview"/>    // background是整个键盘View的背景，设置了键的xxxgap后，中间的缝隙就会是这个背景色    // keyBackground是每个键的背景    // keyTextColor是每个键中字符的textColor    // shadowColor是每个键中字符的shadow，请设置为全透明！！！    // keyPreviewHeight是预览框的高度！！！    // keyPreviewLayout是预览框对应的布局，跟布局必须是TextView！！！</merge>

lyt_preview文件代码：

<?xml version="1.0" encoding="utf-8"?><TextView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:background="@drawable/bg_preview"    android:gravity="center"    android:paddingLeft="100dp"    android:paddingRight="100dp"    android:textColor="#000"    android:textSize="30sp"    android:textStyle="bold"/>

4、然后就是最后一个步骤，Activity中调用了。Activity的布局文件就不贴出了，就是最上面一个EditText，最下面一个MyKeyBoardView。

ublic class MainActivity extends Activity {    private MyKeyBoardView mKeyView;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        EditText editText = (EditText) findViewById(R.id.et_main);        mKeyView = (MyKeyBoardView) findViewById(R.id.kv_main);        mKeyView.setStrReceiver(editText);        editText.setOnTouchListener(new View.OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEvent event) {                InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);                imm.hideSoftInputFromWindow(v.getWindowToken(), 0);                mKeyView.setVisibility(View.VISIBLE);                return true;            }        });    }}

遇到的问题

1、预览框的显示效果
为了不让文章太长，我就不列出各种可能的坑了，直接列出最正确的做法，这里就得分析下源码了。下面所有源码都是android7.0的源码，其他版本可能会有细微不同。

看KeyBoardView中的showKey(）方法：

private void showKey(final int keyIndex) {        final PopupWindow previewPopup = mPreviewPopup;        final Key[] keys = mKeys;        if (keyIndex < 0 || keyIndex >= mKeys.length) return;        Key key = keys[keyIndex];        if (key.icon != null) {            mPreviewText.setCompoundDrawables(null, null, null,                     key.iconPreview != null ? key.iconPreview : key.icon);            mPreviewText.setText(null);        } else {            mPreviewText.setCompoundDrawables(null, null, null, null);            mPreviewText.setText(getPreviewText(key));            if (key.label.length() > 1 && key.codes.length < 2) {                mPreviewText.setTextSize(TypedValue.COMPLEX_UNIT_PX, mKeyTextSize);                mPreviewText.setTypeface(Typeface.DEFAULT_BOLD);            } else {                mPreviewText.setTextSize(TypedValue.COMPLEX_UNIT_PX, mPreviewTextSizeLarge);                mPreviewText.setTypeface(Typeface.DEFAULT);            }        }        mPreviewText.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),                 MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));        // 计算预览框的宽度，由TextView和Key宽度中较大的决定        int popupWidth = Math.max(mPreviewText.getMeasuredWidth(), key.width                 + mPreviewText.getPaddingLeft() + mPreviewText.getPaddingRight());        // 确定预览框的高度。这里的mPreviewHeight是在构造方法中获取xml属性中的值，对应的属性就是keyPreviewHeight        // 是不是很坑爹，宽度在TextView中设置，高度在KeyBoardView的xml属性中设置。。。        final int popupHeight = mPreviewHeight;        LayoutParams lp = mPreviewText.getLayoutParams();        if (lp != null) {            lp.width = popupWidth;            lp.height = popupHeight;        }        // mPreviewCentered默认为false，7.0版本源码中没有地方会改变其值，所有一定会进入下面的判断        if (!mPreviewCentered) {            // 以Key的x坐标为基准，计算预览框的x坐标            // 这里注意了，如果预览TextView直接设置宽度，由于预览框和Key的左边是对齐的，如果预览框和Key的宽度不一样，显示就很丑；            // 所以正确的设置预览框宽度的方法是通过设置padding值的大小来控制预览框的宽度            mPopupPreviewX = key.x - mPreviewText.getPaddingLeft() + mPaddingLeft;            // 以Key的y坐标为基准，计算预览框的y坐标            // 这里又要注意了，mPreviewOffset是从xml属性中取的值，如果不设置该属性就会取默认值，不同android版本的默认值是不一样的。。。所以一定要设置一下这个属性            mPopupPreviewY = key.y - popupHeight + mPreviewOffset;        } else {            // TODO: Fix this if centering is brought back            mPopupPreviewX = 160 - mPreviewText.getMeasuredWidth() / 2;            mPopupPreviewY = - mPreviewText.getMeasuredHeight();        }        mHandler.removeMessages(MSG_REMOVE_PREVIEW);        getLocationInWindow(mCoordinates);        mCoordinates[0] += mMiniKeyboardOffsetX; // Offset may be zero        mCoordinates[1] += mMiniKeyboardOffsetY; // Offset may be zero        // Set the preview background state        mPreviewText.getBackground().setState(                key.popupResId != 0 ? LONG_PRESSABLE_STATE_SET : EMPTY_STATE_SET);        mPopupPreviewX += mCoordinates[0];        mPopupPreviewY += mCoordinates[1];        // If the popup cannot be shown above the key, put it on the side        getLocationOnScreen(mCoordinates);        if (mPopupPreviewY + mCoordinates[1] < 0) {            // If the key you're pressing is on the left side of the keyboard, show the popup on            // the right, offset by enough to see at least one key to the left/right.            if (key.x + key.width <= getWidth() / 2) {                mPopupPreviewX += (int) (key.width * 2.5);            } else {                mPopupPreviewX -= (int) (key.width * 2.5);            }            mPopupPreviewY += popupHeight;        }        if (previewPopup.isShowing()) {            previewPopup.update(mPopupPreviewX, mPopupPreviewY,                    popupWidth, popupHeight);        } else {            previewPopup.setWidth(popupWidth);            previewPopup.setHeight(popupHeight);            previewPopup.showAtLocation(mPopupParent, Gravity.NO_GRAVITY,                     mPopupPreviewX, mPopupPreviewY);        }        mPreviewText.setVisibility(VISIBLE);    }

2、键盘字体显示模糊
KeyBoardView会遍历所有key，然后绘制其键盘字符，下面看下绘制逻辑：

if (label != null) {    // For characters, use large font. For labels like "Done", use small font.    if (label.length() > 1 && key.codes.length < 2) {        paint.setTextSize(mLabelTextSize);        paint.setTypeface(Typeface.DEFAULT_BOLD);    } else {        paint.setTextSize(mKeyTextSize);        paint.setTypeface(Typeface.DEFAULT);    }    // Draw a drop shadow for the text    // 看到没，会在字符上面绘制一层shadow。。。所以在xml属性中一定要将该属性设置为全透明    paint.setShadowLayer(mShadowRadius, 0, 0, mShadowColor);    // Draw the text    canvas.drawText(label,(key.width - padding.left - padding.right) / 2+ padding.left,(key.height - padding.top - padding.bottom) / 2+ (paint.getTextSize() - paint.descent()) / 2 + padding.top,paint);    // Turn off drop shadow    paint.setShadowLayer(0, 0, 0, 0);} 

自定义输入法

输入法以后再写吧。。。。