【Android初级】教你用两行代码实现“显示/隐藏密码”的效果

时间:2023-03-09 19:16:13
【Android初级】教你用两行代码实现“显示/隐藏密码”的效果

Android里面要使用密码的场景是非常多的,支付宝、微信、淘宝以及各大银行APP,都跟用户的密码有关。用户的密码是极为隐私的,用户在输入时不希望密码被别人看到,所以几乎所有需要输入密码的场景下都会把密码隐藏起来,显示成一串的黑点。今天我们就来看下如何实现这个能动态显示密码和隐藏密码的效果。

要实现的功能如下:

  1. 界面上提供一个密码输入框和一个多选框

  2. 勾选多选框,显示密码;反勾选多选框,隐藏密码

该效果的关键两点:

  1. 函数 setTransformationMethod:用于设置 EditText 的字符类型;

  2. 两个类:

     HideReturnsTransformationMethod:用于正常显示所输入的密码;
    
     PasswordTransformationMethod:用于隐藏所输入的密码

源代码如下:

1、主Activity

`import android.app.Activity;

import android.os.Bundle;

import android.text.Selection;

import android.text.Spannable;

import android.text.method.HideReturnsTransformationMethod;

import android.text.method.PasswordTransformationMethod;

import android.widget.CheckBox;

import android.widget.CompoundButton;

import android.widget.EditText;

import com.example.memorydemo.R;

public class ShowPasswordDemo extends Activity {

@Override
protected void onCreate(Bundle onSavedInstance) {
super.onCreate(onSavedInstance);
setContentView(R.layout.show_password_demo); final EditText editText = findViewById(R.id.editTextPassword);
CheckBox checkBox = findViewById(R.id.checkBoxShowPassword);
checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) { // 用户想要显示密码
editText.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
} else { // 用户想要隐藏密码
editText.setTransformationMethod(PasswordTransformationMethod.getInstance());
}
}
});
}

}`

2、布局文件 show_password_demo.xml

`

<EditText
android:paddingTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入密码:"
android:ems="10"
android:id="@+id/editTextPassword"/>
<CheckBox
android:text="显示密码"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="@+id/checkBoxShowPassword"
android:layout_marginTop="10dp"/>

`

3、效果图如下

【Android初级】教你用两行代码实现“显示/隐藏密码”的效果

细心的你会注意到,每次显示密码或隐藏密码后,光标自动移动到最开始的位置了。

为了解决这个问题,我们要在 CheckBox 的stateChange事件后,手动将光标移动到末尾,在 onCheckedChanged 的后面添加如下代码:

// 切换后将 EditText的光标置于末尾 CharSequence charSequence = editText.getText(); if (charSequence != null) { Spannable spanText = (Spannable) charSequence; Selection.setSelection(spanText, charSequence.length()); }

优化后的效果如下:

【Android初级】教你用两行代码实现“显示/隐藏密码”的效果