帶有一鍵清空功能的EditText

介紹#

很常見的一個(gè)功能稻薇，大部分app在登錄界面都會(huì)實(shí)現(xiàn)這個(gè)功能了。因?yàn)樵诰蚪鹕峡戳艘黄愃频奈恼拢詻Q定自己實(shí)踐一下晓殊。
　　下圖為實(shí)現(xiàn)效果：

一鍵清空

常見實(shí)現(xiàn)方法#

組合控件，EditText + Button
　實(shí)現(xiàn)簡(jiǎn)單伤提，可以單獨(dú)使用巫俺。
自定義View，繼承EditText肿男，通過EditText自帶的Drawable來實(shí)現(xiàn)介汹。
　布局復(fù)雜度低

繼承EditText來實(shí)現(xiàn)一鍵清功能#

需要考慮的問題##

根據(jù)業(yè)務(wù)場(chǎng)景，有以下幾個(gè)問題需要我們?cè)趯?shí)現(xiàn)中考慮到：

怎么添加清空按鈕
怎么處理點(diǎn)擊事件
處理清空按鈕的顯示狀態(tài)
3.1 有文字時(shí)才顯示清空按鈕舶沛，沒有文字則掩藏嘹承。
3.2 獲取焦點(diǎn)時(shí)才顯示清空按鈕，沒有焦點(diǎn)時(shí)則隱藏
3.3 EditText的setErrot方法調(diào)用后如庭，清空按鈕怎么處理
添加自定義的屬性

實(shí)現(xiàn)流程##

帶著上面的問題我們開始一步步實(shí)現(xiàn)自定義View赶撰。

步驟1：繼承EditText，實(shí)現(xiàn)構(gòu)造方法###

public class ClearableEditText extends EditText
        implements EditText.OnFocusChangeListener {

    public static final String TAG = "ClearableEditText";

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

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

    public ClearableEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public ClearableEditText(Context context, AttributeSet attrs, int defStyleAttr, int
            defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs, defStyleAttr, defStyleRes);
    }
}

步驟二：添加清空按鈕###

TextView中有一個(gè)靜態(tài)內(nèi)部類Drawables柱彻，這個(gè)類的作用是用來保存和顯示TextView上下左右的Drawable豪娜。通過android:drawable* 來設(shè)置的drawable icon就保存在Drawables中。

通過調(diào)用 Drawable drawables[] = getCompoundDrawables();方法可以獲取到Drawables中的left, top, right, and bottom的Drawable數(shù)組哟楷。而drawables[2]正好就是顯示在TextView右邊的drawable icon瘤载，所以這個(gè)drawable 正好滿足我們的需求。


    private Drawable mClearDrawable;
    /**
     * Right Drawable 是否可見
     */
    private boolean mIsClearVisible;

    private void init(Context context, AttributeSet attrs, int defStyleAttr, int
            defStyleRes) {

        Drawable drawables[] = getCompoundDrawables();
        mClearDrawable = drawables[2]; // Right Drawable;

        // 第一次隱藏
        setClearDrawableVisible(false);
    }

步驟三：處理點(diǎn)擊事件###

由于Drawable沒辦法接收處理TouchEvent卖擅，所以我們只能通過觸摸區(qū)域來判斷鸣奔，當(dāng)觸摸事件的坐標(biāo)在right drawable的范圍內(nèi)的時(shí)候就觸發(fā)點(diǎn)擊事件。

覆寫onTouchEvent事件惩阶，這里我只判斷了x軸的范圍挎狸。那為什么不加上y軸的判斷呢？個(gè)人認(rèn)為沒什么必要断楷。

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        // error drawable 不顯示 && clear drawable 顯示 && action up
        if (getError() == null && mIsClearVisible && event.getAction() == MotionEvent.ACTION_UP) {

            float x = event.getX();
            if (x >= getWidth() - getTotalPaddingRight() && x <= getWidth() - getPaddingRight()) {
                Log.d(TAG, "點(diǎn)擊清除按鈕锨匆！");

                clearText();
            }
        }

        return super.onTouchEvent(event);
    }

步驟四：處理清空按鈕的顯示狀態(tài)###

有三種情況需要考慮：
1 有文字時(shí)才顯示清空按鈕，沒有文字則掩藏冬筒。
2 獲取焦點(diǎn)時(shí)才顯示清空按鈕恐锣，沒有焦點(diǎn)時(shí)則隱藏
3 EditText的setErrot方法調(diào)用后茅主，清空按鈕怎么處理

