介紹#
很常見的一個功能，大部分app在登錄界面都會實現這個功能了。因為在掘金上看了一篇類似的文章，所以決定自己實踐一下。
下圖為實現效果：
常見實現方法#
- 組合控件，EditText + Button
實現簡單，可以單獨使用。 - 自定義View，繼承EditText，通過EditText自帶的Drawable來實現。
布局復雜度低
繼承EditText來實現一鍵清功能#
需要考慮的問題##
根據業務場景，有以下幾個問題需要我們在實現中考慮到：
- 怎么添加清空按鈕
- 怎么處理點擊事件
- 處理清空按鈕的顯示狀態
3.1 有文字時才顯示清空按鈕，沒有文字則掩藏。
3.2 獲取焦點時才顯示清空按鈕，沒有焦點時則隱藏
3.3 EditText的setErrot方法調用后，清空按鈕怎么處理 - 添加自定義的屬性
實現流程##
帶著上面的問題我們開始一步步實現自定義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 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中有一個靜態內部類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);
實例效果#
