自訂 密碼輸入框+數字鍵台，輸入框數字鍵台

自訂 密碼輸入框+數字鍵台，輸入框數字鍵台

實現了一個自訂的密碼輸入框和自訂數字鍵台，用作使用者支付密碼設定介面。先上如下，方格樣式，以及點擊空白處隱藏軟鍵盤。

控制項實現清單：
1）整合於EditText的輸入框控制項：PasswordInputView.java
2）數字鍵台工具類：NumKeyboardUtil.java
3）xml檔案：number.xml
4）attrs樣式
5）layout檔案

具體內容：
PasswordInputView.java

public class PasswordInputView extends EditText{    private int textLength;    private int borderColor;    private float borderWidth;    private float borderRadius;    private int passwordLength;    private int passwordColor;    private float passwordWidth;    private float passwordRadius;    private Paint passwordPaint = new Paint(Paint.ANTI_ALIAS_FLAG);    private Paint borderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);    private final int defaultSplitLineWidth = 1;    public PasswordInputView(Context context, AttributeSet attrs) {        super(context, attrs);        final Resources res = getResources();        final int defaultBorderColor = res.getColor(R.color.line_color);        final float defaultBorderWidth = res.getDimension(R.dimen.dimen_1px);        final float defaultBorderRadius = res.getDimension(R.dimen.dimen_6);        final int defaultPasswordLength = 6;        final int defaultPasswordColor = res.getColor(R.color.normal_text_color);        final float defaultPasswordWidth = res.getDimension(R.dimen.dimen_6);        final float defaultPasswordRadius = res.getDimension(R.dimen.dimen_6);        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.PasswordInputView, 0, 0);        try {            borderColor = a.getColor(R.styleable.PasswordInputView_borderColor, defaultBorderColor);            borderWidth = a.getDimension(R.styleable.PasswordInputView_borderWidth, defaultBorderWidth);            borderRadius = a.getDimension(R.styleable.PasswordInputView_borderRadius, defaultBorderRadius);            passwordLength = a.getInt(R.styleable.PasswordInputView_passwordLength, defaultPasswordLength);            passwordColor = a.getColor(R.styleable.PasswordInputView_passwordColor, defaultPasswordColor);            passwordWidth = a.getDimension(R.styleable.PasswordInputView_passwordWidth, defaultPasswordWidth);            passwordRadius = a.getDimension(R.styleable.PasswordInputView_passwordRadius, defaultPasswordRadius);        } finally {            a.recycle();        }        borderPaint.setStrokeWidth(borderWidth);        borderPaint.setColor(borderColor);        passwordPaint.setStrokeWidth(passwordWidth);        passwordPaint.setStyle(Paint.Style.FILL);        passwordPaint.setColor(passwordColor);        setSingleLine(true);    }    @Override    protected void onDraw(Canvas canvas) {        int width = getWidth();        int height = getHeight();        // 分割線        borderPaint.setColor(borderColor);        borderPaint.setStrokeWidth(defaultSplitLineWidth);        for (int i = 1; i < passwordLength; i++) {            float x = width * i / passwordLength;            canvas.drawLine(x, 0, x, height, borderPaint);        }        // 密碼        float cx, cy = height/ 2;        float half = width / passwordLength / 2;        for(int i = 0; i < textLength; i++) {            cx = width * i / passwordLength + half;            canvas.drawCircle(cx, cy, passwordWidth, passwordPaint);        }    }    @Override    protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {        super.onTextChanged(text, start, lengthBefore, lengthAfter);        this.textLength = text.toString().length();        invalidate();    }    public int getBorderColor() {        return borderColor;    }    public void setBorderColor(int borderColor) {        this.borderColor = borderColor;        borderPaint.setColor(borderColor);        invalidate();    }    public float getBorderWidth() {        return borderWidth;    }    public void setBorderWidth(float borderWidth) {        this.borderWidth = borderWidth;        borderPaint.setStrokeWidth(borderWidth);        invalidate();    }    public float getBorderRadius() {        return borderRadius;    }    public void setBorderRadius(float borderRadius) {        this.borderRadius = borderRadius;        invalidate();    }    public int getPasswordLength() {        return passwordLength;    }    public void setPasswordLength(int passwordLength) {        this.passwordLength = passwordLength;        invalidate();    }    public int getPasswordColor() {        return passwordColor;    }    public void setPasswordColor(int passwordColor) {        this.passwordColor = passwordColor;        passwordPaint.setColor(passwordColor);        invalidate();    }    public float getPasswordWidth() {        return passwordWidth;    }    public void setPasswordWidth(float passwordWidth) {        this.passwordWidth = passwordWidth;        passwordPaint.setStrokeWidth(passwordWidth);        invalidate();    }    public float getPasswordRadius() {        return passwordRadius;    }    public void setPasswordRadius(float passwordRadius) {        this.passwordRadius = passwordRadius;        invalidate();    }}

NumKeyboardUtil 數字軟鍵盤工具類

public class NumKeyboardUtil {    private KeyboardView keyboardView;        private Keyboard k;// 數字鍵台        private PasswordInputView ed;    public NumKeyboardUtil(Activity act, Context ctx, PasswordInputView edit) {            this.ed = edit;          k = new Keyboard(ctx, R.xml.number);            keyboardView = (KeyboardView) act.findViewById(R.id.keyboard_view);            keyboardView.setKeyboard(k);            keyboardView.setEnabled(true);            keyboardView.setPreviewEnabled(true);          keyboardView.setOnKeyboardActionListener(listener);        }    private OnKeyboardActionListener listener = new OnKeyboardActionListener() {            @Override            public void swipeUp() {            }            @Override            public void swipeRight() {            }            @Override            public void swipeLeft() {            }            @Override            public void swipeDown() {            }            @Override            public void onText(CharSequence text) {            }            @Override            public void onRelease(int primaryCode) {            }            @Override            public void onPress(int primaryCode) {            }            //一些特殊操作按鍵的codes是固定的比如完成、回退等          @Override            public void onKey(int primaryCode, int[] keyCodes) {                    Editable editable = ed.getText();                    int start = ed.getSelectionStart();                    if (primaryCode == Keyboard.KEYCODE_DELETE) {// 回退                            if (editable != null && editable.length() > 0) {                                    if (start > 0) {                                            editable.delete(start - 1, start);                                    }                            }                    }else if (primaryCode == Keyboard.KEYCODE_CANCEL) {// 完成                     hideKeyboard();                } else { //將要輸入的數字現在編輯框中                           editable.insert(start, Character.toString((char) primaryCode));                    }            }        };    public void showKeyboard() {            keyboardView.setVisibility(View.VISIBLE);        }    public void hideKeyboard() {        keyboardView.setVisibility(View.GONE);    }    public int getKeyboardVisible() {        return keyboardView.getVisibility();    }}

number.xml
注意該檔案需要放在項目下的res目錄下的xml目錄（沒有就建個）裡面

<?xml version="1.0" encoding="utf-8"?><Keyboard xmlns:android="http://schemas.android.com/apk/res/android"    android:horizontalGap="0px"    android:keyHeight="42dip"    android:keyWidth="31%p"    android:verticalGap="0px" >    <Row>        <Key            android:codes="49"            android:keyLabel="1" />        <Key            android:codes="50"            android:keyLabel="2" />        <Key            android:codes="51"            android:keyLabel="3" />    </Row>    <Row>        <Key            android:codes="52"            android:keyLabel="4" />        <Key            android:codes="53"            android:keyLabel="5" />        <Key            android:codes="54"            android:keyLabel="6" />    </Row>    <Row>        <Key            android:codes="55"            android:keyLabel="7" />        <Key            android:codes="56"            android:keyLabel="8" />        <Key            android:codes="57"            android:keyLabel="9" />    </Row>    <Row>        <Key            android:codes="-3"            android:keyLabel="完成" />        <Key            android:codes="48"            android:keyLabel="0" />        <Key            android:codes="-5"            android:keyIcon="@drawable/sym_keyboard_delete" />    </Row></Keyboard>

attrs.xml裡面的樣式：

<!-- 支付密碼輸入框 -->    <declare-styleable name="PasswordInputView">        <attr name="borderWidth" format="dimension"/>        <attr name="borderColor" format="color"/>        <attr name="borderRadius" format="dimension"/>        <attr name="passwordLength" format="integer"/>        <attr name="passwordWidth" format="dimension"/>        <attr name="passwordColor" format="color"/>        <attr name="passwordRadius" format="dimension"/>    </declare-styleable>

布局代碼：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/main_bg_color" >    <include        android:id="@+id/title_ll"        layout="@layout/common_actionbar"/>    <TextView        android:id="@+id/trader_pwd_set_tips_textview"       >//=======在Activity成員變數中聲明部分代碼=======/** 控制項 */    private PasswordInputView edtPwd;//=======在Activity執行個體化控制項部分代碼=======// 初始化控制項        edtPwd = (PasswordInputView) findViewById(R.id.trader_pwd_set_pwd_edittext);        edtPwd.setInputType(InputType.TYPE_NULL); // 屏蔽系統軟鍵盤// 自訂軟鍵盤        if (keyboardUtil == null) keyboardUtil = new NumKeyboardUtil(this, this, edtPwd);        edtPwd.setOnTouchListener(new OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEvent event) {                keyboardUtil.showKeyboard();                return false;            }        });//=======在Activity中重寫onTouchEvent()方法，實現點擊空白處隱藏軟鍵盤=======@Override    public boolean onTouchEvent(MotionEvent event) {        if(event.getAction() == MotionEvent.ACTION_DOWN){               if(getCurrentFocus()!=null && getCurrentFocus().getWindowToken()!=null){                  keyboardUtil.hideKeyboard();             }        }        return super.onTouchEvent(event);    }

ps：如果把該密碼輸入框和其他類型輸入框並用時要注意兩者之間焦點變化時將系統軟鍵盤和自訂的數字鍵台隱藏，我的做法是給密碼輸入框綁定OnFacusChangeListener事件，來控制就好。如下：

edtPwd.setOnFocusChangeListener(new OnFocusChangeListener() {            @Override            public void onFocusChange(View v, boolean hasFocus) {                if (hasFocus) {                    // 如果系統鍵盤是彈出狀態，先隱藏                    ((InputMethodManager) getSystemService(INPUT_METHOD_SERVICE))                    .hideSoftInputFromWindow(getCurrentFocus()                    .getWindowToken(),                    InputMethodManager.HIDE_NOT_ALWAYS);                    keyboardUtil.showKeyboard();                } else {                    keyboardUtil.hideKeyboard();                }            }        });