Android 實(shí)現(xiàn)密碼輸入框動態(tài)明文/密文切換顯示效果
在項(xiàng)目中遇到需要提供給用戶一個密碼輸入框明文/密文切換顯示的需求,在網(wǎng)上搜索一圈都沒有發(fā)現(xiàn)完整的實(shí)現(xiàn),幸而找到了一個實(shí)現(xiàn)的思路。
先上效果圖,看了錄制屏幕gif的教程,無奈手機(jī)太舊系統(tǒng)版本不支持,只有上靜態(tài)圖了。

密碼輸入框動態(tài)明文/密文切換顯示
當(dāng)看到這個效果圖的時候,相信你已經(jīng)猜到大概的思路了。沒錯就是為我們的EditText設(shè)置drawableRight,圖中的眼睛圖片還有一個配對的,是從martial designde的網(wǎng)站下載的,當(dāng)用戶點(diǎn)擊drawableRight時,先動態(tài)的改變drawable,其次,再改變EditText的inputType,就能實(shí)現(xiàn)的我們的目標(biāo)。通過自定義EditText可以很簡單的實(shí)現(xiàn),這個時候第一只攔路虎就出來,EditText的四個方向的Drawable并沒有可以設(shè)置如按鈕點(diǎn)擊一樣的監(jiān)聽listener。此時,我們只能通過模擬點(diǎn)擊來達(dá)到效果了。主要是通過EditText的onTouchEvent的方法來判斷手指抬起時的點(diǎn)的坐標(biāo)是否位于drawableRight區(qū)域內(nèi),如果位于,我們就執(zhí)行動態(tài)改變圖片和inputType的操作。我這里判斷規(guī)則很簡單,點(diǎn)坐標(biāo)的x值大于EditText的寬度 - (圖標(biāo)的寬度+圖標(biāo)的padding+圖標(biāo)到控件的右邊距),并且x的值小于 EditText的寬度 - 圖片到控件的右邊距,為了精確你可以加上Y軸方向的判斷。
幾個關(guān)鍵的方法:
getCompoundDrawables();獲得EditText,left,top,right,bottom四個方向上的drawable,這里我們主要關(guān)注right方向的。
setCompoundDrawables();為EditText設(shè)置四個方向的drawable。注意,設(shè)置之前必須指定drawable的邊界大小,draw的時候會使用到這個值,如果不設(shè)置,圖標(biāo)將不會被畫出來。
設(shè)置EditText的inputype的一種方法,這個type有好幾種類型可以根據(jù)需要決定使用哪種
this.setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);密文密碼 this.setInputType(EditorInfo.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD); 明文密碼
4 明文密文的另一種實(shí)現(xiàn)方式。
setTransformationMethod(TransformationMethod method);文本內(nèi)容的一些單行,點(diǎn)點(diǎn)點(diǎn)(密碼)顯示效果都是由TransformationMethod指定的。
this.setTransformationMethod(HideReturnsTransformationMethod.getInstance());顯示明文密碼 this.setTransformationMethod(PasswordTransformationMethod.getInstance());顯示密文密碼
接下來就直接貼代碼了,思路已經(jīng)理清楚了,代碼注釋也很全。相信應(yīng)該沒有什么大的問題了。
public class TogglePasswordVisibilityEditText extends EditText {
//切換drawable的引用
private Drawable visibilityDrawable;
private boolean visibililty = false;
public TogglePasswordVisibilityEditText(Context context) {
this(context, null);
}
public TogglePasswordVisibilityEditText(Context context, AttributeSet attrs) {
//指定了默認(rèn)的style屬性
this(context, attrs, android.R.attr.editTextStyle);
}
public TogglePasswordVisibilityEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
//獲得該EditText的left ,top ,right,bottom四個方向的drawable
Drawable[] compoundDrawables = getCompoundDrawables();
visibilityDrawable = compoundDrawables[2];
if (visibilityDrawable == null) {
visibilityDrawable = getResources().getDrawable(R.drawable.ic_visibility_off_black_24dp);
}
}
/**
* 用按下的位置來模擬點(diǎn)擊事件
* 當(dāng)按下的點(diǎn)的位置 在 EditText的寬度 - (圖標(biāo)到控件右邊的間距 + 圖標(biāo)的寬度) 和
* EditText的寬度 - 圖標(biāo)到控件右邊的間距 之間就模擬點(diǎn)擊事件,
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
if (action == MotionEvent.ACTION_UP) {
if (getCompoundDrawables()[2] != null) {
boolean xFlag = false;
boolean yFlag = false;
//得到用戶的點(diǎn)擊位置,模擬點(diǎn)擊事件
xFlag = event.getX() > getWidth() - (visibilityDrawable.getIntrinsicWidth() + getCompoundPaddingRight
()) &&
event.getX() < getWidth() - (getTotalPaddingRight() - getCompoundPaddingRight());
if (xFlag) {
visibililty = !visibililty;
if (visibililty) {
visibilityDrawable = getResources().getDrawable(R.drawable.ic_visibility_black_24dp);
/*this.setInputType(EditorInfo.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);*/
this.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
} else {
//隱藏密碼
visibilityDrawable = getResources().getDrawable(R.drawable.ic_visibility_off_black_24dp);
//this.setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);
this.setTransformationMethod(PasswordTransformationMethod.getInstance());
}
//將光標(biāo)定位到指定的位置
CharSequence text = this.getText();
if (text instanceof Spannable) {
Spannable spanText = (Spannable) text;
Selection.setSelection(spanText, text.length());
}
//調(diào)用setCompoundDrawables方法時,必須要為drawable指定大小,不然不會顯示在界面上
visibilityDrawable.setBounds(0, 0, visibilityDrawable.getMinimumWidth(),
visibilityDrawable.getMinimumHeight());
setCompoundDrawables(getCompoundDrawables()[0],
getCompoundDrawables()[1], visibilityDrawable, getCompoundDrawables()[3]);
}
}
}
return super.onTouchEvent(event);
}
}
以上所述是小編給大家介紹的Android 實(shí)現(xiàn)密碼輸入框動態(tài)明文/密文切換顯示效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Android應(yīng)用設(shè)置獨(dú)立的多語言實(shí)戰(zhàn)技巧詳解
這篇文章主要為大家介紹了Android應(yīng)用設(shè)置獨(dú)立的多語言實(shí)戰(zhàn)技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
Android開發(fā)自定義雙向SeekBar拖動條控件
這篇文章主要為大家介紹了Android開發(fā)自定義雙向SeekBar拖動條控件使用實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06
Android實(shí)現(xiàn)懸浮可拖拽的Button
Android開發(fā)人臉識別統(tǒng)計(jì)人臉數(shù)
Android通過滑動實(shí)現(xiàn)Activity跳轉(zhuǎn)(手勢識別器應(yīng)用)
關(guān)于Kotlin委托你必須重視的幾個點(diǎn)
Android中自定義ContentProvider實(shí)例

