本部落格內容

• 自定義控制元件 EditText （繼承 v7 包）
• xml 檔案 控制元件使用 自定義的控制元件

效果圖：

DeleteEditText.java

public class DeleteEditText extends AppCompatEditText {

    private Drawable mRightDrable; // 動態設定右邊圖片的顯示
    // 控制元件是否獲得焦點標誌位
    boolean mIsHasFocus;

    public DeleteEditText(Context context) {
        super(context);
        init();
    }

    public DeleteEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public DeleteEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        // 本方法 獲得控制元件 左上右下 四個方位插入的圖片
        Drawable[] drawables = this.getCompoundDrawables();
        mRightDrable = drawables[2];  //  0 1 2 3 所以就對應 左上 右 下
        
        // 新增文字改變監聽
        this.addTextChangedListener(new TextWatcherImpl());
        // 新增觸控改變監聽
        this.setOnFocusChangeListener(new OnFocusChangeListenerImpl());
        // 初始設定所有圖片不可見
        setClearDrawableVisible(false);
    }

    private class TextWatcherImpl implements 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) {

        }

        @Override
        public void afterTextChanged(Editable s) {
            boolean isNoNull = getText().toString().length() >= 1;
            setClearDrawableVisible(isNoNull);
        }
    }

    public class OnFocusChangeListenerImpl implements OnFocusChangeListener {

        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            mIsHasFocus = hasFocus;
            if (mIsHasFocus) {
                // 如果獲得焦點並且判斷輸入的內容不為空，則顯示刪除圖示
                boolean isNoNull = getText().toString().length() >= 1;
                setClearDrawableVisible(isNoNull);
            } else {
                // 否則隱藏圖示
                setClearDrawableVisible(false);
            }
        }
    }

    // 控制右邊的圖片顯示與否
    private void setClearDrawableVisible(boolean isNoNull) {
        Drawable rightDrawable;
        if (isNoNull) {
            rightDrawable = mRightDrable;
        } else {
            rightDrawable = null;
        }
        // 使用程式碼設定改控制元件 left,top,right,bottom 處圖示
        setCompoundDrawables(getCompoundDrawables()[0],
                getCompoundDrawables()[1], rightDrawable,
                getCompoundDrawables()[3]);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_UP: // 擡手指 事件
                // 刪除圖片右側到 EditText 控制元件 最左側距離
                int length1 = getWidth() - getPaddingRight();
                // 刪除圖片左側到 EditText 控制元件最左側距離
                int length2 = getWidth() - getTotalPaddingRight();
                // 判斷 單擊位置是否在圖片上
                boolean isClean = (event.getX() > length2)
                        &&
                        (event.getX() < length1);
                if (isClean)
                    setText("");
                break;
            default:
                break;
        }


        return super.onTouchEvent(event);

    }
}

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/title"
        android:gravity="center"
        android:text="登入"
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <com.example.objectanimator_1.DeleteEditText
        android:id="@+id/det_test"
        android:drawableLeft="@mipmap/ic_launcher_round"
        android:drawableRight="@mipmap/ic_launcher_round"
        android:hint="請輸入賬號"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.example.objectanimator_1.DeleteEditText
        android:id="@+id/user_password_input"
        android:layout_marginTop="10dp"
        android:drawableLeft="@mipmap/ic_launcher_round"
        android:drawableRight="@mipmap/ic_launcher_round"
        android:hint="請輸入密碼"
        android:inputType="textPassword"
        android:singleLine="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>