自定義View之利用EditText的RightDrawable切換密碼顯示

相信大家都見過如下圖所示的密碼文本輸入框,點(diǎn)擊右方的圖標(biāo)便可切換為明文顯示密碼。

密碼文本輸入框

  在安卓中,我們可以充分利用EditText的RightDrawable來實(shí)現(xiàn)這樣的效果,同理一鍵清除也可實(shí)現(xiàn),其效果圖如下所示。
EditTextPassword

下面對其進(jìn)行簡單介紹,首先是布局文件,很簡單,就一個(gè)ImageView和一個(gè)自定義的EditText,代碼如下所示。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp">
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="8dp"
        android:background="@drawable/locked"/>
 
 
    <blankj.edittextpassword.EditTextPassword
        android:id="@+id/etp_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:background="@drawable/input"
        android:drawableRight="@drawable/eye_grey"
        android:singleLine="true"
        android:textColor="#ff7000"
        android:textCursorDrawable="@null"/>
 
</LinearLayout>

再是對EditText進(jìn)行拓展,首先要獲取到EditText的RightDrawable,代碼如下所示。

final int DRAWABLE_RIGHT = 2;
drawableRight = getCompoundDrawables()[DRAWABLE_RIGHT];

然后定義它的回調(diào)接口和外部訪問接口函數(shù),代碼如下所示。

public interface DrawableRightListener {
    void onDrawableRightClick();
}

public void setDrawableRightListener(DrawableRightListener listener) {
    this.mRightListener = listener;
}

在onTouchEvent()中判斷是否點(diǎn)擊到RightDrawable來設(shè)置是否啟用回調(diào),在此還需保存光標(biāo)位置,再點(diǎn)擊完之后進(jìn)行復(fù)位,優(yōu)化用戶體驗(yàn),具體代碼如下所示。

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (drawableRight != null && mRightListener != null && event.getAction() == MotionEvent.ACTION_UP) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        //判斷點(diǎn)擊是否落在rightDrawable中
        if (x > getWidth() - getTotalPaddingRight() && x < getWidth() && y > 0 && y < getHeight()) {
            //獲取點(diǎn)擊之前光標(biāo)的位置
            int pos = getSelectionStart();
            //設(shè)置回調(diào)
            mRightListener.onDrawableRightClick();
            //恢復(fù)點(diǎn)擊之前光標(biāo)的位置
            this.setSelection(pos);
        }
    }
    return super.onTouchEvent(event);
}

最后就是在使用的地方進(jìn)行定義回調(diào)函數(shù)的作用了,代碼如下所示。

inputETP.setDrawableRightListener(this);

//同樣地可以在這可以實(shí)現(xiàn)其他的效果,比如一鍵清空
@Override
public void onDrawableRightClick() {
    if (mIsShow) {
        inputETP.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.eye_grey, 0) ;
        inputETP.setInputType(InputType.TYPE_CLASS_TEXT | EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);
    } else {
        inputETP.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.eye_orange, 0) ;
        inputETP.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
    }
    mIsShow = !mIsShow ;
}

最后獻(xiàn)上源碼地址:EditTextPassword


原文地址利用EditText的RightDrawable切換密碼顯示

我的自媒體博客Blankj小站,歡迎來逛逛。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,076評論 25 708
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,869評論 18 139
  • ¥開啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程,因...
    小菜c閱讀 6,510評論 0 17
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,200評論 4 61
  • 海上生明月,天涯共此時(shí)。 花好月滿時(shí),最恐人歸遲。 前幾天和朋友一起去看了最近新出的電影《空天獵》,作為一個(gè)不怎么...
    七月和菓子閱讀 149評論 0 0