仿微信/支付宝的密码输入框效果 android

在用到支付类app时，都有一个简密的输入框。。开始实现的时候思路有点问题，后来到github上搜了下，找到了一个开源的库看起来相当的牛逼，，来个地址先：

https://github.com/Jungerr/GridPasswordView

效果图：

这个开源库我研究了之后，又有了自己的一个思路：来个假的简密框---底部放一个EditTextView,顶部放置6个ImageView的原点，控制他们的显隐来实现这个简密宽

开发步骤：

1 布局

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     style="@style/common_hm_vw"  
4.     android:layout_height="50dp" >  
5.   
6.     <LinearLayout  
7.         android:baselineAligned="false"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="50dp"  
10.         android:background="@drawable/sdk2_simple_pwd_bg_"  
11.         android:orientation="horizontal" >  
12.   
13.         <RelativeLayout  
14.             style="@style/common_ho_vm"  
15.             android:layout_weight="1"  
16.             android:orientation="horizontal" >  
17.   
18.             <ImageView  
19.                 android:id="@+id/sdk2_pwd_one_img"  
20.                 style="@style/common_hm_vm"  
21.                 android:layout_centerInParent="true"  
22.                 android:src="@drawable/sdk_circle_icon"  
23.                 android:visibility="invisible" />  
24.   
25.             <View  
26.                 android:layout_width="1dp"  
27.                 android:layout_height="fill_parent"  
28.                 android:layout_alignParentRight="true"  
29.                 android:background="@color/sdk_color_pwd_line" />  
30.         </RelativeLayout>  
31.   
32.         <RelativeLayout  
33.             style="@style/common_ho_vm"  
34.             android:layout_weight="1"  
35.             android:orientation="horizontal" >  
36.   
37.             <ImageView  
38.                 android:id="@+id/sdk2_pwd_two_img"  
39.                 style="@style/common_hw_vw"  
40.                 android:layout_centerInParent="true"  
41.                 android:src="@drawable/sdk_circle_icon"  
42.                 android:visibility="invisible" />  
43.   
44.             <View  
45.                 android:layout_width="1dp"  
46.                 android:layout_height="fill_parent"  
47.                 android:layout_alignParentRight="true"  
48.                 android:background="@color/sdk_color_pwd_line" />  
49.         </RelativeLayout>  
50.   
51.         <RelativeLayout  
52.             style="@style/common_ho_vm"  
53.             android:layout_weight="1"  
54.             android:orientation="horizontal" >  
55.   
56.             <ImageView  
57.                 android:id="@+id/sdk2_pwd_three_img"  
58.                 style="@style/common_hw_vw"  
59.                 android:layout_centerInParent="true"  
60.                 android:src="@drawable/sdk_circle_icon"  
61.                 android:visibility="invisible" />  
62.   
63.             <View  
64.                 android:layout_width="1dp"  
65.                 android:layout_height="fill_parent"  
66.                 android:layout_alignParentRight="true"  
67.                 android:background="@color/sdk_color_pwd_line" />  
68.         </RelativeLayout>  
69.   
70.         <RelativeLayout  
71.             style="@style/common_ho_vm"  
72.             android:layout_weight="1"  
73.             android:orientation="horizontal" >  
74.   
75.             <ImageView  
76.                 android:id="@+id/sdk2_pwd_four_img"  
77.                 style="@style/common_hw_vw"  
78.                 android:layout_centerInParent="true"  
79.                 android:src="@drawable/sdk_circle_icon"  
80.                 android:visibility="invisible" />  
81.   
82.             <View  
83.                 android:layout_width="1dp"  
84.                 android:layout_height="fill_parent"  
85.                 android:layout_alignParentRight="true"  
86.                 android:background="@color/sdk_color_pwd_line" />  
87.         </RelativeLayout>  
88.   
89.         <RelativeLayout  
90.             style="@style/common_ho_vm"  
91.             android:layout_weight="1"  
92.             android:orientation="horizontal" >  
93.   
94.             <ImageView  
95.                 android:id="@+id/sdk2_pwd_five_img"  
96.                 style="@style/common_hw_vw"  
97.                 android:layout_centerInParent="true"  
98.                 android:src="@drawable/sdk_circle_icon"  
99.                 android:visibility="invisible" />  
100.   
101.             <View  
102.                 android:layout_width="1dp"  
103.                 android:layout_height="fill_parent"  
104.                 android:layout_alignParentRight="true"  
105.                 android:background="@color/sdk_color_pwd_line" />  
106.         </RelativeLayout>  
107.   
108.         <RelativeLayout  
109.             style="@style/common_ho_vm"  
110.             android:layout_weight="1"  
111.             android:orientation="horizontal" >  
112.   
113.             <ImageView  
114.                 android:id="@+id/sdk2_pwd_six_img"  
115.                 style="@style/common_hw_vw"  
116.                 android:layout_centerInParent="true"  
117.                 android:src="@drawable/sdk_circle_icon"  
118.                 android:visibility="invisible" />  
119.   
120.             <View  
121.                 android:layout_width="1dp"  
122.                 android:layout_height="fill_parent"  
123.                 android:layout_alignParentRight="true"  
124.                 android:background="@color/sdk_color_pwd_line" />  
125.         </RelativeLayout>  
126.     </LinearLayout>  
127.   
128.     <EditText  
129.         android:id="@+id/sdk2_pwd_edit_simple"  
130.         style="@style/common_hm_vm"  
131.         android:background="@null"  
132.         android:cursorVisible="false"  
133.         android:inputType="numberPassword"  
134.         android:maxLength="6"  
135.         android:textColor="@color/sdk2_color_black" />  
136.   
137. </FrameLayout>  

