和我一起實現EditText一鍵清空功能
序
在實際專案中我們經常看到這樣的效果:
這就是我們常說的一鍵清除功能,Android並沒有自帶的API供我們使用,所以我們需要自己來編寫,下面我將介紹常見實現方式.
1.常見的實現方式
- 在EditText的基礎上進行拓展,俗稱自定義View
作者:tangqing
標題:自定義View登入註冊介面EditText-實現一鍵清空
地址:http://www.tqcto.com/article/mobile/2899.html
2種方式的優劣:
- 第一種方式:實現的方式簡單,容易上手,但是增加了佈局的複雜度
- 第二種方式:拓展EditText有一定的難度,可以使用起來會方便很多
2.自定義EditText實現一鍵清除功能
這裡我會基於第二種實現方式一步步實現一鍵清除的EditText控制元件,相信你也會選擇第二種實現方式吧,畢竟一切為了優化(偷懶)。
步驟1:建立一個控制元件繼承於EditText並實現其構造方法
public class OneKeyClearEditText extends AppCompatEditText {
public OneKeyClearEditText(Context context) {
this(context, null);
}
public OneKeyClearEditText (Context context, AttributeSet attrs) {
this(context, attrs, R.attr.editTextStyle);
}
public OneKeyClearEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
特別說明:R.attr.editTextStyle是原始碼中AppCompatEditText,由於使用了AppCompatEditText,所以我們需要依賴V7包,如果沒有可以簡信我,主題也需要是Theme.AppCompat,我這裡為了看的清楚在AndroidManifest.xml中使用的主題是:Theme.AppCompat.Light。
步驟2:利用EditText的CompoundDrawables設定刪除圖示
private Drawable mClearDrawable;// 一鍵刪除的按鈕
private int colorAccent;//獲得主題的顏色
@SuppressLint("InlinedApi")
public OneKeyClearEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.getTheme()
.obtainStyledAttributes(new int[] {android.R.attr.colorAccent});
colorAccent = array.getColor(0, 0xFF00FF);
array.recycle();
initClearDrawable(context);
}
@SuppressLint("NewApi")
private void initClearDrawable(Context context) {
mClearDrawable = getCompoundDrawables()[2];// 獲取EditText的DrawableRight,假如沒有設定我們就使用預設的圖片
if (mClearDrawable == null) {
mClearDrawable = getResources().getDrawable(R.drawable.ic_delete_01, context.getTheme());
}
DrawableCompat.setTint(mClearDrawable, colorAccent);//設定刪除按鈕的顏色和TextColor的顏色一致
mClearDrawable.setBounds(0, 0, (int) getTextSize(), (int) getTextSize());//設定Drawable的寬高和TextSize的大小一致
setClearIconVisible(true);
}
/**
* 設定清除圖示的顯示與隱藏,呼叫setCompoundDrawables為EditText繪製上去
*
* @param visible
*/
private void setClearIconVisible(boolean visible) {
Drawable right = visible ? mClearDrawable : null;
setCompoundDrawables(getCompoundDrawables()[0], getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
}
這一步主要是為了設定刪除的圖示,圖示的顏色和colorAccent顏色一致,大小和TextSize一致,解決適配的問題。
先在佈局設定colorAccent為紅色
<!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="colorAccent">#ff0000</item>
</style>
下面我們看看效果圖:
效果還是不錯的,到這裡基本的UI樣式就完成了,目前的控制元件還只是個“花瓶”,點選的方法還沒有實現,接下來我們來實現點選的事件。
步驟3:實現刪除圖示的點選事件
我們知道Drawable本身沒有點選事件,那麼怎麼辦呢?這裡從寫了onTouch事件,然後模擬點選的區域(圖示大小)來現實點選事件:
@Override
public boolean onTouchEvent(MotionEvent event) {
if (mClearDrawable != null && event.getAction() == MotionEvent.ACTION_UP) {
int x = (int) event.getX();
// 判斷觸控點是否在水平範圍內
boolean isInnerWidth = (x > (getWidth() - getTotalPaddingRight()))
&& (x < (getWidth() - getPaddingRight()));
// 獲取刪除圖示的邊界,返回一個Rect物件
Rect rect = mClearDrawable.getBounds();
// 獲取刪除圖示的高度
int height = rect.height();
int y = (int) event.getY();
// 計算圖示底部到控制元件底部的距離
int distance = (getHeight() - height) / 2;
// 判斷觸控點是否在豎直範圍內(可能會有點誤差)
// 觸控點的縱座標在distance到(distance+圖示自身的高度)之內,則視為點中刪除圖示
boolean isInnerHeight = (y > distance) && (y < (distance + height));
if (isInnerHeight && isInnerWidth) {
this.setText("");
Toast.makeText(getContext(), "一鍵清除", Toast.LENGTH_SHORT).show();//為了看清效果,測試
}
}
return super.onTouchEvent(event);
}
如果在EditText的範圍和圖示的範圍之類,則表示有效。
下面看看效果:
到現在已經實現了一鍵清除功能了,可是功能還不夠完善,我們需要在獲取焦點並且有文字內容的時候才顯示刪除圖示,下面繼續開始優化。
步驟4: 對獲取焦點已經文字輸入進行監聽優化體驗
private boolean hasFocus;// 控制元件是否有焦點
private void initClearDrawable(Context context) {
...
setClearIconVisible(true);
// 設定焦點改變的監聽
setOnFocusChangeListener(this);
// 設定輸入框裡面內容發生改變的監聽
addTextChangedListener(this);
}
@Override
public void onFocusChange(View v, boolean hasFocus) {
this.hasFocus = hasFocus;
if (hasFocus) {
setClearIconVisible(getText().length() > 0);
} else {
setClearIconVisible(false);
}
}
/**
* 當輸入框裡面內容發生變化的時候回撥的方法
*/
@Override
public void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
if (hasFocus) {
setClearIconVisible(text.length() > 0);
}
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
// TODO Auto-generated method stub
}
@Override
public void afterTextChanged(Editable s) {
// TODO Auto-generated method stub
}
基本程式碼就是這樣,在獲取焦點和文字輸入之前判斷是否有文字,從而決定是否顯示圖示。
* 效果:*
3.優化OneKeyClearEditText(一鍵刪除控制元件)
上面基本是實現了一鍵清除的功能,對於圖示的顏色,有些人可能需要自己定義,這裡補充一個方法,
新增自定義屬性
TypedArray array2 = context.obtainStyledAttributes(attrs,R.styleable.OneKeyClearEditText);
DrawableColor = array2.getColor(R.styleable.OneKeyClearEditText_deletecolor, colorAccent);
array2.recycle();
...
DrawableCompat.setTint(mClearDrawable, DrawableColor);// 設定刪除按鈕的顏色和TextColor的顏色一致
values-attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="OneKeyClearEditText">
<attr name="deletecolor" format="reference|color" />
</declare-styleable>
</resources>
使用
<com.yh.clearedittextdemo.view.OneKeyClearEditText
android:id="@+id/okcet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableRight="@drawable/ic_delete_03"
android:hint="請輸入手機"
android:textCursorDrawable="@drawable/cursor"
app:deletecolor="@android:color/holo_orange_dark" />
4.原始碼地址
5.感謝
6.總結
核心技術:
- 通過對CompoundDrawables的設定來確定刪除圖示
- 通過獲得系統的Theme來關聯刪除圖示和警告字型的顏色
- 通過DrawableCompat來渲染刪除圖示
- 通過對onTouch()的監聽來模擬點選區域
- 通過對View.OnFocusChangeListener, TextWatcher的監聽來優化使用者體驗
接下來我將實現EditText的密碼可見與隱藏的功能。
如有侵權,麻煩簡信我,我會及時修改。
如果這篇文章對你有幫助,請點下“喜歡”~