【Android自定义控件】密码输入框+数字键盘的实现

因项目需要，实现了一个自定义的密输入框和自定义数字键盘，用作用户支付密码设置界面。先上效果图如下，方格样式，以及点击空白处隐藏软键盘。



控件实现清单：

1）集成于EditText的输入框控件：PasswordInputView.java

2）数字键盘工具类：NumKeyboardUtil.java

3）xml文件：number.xml

4）attrs样式

5）layout文件

具体内容：

PasswordInputView.java

import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.EditText;

import com.acoe.demo.R; // 小白注意，这里导入自己项目的R文件，根据实际情况写

public class PasswordInputView extends EditText{
private int textLength;

private int borderColor;
private float borderWidth;
private float borderRadius;

private int passwordLength;
private int passwordColor;
private float passwordWidth;
private float passwordRadius;

private Paint passwordPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Paint borderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

private final int defaultSplitLineWidth = 1;

public PasswordInputView(Context context, AttributeSet attrs) {
super(context, attrs);
final Resources res = getResources();

final int defaultBorderColor = res.getColor(R.color.line_color);
final float defaultBorderWidth = res.getDimension(R.dimen.dimen_1px);
final float defaultBorderRadius = res.getDimension(R.dimen.dimen_6);

final int defaultPasswordLength = 6;
final int defaultPasswordColor = res.getColor(R.color.normal_text_color);
final float defaultPasswordWidth = res.getDimension(R.dimen.dimen_6);
final float defaultPasswordRadius = res.getDimension(R.dimen.dimen_6);

TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.PasswordInputView, 0, 0);
try {
borderColor = a.getColor(R.styleable.PasswordInputView_borderColor, defaultBorderColor);
borderWidth = a.getDimension(R.styleable.PasswordInputView_borderWidth, defaultBorderWidth);
borderRadius = a.getDimension(R.styleable.PasswordInputView_borderRadius, defaultBorderRadius);
passwordLength = a.getInt(R.styleable.PasswordInputView_passwordLength, defaultPasswordLength);
passwordColor = a.getColor(R.styleable.PasswordInputView_passwordColor, defaultPasswordColor);
passwordWidth = a.getDimension(R.styleable.PasswordInputView_passwordWidth, defaultPasswordWidth);
passwordRadius = a.getDimension(R.styleable.PasswordInputView_passwordRadius, defaultPasswordRadius);
} finally {
a.recycle();
}

borderPaint.setStrokeWidth(borderWidth);
borderPaint.setColor(borderColor);
passwordPaint.setStrokeWidth(passwordWidth);
passwordPaint.setStyle(Paint.Style.FILL);
passwordPaint.setColor(passwordColor);

setSingleLine(true);
}

@Override
protected void onDraw(Canvas canvas) {
int width = getWidth();
int height = getHeight();

// 分割线
borderPaint.setColor(borderColor);
borderPaint.setStrokeWidth(defaultSplitLineWidth);
for (int i = 1; i < passwordLength; i++) {
float x = width * i / passwordLength;
canvas.drawLine(x, 0, x, height, borderPaint);
}

// 密码
float cx, cy = height/ 2;
float half = width / passwordLength / 2;
for(int i = 0; i < textLength; i++) {
cx = width * i / passwordLength + half;
canvas.drawCircle(cx, cy, passwordWidth, passwordPaint);
}
}

@Override
protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
super.onTextChanged(text, start, lengthBefore, lengthAfter);
this.textLength = text.toString().length();
invalidate();
}

public int getBorderColor() {
return borderColor;
}

public void setBorderColor(int borderColor) {
this.borderColor = borderColor;
borderPaint.setColor(borderColor);
invalidate();
}

public float getBorderWidth() {
return borderWidth;
}

public void setBorderWidth(float borderWidth) {
this.borderWidth = borderWidth;
borderPaint.setStrokeWidth(borderWidth);
invalidate();
}

public float getBorderRadius() {
return borderRadius;
}

public void setBorderRadius(float borderRadius) {
this.borderRadius = borderRadius;
invalidate();
}

