Android四方形輸入框、密碼框

一、自定義view繼承EditText，程式碼中控制輸入框的個數和是否為可見密碼格式

package com.example.testcostumview.inputbox;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.v7.widget.AppCompatEditText;
import
 
 android.util.AttributeSet;
import android.widget.EditText;

public class PwdEditText extends AppCompatEditText {

    /**
     * 間隔
     */
    private final int PWD_SPACING = 5;
    /**
     * 密碼大小
     */
    private final int PWD_SIZE =10;
    /**
     * 密碼長度
     */
    private final int PWD_LENGTH = 4
 
;
    /**
     * 上下文
     */
    private Context mContext;
    /**
     * 寬度
     */
    private int mWidth;
    /**
     * 高度
     */
    private int mHeight;
    /**
     * 密碼框
     */
    private Rect mRect;

    /**
     * 密碼畫筆
     */
    private Paint mPwdPaint;

    private Paint mPwdPaintText;


    /**
     * 密碼框畫筆
     */
 

    private Paint mRectPaint;
    /**
     * 輸入的密碼長度
     */
    private int mInputLength;

    /**
     * 輸入結束監聽
     */
    private OnInputFinishListener mOnInputFinishListener;
    private String text;
    private boolean isPassword=false;

    /**
     * 構造方法
     * 
     * @param context
     * @param attrs
     */
    public PwdEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
    TypedArray array =context.obtainStyledAttributes(attrs
                , R.styleable.PwdEditText);
        isPassword=array.getBoolean(R.styleable.PwdEditText_password,false);
        pwdLegth=array.getInteger(R.styleable.PwdEditText_length,0);
        // 初始化密碼畫筆
        mPwdPaint = new Paint();
        mPwdPaint.setColor(Color.parseColor("#cc0099"));
        mPwdPaint.setStyle(Paint.Style.FILL);
        mPwdPaint.setAntiAlias(true);

        // 初始化文字畫筆
        mPwdPaintText = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPwdPaintText.setColor(Color.parseColor("#cc0099"));
        mPwdPaintText.setTextSize(60f);
        // 初始化密碼框
        mRectPaint = new Paint();
        mRectPaint.setStyle(Paint.Style.STROKE);
        mRectPaint.setColor(Color.parseColor("#cc0099"));
        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-15;
            int cy = mHeight / 2+15;
            if (!isPassword){
                String[] c=text.split("");
                canvas.drawText(c[i+1],cx, cy, mPwdPaintText);
            }else {
                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();
        this.text=text.toString();
        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 InputBoxActivity extends AppCompatActivity {

    private  PwdEditText  et_pwd;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_inputbox);

        et_pwd= (PwdEditText) findViewById(R.id.et_pwd);

        et_pwd.setOnInputFinishListener(new PwdEditText.OnInputFinishListener() {

            @Override
            public void onInputFinish(String password) {

                Toast.makeText(InputBoxActivity.this, password,Toast.LENGTH_LONG).show();
            }
        });

    }
}

三、xml中的length和password是設定密碼框的個數和是否隱藏密碼,它的引用需要自己在資原始檔中定義

 <com.example.testcostumview.inputbox.PwdEditText
        android:id="@+id/et_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="4"
        app:length="4"
        app:password="false"/>

在res/values目錄下新建一個attrs.xml，注意需要在根目錄引入我們的名稱空間xmlns:app=”http://schemas.android.com/apk/res-auto”，其中app我們可以更改，沒有具體名字要求

    <!--最好是自定義View的類名，檢視起來一目瞭然-->
    <declare-styleable name="PwdEditText">
        <attr name="length" format="integer"/>
        <attr name="password" format="boolean"/>
    </declare-styleable>

在自定義PwdEditText中的使用

    TypedArray array =context.obtainStyledAttributes(attrs
                , R.styleable.PwdEditText);
        isPassword=array.getBoolean(R.styleable.PwdEditText_password,false);
        pwdLegth=array.getInteger(R.styleable.PwdEditText_length,0);