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

netkiller old

发布于 2021-02-08 19:19:45

1.8K0

发布于 2021-02-08 19:19:45

文章被收录于专栏：NetkillerNetkiller

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

要实现的功能如下：

界面上提供一个密码输入框和一个多选框
勾选多选框，显示密码；反勾选多选框，隐藏密码

该效果的关键两点：

函数 setTransformationMethod：用于设置 EditText 的字符类型；
两个类： 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

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:orientation="vertical">
    <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"/>
</LinearLayout>

3、效果图如下

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

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

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

优化后的效果如下：