【安卓基础】ImageView与EditText联动实现隐藏与显示密码

项目中经常会有这样的需求，在密码输入框的右边有一个小图标，点击就切换显示和隐藏密码。

其实这里需求实现起来是比较容易的，主要考虑是复用问题，因为登陆、注册、修改密码界面都会有这样的情景，如果每个界面都独立写一次这样的逻辑显然是不符合代码复用的理念，所以需要把这个情景抽象出来，用代码去实现一个工具库。

首先必须说一说EditText的inputType了，当我们在XML中指定EditText的inputType为textPassword时，输入的内容会以星号呈现。

 <EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPassword" />

现在当程序运行的时候，输入的内容呈现为密码的形式，当我们点击显示密码的小图标，我们需要让EditText显示输入的内容，我们可以通过代码改变EditText的inputType。

if (hidePwd == true) { // 输入的内容显示为星号
    uiPassword.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
} else { // 正常显示输入内容
    uiPassword.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
}

通常密码输入框右边有个小图标，点击会切换显示/隐藏密码，同时小图标在显示和隐藏状态中的图标是不一样的。现在针对小图标点击，然后切换密码框的输入状态，把这种行为抽象出来成为一个函数。

// image : 小图标
// editor : 输入框
// showingDrawable :　显示密码时的小图标
// hidingDrawable : 隐藏密码时的小图标
public static void bingPwdSwitch(final ImageView image, final EditText editor, final int showingDrawable, final int hidingDrawable) {
        image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (image.getTag().equals("1") || image.getTag() == null) {
                    image.setTag("0");
                    image.setImageResource(showingDrawable);
                } else {
                    image.setTag("1");
                    image.setImageResource(hidingDrawable);
                }

                if (image.getTag().equals("1") || image.getTag() == null) {
                    editor.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
                } else {
                    editor.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
                }
            }
        });
    }

上面使用了View的getTag()方法，目的是作为状态的判断，为null或者1表示当前状态是隐藏密码，为0表示当前是显示密码状态。EditText在XML中的inputType为textPassword，在Activity的onCreate()中调用函数进行绑定即可。

bingPwdSwitch(uaShowHidePwd, uiPassword, R.mipmap.login_ic_pwd, R.mipmap.login_ic_unpwd);

【安卓基础】ImageView与EditText联动实现隐藏与显示密码

猜你喜欢