在使用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
|
<linearlayout
android:id="@+id/main_ll_container_1"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center">
<textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="密码:"
android:textsize="20sp"/>
<me.chunyu.spike.wcl_password_input_demo.passwordedittext
android: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.textinputlayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/main_ll_container_1">
<me.chunyu.spike.wcl_password_input_demo.passwordedittext
android: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 {
// 根据参数, 设置icon
mshowpwdicon = 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() {
@override
public 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;
}
@override
public 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程序开发之防止密码输入错误 密码明文显示功能的相关知识就给大家介绍到这里，希望对大家有所帮助！