EditText實現(xiàn)密碼顯示和隱藏

很多場景都有會用到EditText,用來接收用戶輸入的一些信息拘央,當EditText是密碼輸入類型的時候疚俱,用戶輸入的信息都會被系統(tǒng)用原點給代替,保證其他人無法看見輸入信息博敬,但是有些時候我們自己也想看看自己輸入的內容是否正確友浸,那應該怎么樣呢?
EditText可以通過setTransformationMethod設置不同的值可以顯示和隱藏文本內容偏窝。
顯示為明文

setTransformationMethod(HideReturnsTransformationMethod.getInstance());

顯示為密文

setTransformationMethod(PasswordTransformationMethod.getInstance());

今天這里就是把這些小東西直接封裝成一個自定義的EditText收恢,可以直接使用。

package 你的包名;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.text.Editable;
import android.text.Selection;
import android.text.Spannable;
import android.text.TextWatcher;
import android.text.method.HideReturnsTransformationMethod;
import android.text.method.PasswordTransformationMethod;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnFocusChangeListener;
import android.view.animation.Animation;
import android.view.animation.CycleInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.EditText;
import com.megawave.android.R;


public class PasswordToggleEditText extends EditText implements
        OnFocusChangeListener, TextWatcher {
    /**
     * 眼睛按鈕
     */
    private Drawable mToggleDrawable;

    public PasswordToggleEditText(Context context) {
        this(context, null);
    }

    public PasswordToggleEditText(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.editTextStyle);
    }

    public PasswordToggleEditText(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    /**
     * 初始化右邊小眼睛的控件
     */
    private void init() {
        //獲取EditText的DrawableRight,主要是通過xml或者外部設置右邊的按鈕祭往,如果沒有設置就采用默認的
        mToggleDrawable = getCompoundDrawables()[2];
        if (mToggleDrawable == null) {
            mToggleDrawable = ContextCompat.getDrawable(getContext(),R.drawable.icon_toggle);
        }
        mToggleDrawable.setBounds(0, 0, mToggleDrawable.getIntrinsicWidth(), mToggleDrawable.getIntrinsicHeight());
        setToggleIconVisible(false);
        setOnFocusChangeListener(this);
        addTextChangedListener(this);
    }


    /**
     * 因為我們不能直接給EditText設置點擊事件伦意,所以我們用記住我們按下的位置來模擬點擊事件
     * 當我們按下的位置 在  EditText的寬度 - 圖標到控件右邊的間距 - 圖標的寬度  和
     * EditText的寬度 - 圖標到控件右邊的間距之間我們就算點擊了圖標,豎直方向沒有考慮
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (getCompoundDrawables()[2] != null) {
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                boolean touchable = event.getX() > (getWidth()
                        - getPaddingRight() - mToggleDrawable.getIntrinsicWidth())
                        && (event.getX() < ((getWidth() - getPaddingRight())));
                if (touchable) {
                    //顯示密碼明文
                    setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                    postInvalidate();
                    CharSequence charSequence = getText();
                    //為了保證體驗效果硼补,需要保持輸入焦點在文本最后一位
                    if (charSequence != null) {
                        Spannable spanText = (Spannable) charSequence;
                        Selection.setSelection(spanText, charSequence.length());
                    }
                }
            }else if(event.getAction() == MotionEvent.ACTION_UP){
                //隱藏密碼明文
                setTransformationMethod(PasswordTransformationMethod.getInstance());
                postInvalidate();
                setSelection(getText().length());
            }
        }

        return super.onTouchEvent(event);
    }

    /**
     * 當EditText焦點發(fā)生變化的時候驮肉,判斷里面字符串長度設置清除圖標的顯示與隱藏
     */
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            setToggleIconVisible(getText().length() > 0);
        } else {
            setToggleIconVisible(false);
            setShakeAnimation();
        }
    }


    /**
     * 設置清除圖標的顯示與隱藏,調用setCompoundDrawables為EditText繪制上去
     * @param visible
     */
    public void setToggleIconVisible(boolean visible) {
        Drawable right = visible ? mToggleDrawable : null;
        setCompoundDrawables(getCompoundDrawables()[0],
                getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
    }


    /**
     * 當輸入框里面內容發(fā)生變化的時候回調的方法
     */
    @Override
    public void onTextChanged(CharSequence s, int start, int count,
                              int after) {
        setToggleIconVisible(s.length() > 0);
    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count,
                                  int after) {

    }

    @Override
    public void afterTextChanged(Editable s) {

    }


    /**
     * 設置晃動動畫
     */
    public void setShakeAnimation(){
        this.setAnimation(shakeAnimation(3));
    }


    /**
     * 晃動動畫
     * @param counts 1秒鐘晃動多少下
     * @return
     */
    public Animation shakeAnimation(int counts){
        Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0);
        translateAnimation.setInterpolator(new CycleInterpolator(counts));
        translateAnimation.setDuration(500);
        return translateAnimation;
    }
}

