見與不見，你說了算：Android之設置密碼是否可見

咱們在註冊或者登陸App時，不免會須要輸入密碼。有時候咱們身旁可能有其餘人在，爲了避免讓密碼「赤裸裸」地暴露在他人眼皮底下，密碼字符串一般會默認顯示爲暗文（也就是星號或者圓點）。但還有一種狀況是咱們在輸入密碼時有時會小手一抖，會多按幾下或者輸錯了密碼，由於都是暗文，咱們就只好把密碼全都刪掉從新輸入了。這個時候咱們就又懷念起能看到密碼的日子了。那麼有沒有方法讓密碼在明暗文中來回切換呢。答案是確定的，並且還不止一種！下面咱們就來嘗試一下吧。

一、只需一個簡單的ImageView

新建一個PasswordActivity，它的佈局很簡單：密碼輸入框就是一個EditText，控制密碼是否可見的控件咱們使用ImageView。當密碼爲明文時，ImageView填充的是睜開眼睛的圖片；當密碼爲暗文時，則是一張閉上眼睛的圖片。

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/image"
            android:hint="請輸入密碼"
            android:inputType="textPassword"
            android:textColorHint="#b7b6b6" />

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@mipmap/hide_pwd_image" />
    </RelativeLayout>

在初始化完控件以後，咱們建立一個控制密碼是否可見的方法：

//密碼是否可見
    private boolean isPwdVisible = false;
    /**
     * 設置密碼是否可見
     */
    private void setPasswordVisible() {
        //ImageView點擊事件
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //修改密碼是否可見的狀態
                isPwdVisible = !isPwdVisible;
                //設置密碼是否可見
                if (isPwdVisible) {
                    //設置密碼爲明文，並更改眼睛圖標
                    editText1.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                    imageView.setImageResource(R.mipmap.show_pwd_image);
                } else {
                    //設置密碼爲暗文，並更改眼睛圖標
                    editText1.setTransformationMethod(PasswordTransformationMethod.getInstance());
                    imageView.setImageResource(R.mipmap.hide_pwd_image);
                }
                //設置光標位置的代碼需放在設置明暗文的代碼後面
                editText1.setSelection(editText1.getText().toString().length());
            }
        });

setTransformationMethod是TextView的方法（EditText繼承於TextView，因此咱們也可使用它），谷歌文檔是這樣描述它的做用的：

Sets the transformation that is applied to the text that this TextView is displaying.

大概意思是在TextView顯示時，可以對其中的文字進行變換。它須要傳入一個TransformationMethod的對象做爲參數，至於在密碼可見和不可見時傳入什麼，你們看上面的代碼就知道了。

那麼咱們怎麼判斷當前的密碼是處於什麼狀態呢？這個也不難，咱們能夠聲明一個布爾值變量isPwdVisible，默認爲false，也就是密碼不可見。每次改變密碼的可見狀態時，對其取反就能夠了。另外，爲了讓用戶體驗更好，每次切換狀態後都讓光標移至輸入框的最末端。

二、巧用CheckBox

你們仔細想一想，咱們點擊眼睛圖片，密碼就在可見和不可見兩種狀態中切換，這是否是看起來很眼熟呢？沒錯，這不就跟CheckBox同樣嘛！每次點擊就進行一次取反操做。因此咱們也能夠用CheckBox來代替ImageView，而後將背景替換爲眼睛圖片便可：

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/checkbox"
            android:hint="請輸入密碼"
            android:inputType="textPassword"
            android:textColorHint="#b7b6b6" />

        <CheckBox
            android:id="@+id/checkbox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@mipmap/hide_pwd_image"
            android:button="@null"
            android:checked="false"
             />
    </RelativeLayout>

記得必定要寫上android:button="@null"把CheckBox本來的方框去掉。

換成CheckBox後，咱們就不用聲明布爾值變量，而是直接能夠調用CheckBox的監聽事件：

checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    //CheckBox選中，顯示明文
                    editText2.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
                    checkBox.setBackgroundResource(R.mipmap.show_pwd_image);
                } else {
                    //CheckBox取消選中，顯示暗文
                    editText2.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
                    checkBox.setBackgroundResource(R.mipmap.hide_pwd_image);
                }
                //光標移至最末端
                editText2.setSelection(editText2.getText().toString().length());
            }
        });

這裏咱們使用了第二種方法來設置密碼是否可見：調用setInputType方法來改變EditText的輸入狀態。InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD能夠設置密碼可見，InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD則能夠隱藏密碼。

方法都介紹完了，你們能夠看看實現的效果，都是同樣的：

三、總結

本文介紹了使用使用不一樣控件和不一樣函數來設置EditText的密碼是否可見，實際上兩兩組合起來有四種了。代碼很簡單，並且我是寫在一個大的project中的，因此源碼就只放主要文件和圖片資源了。
資源下載