在用到支付类app时，都有一个简密的输入框。。开始实现的时候思路有点问题，后来到github上搜了下，找到了一个开源的库看起来相当的牛逼，，来个地址先：
https://github.com/Jungerr/GridPasswordView
效果图：
这个开源库我研究了之后，又有了自己的一个思路：来个假的简密框---底部放一个EditTextView,顶部放置6个ImageView的原点，控制他们的显隐来实现这个简密宽
开发步骤：
1 布局
|
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
|
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/common_hm_vw" android:layout_height="50dp" > <LinearLayout android:baselineAligned="false" android:layout_width="match_parent" android:layout_height="50dp"android:background="@drawable/sdk2_simple_pwd_bg_" android:orientation="horizontal" > <RelativeLayout style="@style/common_ho_vm" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/sdk2_pwd_one_img" style="@style/common_hm_vm"android:layout_centerInParent="true"android:src="@drawable/sdk_circle_icon" android:visibility="invisible" /> <View android:layout_width="1dp" android:layout_height="fill_parent"android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" /> </RelativeLayout> <RelativeLayout style="@style/common_ho_vm" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/sdk2_pwd_two_img" style="@style/common_hw_vw"android:layout_centerInParent="true"android:src="@drawable/sdk_circle_icon" android:visibility="invisible" /> <View android:layout_width="1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" /> </RelativeLayout> <RelativeLayout style="@style/common_ho_vm" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/sdk2_pwd_three_img" style="@style/common_hw_vw" android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon" android:visibility="invisible" /> <View android:layout_width="1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" /> </RelativeLayout> <RelativeLayout style="@style/common_ho_vm" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/sdk2_pwd_four_img" style="@style/common_hw_vw"android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon" android:visibility="invisible" /> <View android:layout_width="1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" /> </RelativeLayout> <RelativeLayout style="@style/common_ho_vm" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/sdk2_pwd_five_img" style="@style/common_hw_vw" android:layout_centerInParent="true"android:src="@drawable/sdk_circle_icon" android:visibility="invisible" /> <View android:layout_width="1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" /> </RelativeLayout> <RelativeLayout style="@style/common_ho_vm" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/sdk2_pwd_six_img" style="@style/common_hw_vw" android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon" android:visibility="invisible" /> <View android:layout_width="1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" /> </RelativeLayout> </LinearLayout> <EditText android:id="@+id/sdk2_pwd_edit_simple" style="@style/common_hm_vm" android:background="@null" android:cursorVisible="false" android:inputType="numberPassword" android:maxLength="6" android:textColor="@color/sdk2_color_black" /> </FrameLayout> |
2：自定义一个控件来处理输入、删除、显隐等事件
|
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
|
package com.suning.mobile.paysdk.view; import android.content.Context; import android.text.Editable; import android.text.TextWatcher; import android.util.AttributeSet; import android.view.KeyEvent; import android.view.LayoutInflater; import android.view.View; import android.widget.EditText; import android.widget.ImageView; import android.widget.LinearLayout; import com.suning.mobile.paysdk.R; import com.suning.mobile.paysdk.utils.FunctionUtils; import com.suning.mobile.paysdk.utils.log.LogUtils; /** * * 〈一句话功能简述〉<br> * 〈功能详细描述〉 简密输入框 */public class SecurityPasswordEditText extends LinearLayout { private EditText mEditText; private ImageView oneTextView; private ImageView twoTextView; private ImageView threeTextView; private ImageView fourTextView; private ImageView fiveTextView; private ImageView sixTextView; LayoutInflater inflater; ImageView[] imageViews; View contentView; public SecurityPasswordEditText(Context context, AttributeSet attrs) { super(context, attrs); inflater = LayoutInflater.from(context); builder = new StringBuilder(); initWidget(); } private void initWidget() { contentView = inflater.inflate(R.layout.sdk_simple_pwd_widget, null); mEditText = (EditText) contentView .findViewById(R.id.sdk_pwd_edit_simple); oneTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_one_img); twoTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_two_img); fourTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_four_img); fiveTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_five_img); sixTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_six_img); threeTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_three_img); LinearLayout.LayoutParams lParams = new LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT); mEditText.addTextChangedListener(mTextWatcher); mEditText.setOnKeyListener(keyListener); imageViews = new ImageView[] { oneTextView, twoTextView, threeTextView, fourTextView, fiveTextView, sixTextView }; this.addView(contentView, lParams); } TextWatcher mTextWatcher = new TextWatcher() { @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void afterTextChanged(Editable s) { if (s.toString().length() == ) { return; } if (builder.length() < ) { builder.append(s.toString()); setTextValue(); } s.delete(, s.length()); } }; OnKeyListener keyListener = new OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_UP) { delTextValue(); return true; } return false; } }; private void setTextValue() { String str = builder.toString(); int len = str.length(); if (len <= ) { imageViews[len - ].setVisibility(View.VISIBLE); } if (len == ) { LogUtils.i("回调"); LogUtils.i("支付密码" + str); if (mListener != null) { mListener.onNumCompleted(str); } LogUtils.i("jone", builder.toString()); FunctionUtils.hideSoftInputByView(getContext(), mEditText); } } private void delTextValue() { String str = builder.toString(); int len = str.length(); if (len == ) { return; } if (len > && len <= ) { builder.delete(len - , len); } imageViews[len - ].setVisibility(View.INVISIBLE); ; } StringBuilder builder; public interface SecurityEditCompleListener { public void onNumCompleted(String num); } public SecurityEditCompleListener mListener; public void setSecurityEditCompleListener( SecurityEditCompleListener mListener) { this.mListener = mListener; } public void clearSecurityEdit() { if (builder != null) { if (builder.length() == ) { builder.delete(, ); } } for (ImageView tv : imageViews) { tv.setVisibility(View.INVISIBLE); } } public EditText getSecurityEdit() { return this.mEditText; } } |
这样子其实也实现了简密功能，但是这个比前面那个开源库简单了许多，当然功能也没有前面的那个强大。