需要用到的素材:


icon_toggle.png

我們都知道EditText可以設置上下左右的圖片(如果你不知道括勺,那現(xiàn)在就知道了)缆八,其實這里我也是把小眼睛設置到EditText的右邊,然后自己實現(xiàn)onTouchEvent來監(jiān)聽當前手按下的位置是不是按中了小眼睛疾捍,如果是就顯示密碼奈辰,手離開就隱藏密碼。

device-2016-12-16-113859.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末乱豆,一起剝皮案震驚了整個濱河市奖恰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌宛裕,老刑警劉巖瑟啃,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異揩尸,居然都是意外死亡蛹屿,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進店門岩榆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來错负,“玉大人坟瓢,你說我怎么就攤上這事∮倘觯” “怎么了折联?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長识颊。 經常有香客問我诚镰,道長,這世上最難降的妖魔是什么祥款? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任清笨,我火速辦了婚禮,結果婚禮上刃跛,老公的妹妹穿的比我還像新娘函筋。我一直安慰自己,他們只是感情好奠伪,可當我...
    茶點故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著首懈,像睡著了一般绊率。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上究履,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天滤否,我揣著相機與錄音,去河邊找鬼最仑。 笑死藐俺,一個胖子當著我的面吹牛,可吹牛的內容都是我干的泥彤。 我是一名探鬼主播欲芹,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼吟吝!你這毒婦竟也來了菱父?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤剑逃,失蹤者是張志新(化名)和其女友劉穎浙宜,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蛹磺,經...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡粟瞬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了萤捆。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片裙品。...
    茶點故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡俗批,死狀恐怖,靈堂內的尸體忽然破棺而出清酥,到底是詐尸還是另有隱情扶镀,我是刑警寧澤,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布焰轻,位于F島的核電站臭觉,受9級特大地震影響,放射性物質發(fā)生泄漏辱志。R本人自食惡果不足惜蝠筑,卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望揩懒。 院中可真熱鬧什乙,春花似錦、人聲如沸已球。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽智亮。三九已至忆某,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間阔蛉,已是汗流浹背弃舒。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留状原,地道東北人聋呢。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像颠区,于是被迫代替她去往敵國和親削锰。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,446評論 2 348

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,732評論 25 707
  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程毕莱,因...
    小菜c閱讀 6,365評論 0 17
  • 一、為何要顯示密碼 長久以來质和,密碼都是一個為人詬病的可用性問題稳摄。由于對安全性的過度要求(對字符數(shù)、特殊符號等的限制...
    三達不留點gpj閱讀 6,870評論 1 10
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理饲宿,服務發(fā)現(xiàn)厦酬,斷路器胆描,智...
    卡卡羅2017閱讀 134,628評論 18 139
  • 孤獨是人生的必修課昌讲。無論你此時此刻在做什么,孤獨的一個人的時光我們一定會經歷减噪,生為人誰都不可能是漏網之魚! 連續(xù)躺...
    盒子無常閱讀 350評論 4 2