Android – 密码可见度切换

密码可见性切换：
在Android支持库24.2.0中，引入了“密码可见性切换”。

• TextInputLayout 增加了对密码可见性切换

什么是密码可见性切换：
根据Material Design Guideline ，使用此图标，我们可以在密码输入字段中启用和禁用密码可见性。
当可见性图标显示文本字段时，它指示该字段的输入是否可见。可以使用图标打开或关闭文本字段的可见性：

• 启用可见性：图标不透明度为54%，密码可见。
• 禁用可见性：图标不透明度为38%，密码不可见。

先上效果图：

正常使用.gif

添加“显示密码”属性后：

修改后.gif

现在介绍一下具体使用方法：

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:focusable="true"
        android:focusableInTouchMode="true"
      >

        <android.support.design.widget.TextInputLayout
            android:id="@+id/layout_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColorHint="@color/colorHint"
           >

            <EditText
                android:id="@+id/editTextEmail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint_email"
                android:inputType="textEmailAddress"
                android:text="aaaa"
                />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/layout_email"
            android:textColorHint="@color/colorHint"
            app:passwordToggleDrawable="@mipmap/pwd_visiable"
            app:passwordToggleEnabled="true">

            <EditText
                android:id="@+id/editTextPassword"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="45dp"
                android:hint="@string/hint_password"
                android:inputType="textPassword"
                android:text="aaaaa"
                />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentStart="true"
            android:layout_below="@+id/layout_email"
            android:layout_marginTop="104dp"
            android:background="@color/buttoncolor"
            android:text="登录"
            android:textColor="@color/textColor"/>
    </RelativeLayout>

当然，在我们实际开发中"显示/隐藏图标"可能需要有状态变化的，所以，上面代码就不能满足我们的需求了，这时候我们就需要稍微修改一下代码。
我们先删除xml文件中“app:passwordToggleDrawable="@mipmap/pwd_visiable"”这行代码，然后我们在Activity中动态添加“显示/隐藏”图标。

TextInputLayout mLayout = (TextInputLayout) findViewById(R.id.layout_password);
mLayout.setPasswordVisibilityToggleDrawable(R.drawable.pwd_selector);

pwd_selector.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/pwd_visiable" android:state_checked="true"/>
    <item android:drawable="@mipmap/pwd_gone" android:state_checked="false"/>
    <item android:drawable="@mipmap/pwd_gone" />
</selector>

使用的资源：

pwd_gone.png pwd_visiable.png

修改后的效果如下：

状态改变.gif

更多定制：

android.support.design:passwordToggleContentDescription 设置为密码输入可见性切换的内容描述的文本。
android.support.design:passwordToggleDrawable   可用作密码输入可见度切换图标。
android.support.design:passwordToggleEnabled    当EditText有密码时，视图是否显示切换。
android.support.design:passwordToggleTint   用于密码输入可见性的图标toggleMay可以是一个颜色值
android.support.design:passwordToggleTintMode   混合模式用于应用背景色调。

可从文档中查看更多。

好了，到这里，就全部结束了。

快乐生活，快乐工作，快乐编程！