在用到支付類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; } } |
這樣子其實也實現了簡密功能，但是這個比前面那個開源庫簡單了許多，當然功能也沒有前面的那個強大。
