Android之仿微信支付密码输入框

      

              

今天在项目中遇到一个类似微信支付的密码输入框的需求，具体的实现要求如下：

下载地址在最后！

 

 

因为这样的一个控件主要实现的密码输入的功能，这大体上和Edittext相似，但不同于EditText的一点就是该控件需要显示六个密码框。对于控件在展示上不同的问题，毫无疑问，需要通过重写onDraw方法来实现。

 

具体代码如下：

 

[java] view plain copy  print?

1. package com.example.pwdeditttextdemo;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.graphics.Color;  
6. import android.graphics.Paint;  
7. import android.graphics.Rect;  
8. import android.util.AttributeSet;  
9. import android.widget.EditText;  
10.   
11. /** 
12.  *  
13.  * 自定义密码输入框 
14.  *  
15.  * @author zhangke 
16.  *  
17.  */  
18. public class PwdEditText extends EditText {  
19.   
20.     /** 
21.      * 间隔 
22.      */  
23.     private final int PWD_SPACING = 5;  
24.     /** 
25.      * 密码大小 
26.      */  
27.     private final int PWD_SIZE = 5;  
28.     /** 
29.      * 密码长度 
30.      */  
31.     private final int PWD_LENGTH = 6;  
32.     /** 
33.      * 上下文 
34.      */  
35.     private Context mContext;  
36.     /** 
37.      * 宽度 
38.      */  
39.     private int mWidth;  
40.     /** 
41.      * 高度 
42.      */  
43.     private int mHeight;  
44.     /** 
45.      * 密码框 
46.      */  
47.     private Rect mRect;  
48.   
49.     /** 
50.      * 密码画笔 
51.      */  
52.     private Paint mPwdPaint;  
53.   
54.     /** 
55.      * 密码框画笔 
56.      */  
57.     private Paint mRectPaint;  
58.     /** 
59.      * 输入的密码长度 
60.      */  
61.     private int mInputLength;  
62.   
63.     /** 
64.      * 输入结束监听 
65.      */  
66.     private OnInputFinishListener mOnInputFinishListener;  
67.   
68.     /** 
69.      * 构造方法 
70.      *  
71.      * @param context 
72.      * @param attrs 
73.      */  
74.     public PwdEditText(Context context, AttributeSet attrs) {  
75.         super(context, attrs);  
76.   
77.         // 初始化密码画笔  
78.         mPwdPaint = new Paint();  
79.         mPwdPaint.setColor(Color.BLACK);  
80.         mPwdPaint.setStyle(Paint.Style.FILL);  
81.         mPwdPaint.setAntiAlias(true);  
82.         // 初始化密码框  
83.         mRectPaint = new Paint();  
84.         mRectPaint.setStyle(Paint.Style.STROKE);  
85.         mRectPaint.setColor(Color.LTGRAY);  
86.         mRectPaint.setAntiAlias(true);  
87.     }  
88.   
89.     @Override  
90.     protected void onDraw(Canvas canvas) {  
91.         super.onDraw(canvas);  
92.         mWidth = getWidth();  
93.         mHeight = getHeight();  
94.   
95.         // 这三行代码非常关键，大家可以注释点在看看效果  
96.         Paint paint = new Paint();  
97.         paint.setColor(Color.WHITE);  
98.         canvas.drawRect(0, 0, mWidth, mHeight, paint);  
99.   
100.         // 计算每个密码框宽度  
101.         int rectWidth = (mWidth - PWD_SPACING * (PWD_LENGTH - 1)) / PWD_LENGTH;  
102.         // 绘制密码框  
103.         for (int i = 0; i < PWD_LENGTH; i++) {  
104.             int left = (rectWidth + PWD_SPACING) * i;  
105.             int top = 2;  
106.             int right = left + rectWidth;  
107.             int bottom = mHeight - top;  
108.             mRect = new Rect(left, top, right, bottom);  
109.             canvas.drawRect(mRect, mRectPaint);  
110.         }  
111.   
112.         // 绘制密码  
113.         for (int i = 0; i < mInputLength; i++) {  
114.             int cx = rectWidth / 2 + (rectWidth + PWD_SPACING) * i;  
115.             int cy = mHeight / 2;  
116.             canvas.drawCircle(cx, cy, PWD_SIZE, mPwdPaint);  
117.         }  
118.     }  
119.   
120.     @Override  
121.     protected void onTextChanged(CharSequence text, int start,  
122.             int lengthBefore, int lengthAfter) {  
123.         super.onTextChanged(text, start, lengthBefore, lengthAfter);  
124.         this.mInputLength = text.toString().length();  
125.         invalidate();  
126.         if (mInputLength == PWD_LENGTH && mOnInputFinishListener != null) {  
127.             mOnInputFinishListener.onInputFinish(text.toString());  
128.         }  
129.     }  
130.   
131.     public interface OnInputFinishListener {  
132.         /** 
133.          * 密码输入结束监听 
134.          *  
135.          * @param password 
136.          */  
137.         void onInputFinish(String password);  
138.     }  
139.   
140.     /** 
141.      * 设置输入完成监听 
142.      *  
143.      * @param onInputFinishListener 
144.      */  
145.     public void setOnInputFinishListener(  
146.             OnInputFinishListener onInputFinishListener) {  
147.         this.mOnInputFinishListener = onInputFinishListener;  
148.     }  
149.   
150. }  

 

在代码中调用：

 

 

[java] view plain copy  print?

1. public class MainActivity extends Activity {  
2.   
3.     private PwdEditText mPetPwd;  
4.   
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         super.onCreate(savedInstanceState);  
8.         setContentView(R.layout.activity_main);  
9.         mPetPwd = (PwdEditText) findViewById(R.id.pet_pwd);  
10.         mPetPwd.setOnInputFinishListener(new OnInputFinishListener() {  
11.   
12.             @Override  
13.             public void onInputFinish(String password) {  
14.   
15.                 Toast.makeText(MainActivity.this, password, 1).show();  
16.             }  
17.         });  
18.     }  
19.   
20. }  

布局文件：

 

 

[html] view plain copy  print?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:gravity="center"  
6.     android:orientation="vertical" >  
7.   
8.     <com.example.pwdeditttextdemo.PwdEditText  
9.         android:id="@+id/pet_pwd"  
10.         android:layout_width="200dp"  
11.         android:layout_height="50dp"  
12.         android:background="@android:color/transparent"  
13.         android:cursorVisible="false"  
14.         android:enabled="true"  
15.         android:focusable="true"  
16.         android:maxLength="6" />  
17.   
18. </LinearLayout>  

效果图

 

 

下载地址：  http://download.csdn.net/detail/shenggaofei/9622073

感兴趣的可以打赏一下：