1. 程式人生 > >Android materialdesign TextInputLayout替換眼睛圖示和解決眼睛圖示不顯示的問題

Android materialdesign TextInputLayout替換眼睛圖示和解決眼睛圖示不顯示的問題

TextInputLayout自帶的那個眼睛點選後是隻能加深背景顏色,老闆看了覺得不滿意就讓我修改 OTZ,但是我又不想放棄TextInputLayout顯示文字的酷炫效果,所以就有了下文。
(1)用自己的眼睛圖示替換系統的
圖片一,這是預設的效果
於是我百度了一下如何隱藏TextInputLayout眼睛圖示,於是看到了這個屬性
TextInputLayout設定眼睛圖示不顯示app:passwordToggleEnabled=”false”,然後加上自己的樣式實現了這個效果。
圖片二,實現了點選眼睛顯示密碼
實現方式如下
XML程式碼
<android.support.design.widget.TextInputLayout
android:id="@+id/passwordWrapper"
android:layout_width="230dp"
android:layout_height="wrap_content"
android:layout_below="@id/usernameWrapper"
app:passwordToggleEnabled="false">
<EditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="密碼"
android:textSize="14sp"
android:inputType="numberPassword"/>
</android.support.design.widget.TextInputLayout>
<CheckBox
android:id="@+id/showpassword"
android:checked="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
android:button="@drawable/show_password"/>

show_password樣式
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/show" android:state_checked="true"/>
<item android:drawable="@drawable/conceal" android:state_checked="false"/>
</selector>

Activity程式碼

/**
* 顯示或者隱藏密碼
*/
showpassword.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked){
passwordWrapper.getEditText().setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
}else {
passwordWrapper.getEditText().
setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
}
}
});


這樣就實現了想要的效果,但是兩個edittext的寬度不一樣感覺不好看,APP裡還有幾個需要修改,重複的程式碼要複製好幾份,所以我就想看下TextInputLayout裡的屬性看能不能修改下眼睛圖示的樣式,於是就被我找到了這貨app:passwordToggleDrawable=”@drawable/show_password”,它是用來替換眼睛圖示的樣式的,於是加上自己的樣式再稍微修改了下圖示的大小就實現了下面的效果完美貼合edittext。
預設顯示的效果
明文顯示密碼的效果

(2)解決眼睛圖示不顯示的問題
最近發現眼睛圖示突然消失不見了,以為是系統問題,結果用不同產商的手機測試了還真是系統問題,猜想可能是被自動隱藏了,解決辦法也挺簡單在TextInputLayout 控制元件的xml程式碼中加入以下屬性,手動將眼睛圖示顯示出來。

app:passwordToggleEnabled=”true”

 總結:以後遇到問題之前先去嘗試自己解決,不要直接百度去找答案,也許這個問題其實並沒有那麼難!