public int getPasswordLength() {
return passwordLength;
}

public void setPasswordLength(int passwordLength) {
this.passwordLength = passwordLength;
invalidate();
}

public int getPasswordColor() {
return passwordColor;
}

public void setPasswordColor(int passwordColor) {
this.passwordColor = passwordColor;
passwordPaint.setColor(passwordColor);
invalidate();
}

public float getPasswordWidth() {
return passwordWidth;
}

public void setPasswordWidth(float passwordWidth) {
this.passwordWidth = passwordWidth;
passwordPaint.setStrokeWidth(passwordWidth);
invalidate();
}

public float getPasswordRadius() {
return passwordRadius;
}

public void setPasswordRadius(float passwordRadius) {
this.passwordRadius = passwordRadius;
invalidate();
}
}

NumKeyboardUtil

import android.app.Activity;
import android.content.Context;
import android.inputmethodservice.Keyboard;
import android.inputmethodservice.KeyboardView;
import android.inputmethodservice.KeyboardView.OnKeyboardActionListener;
import android.text.Editable;
import android.view.View;

import com.acoe.demo.R; // 小白注意，这里导入自己项目的R文件，根据实际情况写
import com.acoe.demo.widget.PasswordInputView; // 这里导入上面定义的控件

/**
* 数字软键盘工具类
*/
public class NumKeyboardUtil {
private KeyboardView keyboardView;
private Keyboard k;// 数字键盘
private PasswordInputView ed;

public NumKeyboardUtil(Activity act, Context ctx, PasswordInputView edit) {
this.ed = edit;
k = new Keyboard(ctx, R.xml.number);
keyboardView = (KeyboardView) act.findViewById(R.id.keyboard_view);
keyboardView.setKeyboard(k);
keyboardView.setEnabled(true);
keyboardView.setPreviewEnabled(true);
keyboardView.setOnKeyboardActionListener(listener);
}

private OnKeyboardActionListener listener = new 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) {
}
//一些特殊操作按键的codes是固定的比如完成、回退等
@Override
public void onKey(int primaryCode, int[] keyCodes) {
Editable editable = ed.getText();
int start = ed.getSelectionStart();
if (primaryCode == Keyboard.KEYCODE_DELETE) {// 回退
if (editable != null && editable.length() > 0) {
if (start > 0) {
editable.delete(start - 1, start);
}
}
}else if (primaryCode == Keyboard.KEYCODE_CANCEL) {// 完成
hideKeyboard();
} else { //将要输入的数字现在编辑框中
editable.insert(start, Character.toString((char) primaryCode));
}
}
};

public void showKeyboard() {
keyboardView.setVisibility(View.VISIBLE);
}

public void hideKeyboard() {
keyboardView.setVisibility(View.GONE);
}

public int getKeyboardVisible() {
return keyboardView.getVisibility();
}
}

number.xml

注意该文件需要放在项目下的res目录下的xml目录（没有就建个）里面

<?xml version="1.0" encoding="utf-8"?>
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
android:horizontalGap="0px"
android:keyHeight="42dip"
android:keyWidth="31%p"
android:verticalGap="0px" >

<Row>
<Key
android:codes="49"
android:keyLabel="1" />
<Key
android:codes="50"
android:keyLabel="2" />
<Key
android:codes="51"
android:keyLabel="3" />
</Row>

<Row>
<Key
android:codes="52"
android:keyLabel="4" />
<Key
android:codes="53"
android:keyLabel="5" />
<Key
android:codes="54"
android:keyLabel="6" />
</Row>

<Row>
<Key
android:codes="55"
android:keyLabel="7" />
<Key
android:codes="56"
android:keyLabel="8" />
<Key
android:codes="57"
android:keyLabel="9" />
</Row>

<Row>
<Key
android:codes="-3"
android:keyLabel="完成" />
<Key
android:codes="48"
android:keyLabel="0" />
<Key
android:codes="-5"
android:keyIcon="@drawable/sym_keyboard_delete" />
</Row>

