安卓笔记侠

专注安卓开发

导航

统计

自定义 密码输入框+数字键盘

实现了一个自定义的密码输入框和自定义数字键盘,用作用户支付密码设置界面。先上效果图如下,方格样式,以及点击空白处隐藏软键盘。
这里写图片描述

控件实现清单:
1)集成于EditText的输入框控件:PasswordInputView.java
2)数字键盘工具类:NumKeyboardUtil.java
3)xml文件:number.xml
4)attrs样式
5)layout文件

具体内容:
PasswordInputView.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
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 数字软键盘工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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目录(没有就建个)里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?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里面的样式:

1
2
3
4
5
6
7
8
9
10
<!-- 支付密码输入框 -->
    <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>

布局代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?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"
        style="@style/normal_text_style"
        android:layout_below="@+id/title_ll"
        android:layout_marginTop="25dip"
        android:layout_centerHorizontal="true"
        android:text="@string/trade_pwd_set_tips_text" />
 
    <ImageView
        android:id="@+id/line1_imageview"
        style="@style/line_horizontal_style"
        android:layout_below="@+id/trader_pwd_set_tips_textview"
        android:layout_marginTop="26dip"
        android:contentDescription="@string/content_description" />
 
    <com.acoe.demo.widget.PasswordInputView
        android:id="@+id/trader_pwd_set_pwd_edittext"
        android:layout_width="match_parent"
        android:layout_height="41dip"
        android:layout_below="@+id/line1_imageview"
        android:maxLength="6"
        android:background="@android:color/white" />
 
    <ImageView
        android:id="@+id/line2_imageview"
        style="@style/line_horizontal_style"
        android:layout_below="@+id/trader_pwd_set_pwd_edittext"
        android:contentDescription="@string/content_description" />
 
    <Button
        android:id="@+id/trader_pwd_set_next_button"
        style="@style/main_button_style"
        android:layout_below="@+id/line2_imageview"
        android:layout_marginTop="25dip"
        android:text="@string/trade_pwd_set_next_text" />
 
    <android.inputmethodservice.KeyboardView
        android:id="@+id/keyboard_view"   
        android:layout_width="match_parent"   
        android:layout_height="240dip"
        android:layout_alignParentBottom="true"
        android:paddingTop="30dip"
        android:paddingLeft="13dip"
        android:paddingRight="13dip"
        android:focusable="true"   
        android:focusableInTouchMode="true"  
        android:visibility="invisible"/>
 
</RelativeLayout>

Activity代码片段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//=======在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事件,来控制就好。如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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();
                }
            }
        });

  https://www.jianshu.com/p/be68facfc4b8

posted on   安卓笔记侠  阅读(2236)  评论(2编辑  收藏  举报

点击右上角即可分享
微信分享提示