Android 仿微信支付密码输入框

来源：互联网发布：成都数据恢复公司编辑：程序博客网时间：2024/05/21 23:00

本文转载自：http://m.blog.csdn.net/article/details?id=50374135

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

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

具体代码如下：

package com.example.pwdeditttextdemo;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.util.AttributeSet;import android.widget.EditText;/** *  * 自定义密码输入框 *  * @author zhangke *  */public class PwdEditText extends EditText {/** * 间隔 */private final int PWD_SPACING = 5;/** * 密码大小 */private final int PWD_SIZE = 5;/** * 密码长度 */private final int PWD_LENGTH = 6;/** * 上下文 */private Context mContext;/** * 宽度 */private int mWidth;/** * 高度 */private int mHeight;/** * 密码框 */private Rect mRect;/** * 密码画笔 */private Paint mPwdPaint;/** * 密码框画笔 */private Paint mRectPaint;/** * 输入的密码长度 */private int mInputLength;/** * 输入结束监听 */private OnInputFinishListener mOnInputFinishListener;/** * 构造方法 *  * @param context * @param attrs */public PwdEditText(Context context, AttributeSet attrs) {super(context, attrs);// 初始化密码画笔mPwdPaint = new Paint();mPwdPaint.setColor(Color.BLACK);mPwdPaint.setStyle(Paint.Style.FILL);mPwdPaint.setAntiAlias(true);// 初始化密码框mRectPaint = new Paint();mRectPaint.setStyle(Paint.Style.STROKE);mRectPaint.setColor(Color.LTGRAY);mRectPaint.setAntiAlias(true);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);mWidth = getWidth();mHeight = getHeight();// 这三行代码非常关键，大家可以注释点在看看效果Paint paint = new Paint();paint.setColor(Color.WHITE);canvas.drawRect(0, 0, mWidth, mHeight, paint);// 计算每个密码框宽度int rectWidth = (mWidth - PWD_SPACING * (PWD_LENGTH - 1)) / PWD_LENGTH;// 绘制密码框for (int i = 0; i < PWD_LENGTH; i++) {int left = (rectWidth + PWD_SPACING) * i;int top = 2;int right = left + rectWidth;int bottom = mHeight - top;mRect = new Rect(left, top, right, bottom);canvas.drawRect(mRect, mRectPaint);}// 绘制密码for (int i = 0; i < mInputLength; i++) {int cx = rectWidth / 2 + (rectWidth + PWD_SPACING) * i;int cy = mHeight / 2;canvas.drawCircle(cx, cy, PWD_SIZE, mPwdPaint);}}@Overrideprotected void onTextChanged(CharSequence text, int start,int lengthBefore, int lengthAfter) {super.onTextChanged(text, start, lengthBefore, lengthAfter);this.mInputLength = text.toString().length();invalidate();if (mInputLength == PWD_LENGTH && mOnInputFinishListener != null) {mOnInputFinishListener.onInputFinish(text.toString());}}public interface OnInputFinishListener {/** * 密码输入结束监听 *  * @param password */void onInputFinish(String password);}/** * 设置输入完成监听 *  * @param onInputFinishListener */public void setOnInputFinishListener(OnInputFinishListener onInputFinishListener) {this.mOnInputFinishListener = onInputFinishListener;}}

在代码中调用：

public class MainActivity extends Activity {private PwdEditText mPetPwd;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mPetPwd = (PwdEditText) findViewById(R.id.pet_pwd);mPetPwd.setOnInputFinishListener(new OnInputFinishListener() {@Overridepublic void onInputFinish(String password) {Toast.makeText(MainActivity.this, password, 1).show();}});}}

布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:orientation="vertical" >    <com.example.pwdeditttextdemo.PwdEditText        android:id="@+id/pet_pwd"        android:layout_width="200dp"        android:layout_height="50dp"        android:background="@android:color/transparent"        android:cursorVisible="false"        android:enabled="true"        android:focusable="true"        android:maxLength="6" /></LinearLayout>

效果图

0 0