Android edittext密碼明文顯示基於TextInputLayout

Android edittext密碼明文顯示基於TextInputLayout。TextInputLayout自帶的那個眼睛點擊後是隻能加深背景顏色,老板看瞭覺得不滿意就讓我修改 OTZ,但是我又不想放棄TextInputLayout顯示文字的酷炫效果,所以就有瞭下文。
圖片一,這是默認的效果
於是我百度瞭一下如何隱藏TextInputLayout眼睛圖標,於是看到瞭這個屬性
TextInputLayout設置眼睛圖標不顯示app:passwordToggleEnabled=”false”,然後加上自己的樣式實現瞭這個效果。
圖片二,實現瞭點擊眼睛顯示密碼
實現方式如下
XML代碼
android:id="@+id/passwordWrapper"
android:layout_width="230dp"
android:layout_height="wrap_content"
android:layout_below="@id/usernameWrapper"
app:passwordToggleEnabled="false">
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="密碼"
android:textSize="14sp"
android:inputType="numberPassword"/>

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樣式

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。
默認顯示的效果
明文顯示密碼的效果
總結:以後遇到問題之前先去嘗試自己解決,不要直接百度去找答案,也許這個問題其實並沒有那麼難!

You May Also Like