Android 仿微信支付密碼輸入框

本文轉載自：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);
	}

	@Override
	protected 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);
		}
	}

	@Override
	protected 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;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mPetPwd = (PwdEditText) findViewById(R.id.pet_pwd);
		mPetPwd.setOnInputFinishListener(new OnInputFinishListener() {

			@Override
			public 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>

效果圖