原标题：Android 自定义控件 - 仿支付宝数字键盘

简介

在一些带有支付功能的 App 中，输入的密码一般只能是纯数字，虽然我们可以指定 EditText 输入框只能输入数字，但是为了提供用户的使用体验，我们往往更倾向于使用自定义的纯数字键盘。

本文效果：

实现步骤：

集成系统的 KeyBoardView 类，在初始化时初始化键盘布局，设置 KeyBoard 对象。

实现 OnKeyboardActionListener 接口，处理按键交互事件。

根据需求绘制按键背景和按键图标。

设置监听器，将输入的内容回调给调用方。

键盘布局

在 res/xml/ 目录下创建 xml 文件：key_password_number.xml

android:horizontalGap="1dp"

android:keyHeight="9%p"

android:keyWidth="33.3333%p"

android:verticalGap="1dp">

android:codes="49"

android:keyLabel="1"/>

android:codes="50"

android:keyLabel="2"/>

android:codes="51"

android:keyLabel="3"/>

android:codes="52"

android:keyLabel="4"/>

android:codes="53"

android:keyLabel="5"/>

android:codes="54"

android:keyLabel="6"/>

android:codes="55"

android:keyLabel="7"/>

android:codes="56"

android:keyLabel="8"/>

android:codes="57"

android:keyLabel="9"/>

android:codes="-10"

android:keyLabel=""/>

android:codes="48"

android:keyLabel="0"/>

android:codes="-5"

android:keyLabel=""/>

继承 KeyBoardView

publicclassPwdKeyboardViewextendsKeyboardViewimplementsKeyboardView.OnKeyboardActionListener{

privatestaticfinalString TAG = "PwdKeyboardView";

privatestaticfinalintKEY_EMPTY = - 10;

privateintdelKeyBackgroundColor = 0xffcccccc;

privateRect keyIconRect;

publicPwdKeyboardView(Context context, AttributeSet attrs){

super(context, attrs);

Log.d(TAG, "PwdKeyboardView: two params");

init(context);

}

publicPwdKeyboardView(Context context, AttributeSet attrs, intdefStyleAttr){

super(context, attrs, defStyleAttr);

Log.d(TAG, "PwdKeyboardView: three params");

init(context);

}

privatevoidinit(Context context){

Keyboard keyboard = newKeyboard(context, R.xml.key_password_number); // 初始化 keyboard

setKeyboard(keyboard);

setEnabled( true);

setFocusable( true);

setPreviewEnabled( false); // 设置点击按键不显示预览气泡

setOnKeyboardActionListener( this);

}

/**

* 重新绘制删除按键和空白键

*

* @paramcanvas

*/

@Override

publicvoidonDraw(Canvas canvas){

super.onDraw(canvas);

List keys = getKeyboard().getKeys();

for(Keyboard.Key key : keys) {

if(key.codes[ 0] == KEY_EMPTY) {

// 绘制空白键背景

drawKeyBackground(key, canvas, delKeyBackgroundColor);

}

if(key.codes[ 0] == Keyboard.KEYCODE_DELETE) {

// 删除删除按键背景

drawKeyBackground(key, canvas, delKeyBackgroundColor);

// 绘制删除按键图标

drawKeyIcon(key, canvas, getResources().getDrawable(R.drawable.ic_delete));

}

}

}

/**

* 绘制按键的背景

*

* @paramkey

* @paramcanvas

* @paramcolor

*/

privatevoiddrawKeyBackground(Keyboard.Key key, Canvas canvas, intcolor){

ColorDrawable drawable = newColorDrawable(color);

drawable.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);

drawable.draw(canvas);

}

/**

* 绘制按键的 icon

*

* @paramkey

* @paramcanvas

* @paramiconDrawable

*/

privatevoiddrawKeyIcon(Keyboard.Key key, Canvas canvas, Drawable iconDrawable){

if(iconDrawable == null) {

return;

}

// 计算按键icon 的rect 范围

if(keyIconRect == null|| keyIconRect.isEmpty()) {

// 得到 keyicon 的显示大小，因为图片放在不同的drawable-dpi目录下，显示大小也不一样

intintrinsicWidth = iconDrawable.getIntrinsicWidth();

intintrinsicHeight = iconDrawable.getIntrinsicHeight();

intdrawWidth = intrinsicWidth;

intdrawHeight = intrinsicHeight;

// 限制图片的大小，防止图片按键范围

if(drawWidth > key.width) {

drawWidth = key.width;

// 此时高就按照比例缩放

drawHeight = ( int) (drawWidth * 1.0f/ intrinsicWidth * intrinsicHeight);

} elseif(drawHeight > key.height) {

drawHeight = key.height;

drawWidth = ( int) (drawHeight * 1.0f/ intrinsicHeight * intrinsicWidth);

}

// 获取图片的 x,y 坐标,图片在按键的正中间

intleft = key.x + key.width / 2- drawWidth / 2;

inttop = key.y + key.height / 2- drawHeight / 2;

keyIconRect = newRect(left, top, left + drawWidth, top + drawHeight);

}

if(keyIconRect != null&& !keyIconRect.isEmpty()) {

iconDrawable.setBounds(keyIconRect);

iconDrawable.draw(canvas);

}

}

@Override

publicvoidonPress(intprimaryCode){

}

@Override

publicvoidonRelease(intprimaryCode){

}

/**

* 处理按键的点击事件

*/

@Override

publicvoidonKey(intprimaryCode, int[] keyCodes){

Log.d(TAG, "onKey: primaryCode = "+ primaryCode + ", keyCodes = "+ Arrays.toString(keyCodes));

if(primaryCode == KEY_EMPTY) {

return;

}

if(listener != null) {

if(primaryCode == Keyboard.KEYCODE_DELETE) {

listener.onDelete();

} else{

listener.onInput(String.valueOf(( char) primaryCode));

}

}

}

@Override

publicvoidonText(CharSequence charSequence){

}

@Override

publicvoidswipeLeft(){

}

@Override

publicvoidswipeRight(){

}

@Override

publicvoidswipeDown(){

}

@Override

publicvoidswipeUp(){

}

publicinterfaceOnKeyListener{

// 输入回调

voidonInput(String text);

// 删除回调

voidonDelete();

}

privateOnKeyListener listener;

publicvoidsetOnKeyListener(OnKeyListener listener){

this.listener = listener;

}

}

使用 PwdKeyboardView

android:id= "@+id/key_board"

android:layout_width= "match_parent"

android:layout_height= "wrap_content"

android:background= "#919191"

android:keepScreenOn= "true"

android:keyBackground= "@drawable/selector_key_board"

android:keyTextColor= "@android:color/black"

android:keyTextSize= "26sp"

android:shadowRadius= "0"/>

显示结果为：

完整代码：https://github.com/xing16/PwdKeyboardView返回搜狐，查看更多

责任编辑：