帶有一鍵清空功能的EditText
介紹
很常見的一個功能，大部分app在登入介面都會實現這個功能了。因為在掘金上看了一篇類似的文章，所以決定自己實踐一下。
下圖為實現效果：
常見實現方法
- 組合控制元件，EditText + Button
實現簡單，可以單獨使用。 - 自定義View，繼承EditText，通過EditText自帶的Drawable來實現。
佈局複雜度低
繼承EditText來實現一鍵清功能
需要考慮的問題
根據業務場景，有以下幾個問題需要我們在實現中考慮到：
1. 怎麼新增清空按鈕
2. 怎麼處理點選事件
3. 處理清空按鈕的顯示狀態
3.1 有文字時才顯示清空按鈕，沒有文字則掩藏。
3.2 獲取焦點時才顯示清空按鈕，沒有焦點時則隱藏
3.3 EditText的setErrot方法呼叫後，清空按鈕怎麼處理
4. 新增自定義的屬性
實現流程
帶著上面的問題我們開始一步步實現自定義View。
步驟1：繼承EditText，實現構造方法
public class ClearableEditText extends EditText
implements EditText.OnFocusChangeListener {
public static final String TAG = "ClearableEditText";
public ClearableEditText(Context context) {
this(context, null);
}
public 步驟二：新增清空按鈕
TextView中有一個靜態內部類Drawables， 這個類的作用是用來儲存和顯示TextView上下左右的Drawable。通過android:drawable* 來設定的drawable icon就儲存在Drawables中。
通過呼叫 Drawable drawables[] = getCompoundDrawables();方法可以獲取到Drawables中的left, top, right, and bottom的Drawable陣列。而drawables[2]正好就是顯示在TextView右邊的drawable icon，所以這個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);
}步驟三：處理點選事件
由於Drawable沒辦法接收處理TouchEvent，所以我們只能通過觸控區域來判斷，當觸控事件的座標在right drawable的範圍內的時候就觸發點選事件。
覆寫onTouchEvent事件，這裡我只判斷了x軸的範圍。那為什麼不加上y軸的判斷呢？個人認為沒什麼必要。
@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, "點選清除按鈕！");
clearText();
}
}
return super.onTouchEvent(event);
}
步驟四：處理清空按鈕的顯示狀態
有三種情況需要考慮：
1 有文字時才顯示清空按鈕，沒有文字則掩藏。
2 獲取焦點時才顯示清空按鈕，沒有焦點時則隱藏
3 EditText的setErrot方法呼叫後，清空按鈕怎麼處理
為了解決1和2的兩個問題，我們需要為EditText監聽文字輸入的狀態和獲取失去焦點的狀態，因此我們需要實現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的具體實現：
我們可以通過setCompoundDrawables來設定TextView的left、top、right、bottom drawable。傳遞null表示不需要顯示。
/**
* 設定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方法可以給出校驗提示，從下圖中大致可以看出這個提示由兩部分組成，一個icon和一個popup window，而這個icon正好佔據了我們上面提到的right drawable的位置也就是我們的清除按鈕需要用到的位置。那麼error icon是不是也用了right drawable來實現的呢？
在TextView中有這樣一個方法applyErrorDrawableIfNeeded，從方法名就可以猜到它就是用來設定error drawable的，最終通過mShowing[Drawables.RIGHT] = mDrawableError; 把error drawable 放到了Drawables.RIGHT中。哦，對了。。這一切都是基於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來找到答案。當EditText中重新輸入文字的後，sendAfterTextChanged會被呼叫，在sendAfterTextChanged方法中會呼叫hideErrorIfUnchanged，而 hideErrorIfUnchanged則是直接呼叫了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函式中獲取自定義屬性並做相關處理。
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);例項效果
