Android自定义密码输入框——（仿支付宝等）

Android自定义密码输入框，通过自定义输入显示框和自定义输入键盘，实现支付宝等

密码输入的效果，使用者可自定义密码是否可见。代码已托管到github，有需要的话可以

去我的github下载。

话不多说，先看效果：

图左为隐藏密码的显示效果，图右为不隐藏密码的显示效果，该可见性可由自定义密码输入框控件的isHide属性来确定

  isHide="true" 表示隐藏输入的密码，isHide="false" 表示输入的密码可见。

下面就来介绍一下整个效果实现的过程：

一. 拆分控件

整个视图可分为三个子控件：

 1.标题栏

      包含一个返回按钮，和一个标题文本，就是一个简单的Button和TextView。我们可以自定义其标题和功能。不用过多介绍。

 2.自定义密码显示框

该显示框用于显示用户输入的密码，并根据用户的设置，以明文或暗文的方式演示输入的密码。为了较好的显示其输入

这里继承该控件了EditText，并为其添加了一些属性。在自定义密码显示框初始化时获取相关属性，并在onDraw方法中绘制整个

密码输入框。其中包括绘制背景、绘制分割线、绘制密码。同时，在设置密码位数的属性后，也为其添加了密码位数输入已满的

监听事件，给使用者及时提供输入反馈。

3.自定义输入键盘

支付宝密码输入时，不是调用系统的软键盘进行输入，而是通过自定义的密码键盘进行密码输入。因此在实现此效果时

就必须自定义一个密码键盘。自定义输入键盘主要包含10个数字按键和一个确定按键和删除按键。同时，也为其子控件添加了事

件监听，从而获取使用者的输入。

二.实现过程

主要介绍一下密码显示框的输入键盘的实现。

1.自定义密码显示框View

先说说自定义View的几种方式：（1）继承View重写onDraw方法，主要实现一些不规则的效果；（2）继承ViewGroup

派生新的Layout，主要实现自定义的布局；（3）继承特定的View（如EditView），一般用于扩展某种已有的View的功能；（4）

继承特定的ViewGroup，一般用于几种View组合在 一起而实现的效果。

在此控件中采用的是自定义一个类并继承自EditText，并在values文件夹下新建一个pwdwidget.xml来声明自定义View的一些属性。

1. <resources>
2. <declare-styleable name="CustomPwdWidgt">
3. <!-- 密码的个数 -->
4. <attr name="passwordNumber" format="integer"/>
5. <!-- 密码圆点的半径 -->
6. <attr name="passwordRadius" format="dimension" />
7. <!-- 分割线的大小 -->
8. <attr name="divisionLineSize" format="dimension" />
9. <!-- 是否隐藏输入的数字-->
10. <attr name="isHide" format="boolean"/>
11. .
12. .
13. .
14. </declare-styleable>
15. 
    
16. </resources>

在自定义密码显示框View初始化构造方法中获取设置的属性值，并在重写onDraw方法，绘制我们所需要的密码框效

果：

public CustomPwdWidget(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
        initAttributeSet(context, attrs); //获取属性
        // 设置输入模式是密码
        //setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);
        setInputType(EditorInfo.TYPE_CLASS_NUMBER);
        // 不显示光标
        setCursorVisible(false);
    }

@Override
    protected void onDraw(Canvas canvas) {
        int passwordWidth = getWidth() - (mPasswordNumber - 1) * mDivisionLineSize - mBgSize * 2;
        mPasswordItemWidth = passwordWidth / mPasswordNumber;   //每个密码框的宽度
        // 绘制背景
        drawBg(canvas);
        // 绘制分割线
        drawDivisionLine(canvas);
        // 绘制密码
        drawPassword(canvas);
    }

重点介绍一下绘制密码的方法，通过获取键盘输入的字符的长度，来确定绘制几个字符，并确定每个字符所在的位

置。同时，在绘制密码时，我们需要判断在使用自定义密码输入控件时设置的isHide属性，若isHide为true，则绘制圆圈表明密码

不可见；若isHide'属性为false，则绘制输入的字符表明密码可见。三个绘制方法如下：

1. /**
2. * 绘制背景
3. */
4. private void drawBg(Canvas canvas) {
5. mPaint.setColor(mBgColor);
6. // 设置画笔为空心
7. mPaint.setStyle(Paint.Style.STROKE);
8. mPaint.setStrokeWidth(mBgSize);
9. RectF rectF = new RectF(mBgSize/2, mBgSize/2, getWidth() - mBgSize/2, getHeight() - mBgSize/2);
10. // 如果没有设置圆角，就画矩形
11. if (mBgCorner == 0) {
12. canvas.drawRect(rectF, mPaint);
13. } else {
14. // 如果有设置圆角就画圆矩形
15. canvas.drawRoundRect(rectF, mBgCorner, mBgCorner, mPaint);
16. }
17. }
18. /**
19. * 绘制密码
20. */
21. private void drawPassword(Canvas canvas) {
22. int passwordLength = getText().length();
23. mPaint.setColor(mPasswordColor);
24. // 设置画笔为实心
25. mPaint.setStyle(Paint.Style.FILL);
26. String password = getText().toString();
27. for (int i = 0; i < passwordLength; i++) {
28. int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;
29. //判断是否隐藏的属性，来绘制密码
30. if(mIsHide){
31. //隐藏密码，用圆圈代替
32. canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint);
33. }else{
34. //不隐藏密码，并让数字居中显示
35. mPaint.setTextSize(getHeight()/2);
36. canvas.drawText(password.charAt(i)+"",cx, getHeight()/4 *3, mPaint);
37. }
38. }
39. }
40. /**
41. * 绘制分割线
42. */
43. private void drawDivisionLine(Canvas canvas) {
44. mPaint.setStrokeWidth(mDivisionLineSize);
45. mPaint.setColor(mDivisionLineColor);
46. for (int i = 0; i < mPasswordNumber - 1; i++) {
47. //int startX = (i + 1) * mDivisionLineSize + (i + 1) * mPasswordItemWidth + mBgSize;
48. int startX = (i)*mDivisionLineSize+(i+1)*mPasswordItemWidth+mBgSize+mDivisionLineSize/2;
49. canvas.drawLine(startX, mBgSize, startX, getHeight() - mBgSize, mPaint);
50. }
51. }