為了解決1和2的兩個(gè)問題，我們需要為EditText監(jiān)聽文字輸入的狀態(tài)和獲取失去焦點(diǎn)的狀態(tài)土榴，因此我們需要實(shí)現(xiàn)onFocusChange和addTextChangedListener诀姚。

    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        
        if (getError() == null) {
            if (hasFocus) {
                if (getText().length() > 0) {
                    setClearDrawableVisible(true);
                }
            } else {
                setClearDrawableVisible(false);
            }
        }
    }

        // 添加TextChangedListener
        addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                Log.d(TAG, "onTextChanged " + s);

                setClearDrawableVisible(s.length() > 0);
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });

setClearDrawableVisible的具體實(shí)現(xiàn)：
我們可以通過setCompoundDrawables來設(shè)置TextView的left、top玷禽、right赫段、bottom drawable。傳遞null表示不需要顯示矢赁。

    /**
     * 設(shè)置Right Drawable是否可見
     *
     * @param isVisible true for visible , false for invisible
     */
    public void setClearDrawableVisible(boolean isVisible) {

        setCompoundDrawables(getCompoundDrawables()[0], getCompoundDrawables()[1],
                isVisible ? mClearDrawable : null, getCompoundDrawables()[3]);

        mIsClearVisible = isVisible;
    }

最后考慮第三種情況糯笙，EditText的setErrot方法可以給出校驗(yàn)提示，從下圖中大致可以看出這個(gè)提示由兩部分組成坯台，一個(gè)icon和一個(gè)popup window炬丸，而這個(gè)icon正好占據(jù)了我們上面提到的right drawable的位置也就是我們的清除按鈕需要用到的位置瘫寝。那么error icon是不是也用了right drawable來實(shí)現(xiàn)的呢蜒蕾？

setError.jpg

在TextView中有這樣一個(gè)方法applyErrorDrawableIfNeeded，從方法名就可以猜到它就是用來設(shè)置error drawable的焕阿，最終通過mShowing[Drawables.RIGHT] = mDrawableError; 把error drawable 放到了Drawables.RIGHT中咪啡。哦，對(duì)了暮屡。撤摸。這一切都是基于LTR的Layout方向。

            // then, if needed, assign the Error drawable to the correct location
            if (mDrawableError != null) {
                switch(layoutDirection) {
                    case LAYOUT_DIRECTION_RTL:
                        mDrawableSaved = DRAWABLE_LEFT;

                        mDrawableTemp = mShowing[Drawables.LEFT];
                        mDrawableSizeTemp = mDrawableSizeLeft;
                        mDrawableHeightTemp = mDrawableHeightLeft;

                        mShowing[Drawables.LEFT] = mDrawableError;
                        mDrawableSizeLeft = mDrawableSizeError;
                        mDrawableHeightLeft = mDrawableHeightError;
                        break;
                    case LAYOUT_DIRECTION_LTR:
                    default:
                        mDrawableSaved = DRAWABLE_RIGHT;

                        mDrawableTemp = mShowing[Drawables.RIGHT];
                        mDrawableSizeTemp = mDrawableSizeRight;
                        mDrawableHeightTemp = mDrawableHeightRight;

                        mShowing[Drawables.RIGHT] = mDrawableError;
                        mDrawableSizeRight = mDrawableSizeError;
                        mDrawableHeightRight = mDrawableHeightError;
                        break;
                }
            }

那么我們就可以處理第三種情況褒纲。覆寫setError方法准夷。想要知道error drawable是否顯示，可以通過“getError() == null”來判斷莺掠，為ture則表示不顯示衫嵌，false表示已顯示。

    @Override
    public void setError(CharSequence error, Drawable icon) {
        if (error != null) {
            setClearDrawableVisible(true);
        }
        super.setError(error, icon);
    }

為什么是覆寫setError方法彻秆？我們可以通過TextView.sendAfterTextChanged來找到答案楔绞。當(dāng)EditText中重新輸入文字的后，sendAfterTextChanged會(huì)被調(diào)用唇兑，在sendAfterTextChanged方法中會(huì)調(diào)用hideErrorIfUnchanged酒朵，而 hideErrorIfUnchanged則是直接調(diào)用了setError(null, null)。通過setError(null, null)方法隱藏 error drawable扎附。

步驟五：添加自定義屬性###

attrs.xml中申明style

    <declare-styleable name="ClearableEditText">

        <attr name="right_drawable_color" format="color|reference" />

    </declare-styleable>

在init函數(shù)中獲取自定義屬性并做相關(guān)處理蔫耽。

        final Resources.Theme theme = context.getTheme();

        TypedArray a = theme.obtainStyledAttributes(attrs, R.styleable.ClearableEditText,
                defStyleAttr, defStyleRes);

        int rightDrawableColor = a.getColor(R.styleable.ClearableEditText_right_drawable_color,
                Color.BLACK);

        a.recycle();

        // 給mRightDrawable上色
        DrawableCompat.setTint(mClearDrawable, rightDrawableColor);

實(shí)例效果#