</Keyboard>

attrs.xml里面的样式：

<!-- 支付密码输入框 -->
<declare-styleable name="PasswordInputView">
<attr name="borderWidth" format="dimension"/>
<attr name="borderColor" format="color"/>
<attr name="borderRadius" format="dimension"/>
<attr name="passwordLength" format="integer"/>
<attr name="passwordWidth" format="dimension"/>
<attr name="passwordColor" format="color"/>
<attr name="passwordRadius" format="dimension"/>
</declare-styleable>

布局代码：

实际使用的话，只需要将PasswordInputView和

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/main_bg_color" >

<include
android:id="@+id/title_ll"
layout="@layout/common_actionbar"/>

<TextView
android:id="@+id/trader_pwd_set_tips_textview"
style="@style/normal_text_style"
android:layout_below="@+id/title_ll"
android:layout_marginTop="25dip"
android:layout_centerHorizontal="true"
android:text="@string/trade_pwd_set_tips_text" />

<ImageView
android:id="@+id/line1_imageview"
style="@style/line_horizontal_style"
android:layout_below="@+id/trader_pwd_set_tips_textview"
android:layout_marginTop="26dip"
android:contentDescription="@string/content_description" />

<com.acoe.demo.widget.PasswordInputView
android:id="@+id/trader_pwd_set_pwd_edittext"
android:layout_width="match_parent"
android:layout_height="41dip"
android:layout_below="@+id/line1_imageview"
android:maxLength="6"
android:background="@android:color/white" />

<ImageView
android:id="@+id/line2_imageview"
style="@style/line_horizontal_style"
android:layout_below="@+id/trader_pwd_set_pwd_edittext"
android:contentDescription="@string/content_description" />

<Button
android:id="@+id/trader_pwd_set_next_button"
style="@style/main_button_style"
android:layout_below="@+id/line2_imageview"
android:layout_marginTop="25dip"
android:text="@string/trade_pwd_set_next_text" />

<android.inputmethodservice.KeyboardView
android:id="@+id/keyboard_view"
android:layout_width="match_parent"
android:layout_height="240dip"
android:layout_alignParentBottom="true"
android:paddingTop="30dip"
android:paddingLeft="13dip"
android:paddingRight="13dip"
android:focusable="true"
android:focusableInTouchMode="true"
android:visibility="invisible"/>

</RelativeLayout>

Activity代码片段：

//=======在Activity成员变量中声明部分代码=======
/** 控件 */
private PasswordInputView edtPwd;

//=======在Activity实例化控件部分代码=======
// 初始化控件
edtPwd = (PasswordInputView) findViewById(R.id.trader_pwd_set_pwd_edittext);
edtPwd.setInputType(InputType.TYPE_NULL); // 屏蔽系统软键盘
// 自定义软键盘
if (keyboardUtil == null) keyboardUtil = new NumKeyboardUtil(this, this, edtPwd);
edtPwd.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
keyboardUtil.showKeyboard();
return false;
}
});

//=======在Activity中重写onTouchEvent()方法，实现点击空白处隐藏软键盘=======
@Override
public boolean onTouchEvent(MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN){
if(getCurrentFocus()!=null && getCurrentFocus().getWindowToken()!=null){
keyboardUtil.hideKeyboard();
}
}
return super.onTouchEvent(event);
}

ps：如果把该密码输入框和其他类型输入框并用时要注意两者之间焦点变化时将系统软键盘和自定义的数字键盘隐藏，我的做法是给密码输入框绑定OnFacusChangeListener事件，来控制就好。如下：

edtPwd.setOnFocusChangeListener(new OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
// 如果系统键盘是弹出状态，先隐藏
((InputMethodManager) getSystemService(INPUT_METHOD_SERVICE))
.hideSoftInputFromWindow(getCurrentFocus()
.getWindowToken(),
InputMethodManager.HIDE_NOT_ALWAYS);
keyboardUtil.showKeyboard();
} else {
keyboardUtil.hideKeyboard();
}
}
});