同时，给自定义密码显示框设置了回调监听事件，在添加密码时若检测到密码输入已满时，会触发该监听事件。此方

法需要通过使用者自己实现，以达到不同的监听效果。

1. public void addPassword(String number) {
2.         number = getText().toString().trim() + number;
3.         setText(number);
4.         //当输入的字符数等于或超过设置的字符输入个数时，会回调设置的监听方法
5.         if (number.length() >= mPasswordNumber) {
6.             mListener.passwordFullListener(number);
7.             return;
8.         }
9.     }

2.自定义键盘View

自定义键盘相对就比较简单，就包含了一些TextView的数组按键和ImageView的确定及删除按键。通过给View设置监听

事件，并给View中的字元素循环设置监听事件，确保每个子元素在点击时都能响应onClick事件。在onClick响应事件中，通

过判断点击的子元素是TextView还是ImageView来判断点击的是数组按键还是确定或删除按键，逻辑如下：

1. /**
2. * 只要点击了自定义的键盘，就会响应该事件，并判断点击的是点击了什么
3. * @param v
4. */
5. @Override
6. public void onClick(View v) {
7. View clickView = v;
8. if (clickView instanceof TextView) {
9. // 如果点击的是TextView
10. String number = ((TextView) clickView).getText().toString();
11. if (!TextUtils.isEmpty(number)) {
12. if (mListener != null) {
13. // 回调
14. mListener.click(number);
15. }
16. }
17. } else if (clickView instanceof ImageView) {
18. //如果点击的使ImageView，就判断是确认还是删除
19. switch (clickView.getId()){
20. case R.id.confirm:
21. //回调监听的confirm方法
22. mListener.confirm();
23. break;
24. case R.id.cancel:
25. //回调监听的cancel方法
26. mListener.cancel();
27. break;
28. }
29. }
30. }

为了让使用者能够自定义确定按钮和删除按钮的实习方法，我们为自定义键盘添加了事件监听接口，使用者在设置两个

监听事件后会回调其中的方法，此时在该方法中就可以实现自己实现的逻辑。demo里面只是简单的将输入的内容用Toast打

印出来。回调监听接口如下：

1. /**
2. * 设置键盘的点击回调监听
3. */
4. public void setOnCustomerKeyboardClickListener(CustomerKeyboardClickListener listener) {
5. this.mListener = listener;
6. }
7. /**
8. * 点击键盘的回调监听
9. */
10. public interface CustomerKeyboardClickListener {
11. public void click(String number);
12. public void confirm();
13. public void cancel();
14. }

3.使用过程（也就是最想看到的一步）

主要步骤就是实现事件监听接口，并为自定义控件添加监听事件，同时实现其回调的方法。

1. @Override
2. protected void onCreate(Bundle savedInstanceState) {
3. super.onCreate(savedInstanceState);
4. setContentView(R.layout.activity_main);
5. pwdEdit = (CustomPwdWidget) findViewById(R.id.pwdEdit);
6. keboard = (CustomKeyboard) findViewById(R.id.keyboard);
7. pwdEdit.setPasswordFullListener(this);
8. keboard.setOnCustomerKeyboardClickListener(this);
9. }
10. /**
11. * 密码输入已满回调的监听事件
12. * @param number
13. */
14. @Override
15. public void passwordFullListener(String number) {
16. mNumber = number;
17. }
18. /**
19. * 键盘的点击数字键的响应事件
20. * @param number
21. */
22. @Override
23. public void click(String number) {
24. pwdEdit.addPassword(number);
25. }
26. /**
27. * 点击确认键的回调事件
28. */
29. @Override
30. public void confirm() {
31. if(!TextUtils.isEmpty(mNumber)){
32. mNumber = mNumber.substring(0,4); //4为设置输入数字长度,截取输入的长度
33. Toast.makeText(getApplicationContext(),mNumber,Toast.LENGTH_SHORT).show();
34. }
35. }
36. /**
37. * 点击删除按键的回调事件
38. */
39. @Override
40. public void cancel() {
41. mNumber = null;
42. pwdEdit.deleteLastPassword();
43. }

三.总结

本次demo的效果参看了http://blog.csdn.net/z240336124/article/details/53739790其中实现的方法，并进行了优化及

方法的扩展。以上代码为demo中的部分源码，若要获取源码可去我的github中下载，地址：https://github.com/851151582/CustomPwdWidget。

欢迎修改及指正代码中的错误。若有什么问题，可以邮件我[e-mail]，谢谢！