在使用app的时候，首次登录都需要用户输入密码的，有些朋友为了安全起见密码设置的比较长，导致很多次密码都输入错误，严重影响了用户体验效果。这一点移动开发者做好了准备工作，因为手机的私密性比较强，在输入密码的时候，可以显示输入，增强准确性，提升用户体验度。这当然要付出代价的，需要额外的代码编写功能。下面通过本文给大家介绍如何编写密码明文显示的功能，仅供参考。
本文源码的github下载地址
要点
(1) 重写edittext, 添加提示密码显示和隐藏的图片.
(2) 判断点击位置, 切换edittext的密码显示状态.
(3) 在屏幕旋转或配置改变时, 保留图片的状态信息.
实现只有一个类和两个图片资源, 大家可以自由定制.
1. 布局样式
两种密码的显示样式, 一种是常规显示, 一种是textinputlayout显示.
|
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
|
<linearlayoutandroid:id="@+id/main_ll_container_1"android:layout_width="match_parent"android:layout_height="40dp"android:gravity="center"><textviewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="密码:"android:textsize="20sp"/><me.chunyu.spike.wcl_password_input_demo.passwordedittextandroid:id="@+id/main_pet_password"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:hint="请输入密码"/></linearlayout><android.support.design.widget.textinputlayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/main_ll_container_1"><me.chunyu.spike.wcl_password_input_demo.passwordedittextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:hint="请输入密码"/></android.support.design.widget.textinputlayout> |
效果
2. 提示图标
初始化资源和布局, 获取密码图片的资源, 监听edittext, 有文字时显示图标, 没有文字时隐藏图标.
|
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
|
// 初始化布局public void initfields(attributeset attrs, int defstyleattr) {if (attrs != null) {// 获取属性信息typedarray styles = getcontext().gettheme().obtainstyledattributes(attrs, r.styleable.passwordedittext, defstyleattr, 0);try {// 根据参数, 设置iconmshowpwdicon = styles.getresourceid(r.styleable.passwordedittext_pet_iconshow, mshowpwdicon);mhidepwdicon = styles.getresourceid(r.styleable.passwordedittext_pet_iconhide, mhidepwdicon);} finally {styles.recycle();}}// 密码状态setinputtype(editorinfo.type_class_text | editorinfo.type_text_variation_password);addtextchangedlistener(new textwatcher() {@overridepublic void beforetextchanged(charsequence s, int start, int count, int after) {}@override public void ontextchanged(charsequence s, int start, int before, int count) {if (s.length() > 0) {// 有文字时显示指示器showpasswordvisibilityindicator(true);} else {misshowpwdicon = false;restorepasswordiconvisibility(misshowpwdicon);showpasswordvisibilityindicator(false); // 隐藏指示器}}@override public void aftertextchanged(editable s) {}});} |
setinputtype设置密码状态, type_text_variation_password密文状态.
通过pet_iconshow属性, 可以选择自定义密码提示图片.
3. 监听事件
点击图片, 切换显示或隐藏密码, 获取点击位置, 和图片位置进行比较, 判断事件.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
@override public boolean ontouchevent(motionevent event) {if (mdrawableside == null) {return super.ontouchevent(event);}final rect bounds = mdrawableside.getbounds();final int x = (int) event.getrawx(); // 点击的位置int iconx = (int) gettoprightcorner().x;// icon的位置int lefticon = iconx - bounds.width();log.e(tag, "x: " + x + ", lefticon: " + lefticon);// 大于icon的位置, 才能触发点击if (x >= lefticon) {togglepasswordiconvisibility(); // 变换状态event.setaction(motionevent.action_cancel);return false;}return super.ontouchevent(event);} |
切换明文或密文的密码
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 设置密码指示器的状态private void restorepasswordiconvisibility(boolean isshowpwd) {if (isshowpwd) {// 可视密码输入setinputtype(editorinfo.type_class_text | editorinfo.type_text_variation_visible_password);} else {// 非可视密码状态setinputtype(editorinfo.type_class_text | editorinfo.type_text_variation_password);}// 移动光标setselection(gettext().length());} |
4. 保存状态
重写savedstate, 在旋转屏幕时, 保存和恢复显示图片信息.
|
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
|
// 存储密码状态, 显示icon的位置protected static class pwdsavedstate extends basesavedstate {private final boolean mshowingicon;private pwdsavedstate(parcelable superstate, boolean showingicon) {super(superstate);mshowingicon = showingicon;}private pwdsavedstate(parcel in) {super(in);mshowingicon = in.readbyte() != 0;}public boolean isshowingicon() {return mshowingicon;}@overridepublic void writetoparcel(parcel destination, int flags) {super.writetoparcel(destination, flags);destination.writebyte((byte) (mshowingicon ? 1 : 0));}public static final parcelable.creator<pwdsavedstate> creator = new creator<pwdsavedstate>() {public pwdsavedstate createfromparcel(parcel in) {return new pwdsavedstate(in);}public pwdsavedstate[] newarray(int size) {return new pwdsavedstate[size];}};} |
动画效果
现在可以把类复制到应用中, 更换图片资源, 替换显示密码框, 给用户更好的移动端体验. 永远追求极致, 追求不凡.
关于android程序开发之防止密码输入错误 密码明文显示功能的相关知识就给大家介绍到这里，希望对大家有所帮助！