2：自定义一个控件来处理输入、删除、显隐等事件

[java]  view plain copy

1. package com.suning.mobile.paysdk.view;  
2.   
3. import android.content.Context;  
4. import android.text.Editable;  
5. import android.text.TextWatcher;  
6. import android.util.AttributeSet;  
7. import android.view.KeyEvent;  
8. import android.view.LayoutInflater;  
9. import android.view.View;  
10. import android.widget.EditText;  
11. import android.widget.ImageView;  
12. import android.widget.LinearLayout;  
13.   
14. import com.suning.mobile.paysdk.R;  
15. import com.suning.mobile.paysdk.utils.FunctionUtils;  
16. import com.suning.mobile.paysdk.utils.log.LogUtils;  
17.   
18. /** 
19.  *  
20.  * 〈一句话功能简述〉<br> 
21.  * 〈功能详细描述〉 简密输入框 
22.  */  
23. public class SecurityPasswordEditText extends LinearLayout {  
24.     private EditText mEditText;  
25.     private ImageView oneTextView;  
26.     private ImageView twoTextView;  
27.     private ImageView threeTextView;  
28.     private ImageView fourTextView;  
29.     private ImageView fiveTextView;  
30.     private ImageView sixTextView;  
31.     LayoutInflater inflater;  
32.     ImageView[] imageViews;  
33.     View contentView;  
34.   
35.     public SecurityPasswordEditText(Context context, AttributeSet attrs) {  
36.         super(context, attrs);  
37.         inflater = LayoutInflater.from(context);  
38.         builder = new StringBuilder();  
39.         initWidget();  
40.     }  
41.   
42.     private void initWidget() {  
43.         contentView = inflater.inflate(R.layout.sdk2_simple_pwd_widget, null);  
44.         mEditText = (EditText) contentView  
45.                 .findViewById(R.id.sdk2_pwd_edit_simple);  
46.         oneTextView = (ImageView) contentView  
47.                 .findViewById(R.id.sdk2_pwd_one_img);  
48.         twoTextView = (ImageView) contentView  
49.                 .findViewById(R.id.sdk2_pwd_two_img);  
50.         fourTextView = (ImageView) contentView  
51.                 .findViewById(R.id.sdk2_pwd_four_img);  
52.         fiveTextView = (ImageView) contentView  
53.                 .findViewById(R.id.sdk2_pwd_five_img);  
54.         sixTextView = (ImageView) contentView  
55.                 .findViewById(R.id.sdk2_pwd_six_img);  
56.         threeTextView = (ImageView) contentView  
57.                 .findViewById(R.id.sdk2_pwd_three_img);  
58.         LinearLayout.LayoutParams lParams = new LayoutParams(  
59.                 LinearLayout.LayoutParams.MATCH_PARENT,  
60.                 LinearLayout.LayoutParams.WRAP_CONTENT);  
61.         mEditText.addTextChangedListener(mTextWatcher);  
62.         mEditText.setOnKeyListener(keyListener);  
63.         imageViews = new ImageView[] { oneTextView, twoTextView, threeTextView,  
64.                 fourTextView, fiveTextView, sixTextView };  
65.         this.addView(contentView, lParams);  
66.     }  
67.   
68.     TextWatcher mTextWatcher = new TextWatcher() {  
69.   
70.         @Override  
71.         public void onTextChanged(CharSequence s, int start, int before,  
72.                 int count) {  
73.   
74.         }  
75.   
76.         @Override  
77.         public void beforeTextChanged(CharSequence s, int start, int count,  
78.                 int after) {  
79.   
80.         }  
81.   
82.         @Override  
83.         public void afterTextChanged(Editable s) {  
84.   
85.             if (s.toString().length() == 0) {  
86.                 return;  
87.             }  
88.   
89.             if (builder.length() < 6) {  
90.                 builder.append(s.toString());  
91.                 setTextValue();  
92.             }  
93.             s.delete(0, s.length());  
94.         }  
95.   
96.     };  
97.   
98.     OnKeyListener keyListener = new OnKeyListener() {  
99.   
100.         @Override  
101.         public boolean onKey(View v, int keyCode, KeyEvent event) {  
102.   
103.             if (keyCode == KeyEvent.KEYCODE_DEL  
104.                     && event.getAction() == KeyEvent.ACTION_UP) {  
105.                 delTextValue();  
106.                 return true;  
107.             }  
108.             return false;  
109.         }  
110.     };  
111.   
112.     private void setTextValue() {  
113.   
114.         String str = builder.toString();  
115.         int len = str.length();  
116.   
117.         if (len <= 6) {  
118.             imageViews[len - 1].setVisibility(View.VISIBLE);  
119.         }  
120.         if (len == 6) {  
121.             LogUtils.i("回调");  
122.             LogUtils.i("支付密码" + str);  
123.             if (mListener != null) {  
124.                 mListener.onNumCompleted(str);  
125.             }  
126.             LogUtils.i("jone", builder.toString());  
127.             FunctionUtils.hideSoftInputByView(getContext(), mEditText);  
128.         }  
129.     }  
130.   
131.     private void delTextValue() {  
132.         String str = builder.toString();  
133.         int len = str.length();  
134.         if (len == 0) {  
135.             return;  
136.         }  
137.         if (len > 0 && len <= 6) {  
138.             builder.delete(len - 1, len);  
139.         }  
140.         imageViews[len - 1].setVisibility(View.INVISIBLE);  
141.         ;  
142.     }  
143.   
144.     StringBuilder builder;  
145.   
146.     public interface SecurityEditCompleListener {  
147.         public void onNumCompleted(String num);  
148.     }  
149.   
150.     public SecurityEditCompleListener mListener;  
151.   
152.     public void setSecurityEditCompleListener(  
153.             SecurityEditCompleListener mListener) {  
154.         this.mListener = mListener;  
155.     }  
156.   
157.     public void clearSecurityEdit() {  
158.         if (builder != null) {  
159.             if (builder.length() == 6) {  
160.                 builder.delete(0, 6);  
161.             }  
162.         }  
163.         for (ImageView tv : imageViews) {  
164.             tv.setVisibility(View.INVISIBLE);  
165.         }  
166.   
167.     }  
168.   
169.     public EditText getSecurityEdit() {  
170.         return this.mEditText;  
171.     }  
172. }  

这样子其实也实现了简密功能，但是这个比前面那个开源库简单了许多，当然功能也没有前面的那个强大