1. 程式人生 > >Android之利用TextWatcher製作自定義編輯文字框

Android之利用TextWatcher製作自定義編輯文字框

自定義編輯文字框怎麼造呢?疑問

利用Textwatcher觀察者來自定義。

首先,我們看下程式碼:

<span style="font-size:18px;">package com.example.boom.messageproject.ui;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.EditText;

import com.example.boom.messageproject.R;

/**
 * Created by Boom on 2016/8/2.
 */
public class CustomEditText extends EditText  {
    Context mcontext;
    Drawable img;

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

    public CustomEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        mcontext = context;
        init();
    }

    private void init() {
        this.img = mcontext.getResources().getDrawable(R.mipmap.icon_clear);
        this.setSingleLine(true);
        this.addTextChangedListener(new CustomTextWatcher());
        this.setOnFocusChangeListener(new OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                setDrawable(hasFocus);
            }
        });
    }



    class CustomTextWatcher 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) {
            setDrawable(true);
        }
    }

    private void setDrawable(boolean hasFouce) {
        if (length() >= 1 && hasFouce) {
            setCompoundDrawablesWithIntrinsicBounds(null, null, img, null);
        } else {
            setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
            ;
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        final int DRAWABLE_RIGHT = 2;
        Drawable rightIcon = getCompoundDrawables()[DRAWABLE_RIGHT];
        if (rightIcon != null && event.getAction() == MotionEvent.ACTION_UP) {
            int leftEdgeOfRightDrawable = getRight() - getPaddingRight()
                    - rightIcon.getBounds().width();
            if (event.getRawX() >= leftEdgeOfRightDrawable) {
                setText("");
            }
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void finalize() throws Throwable {
        img = null;
        super.finalize();
    }
}
</span>
功能性程式碼:

1.設定自定義觀察者並新增監察者

<span style="font-size:18px;"> class CustomTextWatcher 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) {
            setDrawable(true);
        }
    }
</span>
<span style="font-size:18px;"> this.addTextChangedListener(new CustomTextWatcher());</span>
2.設定圖片位置的顯示與不顯示,同時包括切換焦點
<span style="font-size:18px;">private void setDrawable(boolean hasFouce) {
        if (length() >= 1 && hasFouce) {
            setCompoundDrawablesWithIntrinsicBounds(null, null, img, null);
        } else {
            setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
            ;
        }
    }</span>
<span style="font-size:18px;">        this.setOnFocusChangeListener(new OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                setDrawable(hasFocus);
            }
        });</span>
3.處理點選刪除圖片  刪除編輯框的內容
<span style="font-size:18px;">  @Override
    public boolean onTouchEvent(MotionEvent event) {
        final int DRAWABLE_RIGHT = 2;
        Drawable rightIcon = getCompoundDrawables()[DRAWABLE_RIGHT];
        if (rightIcon != null && event.getAction() == MotionEvent.ACTION_UP) {
            int leftEdgeOfRightDrawable = getRight() - getPaddingRight()
                    - rightIcon.getBounds().width();
            if (event.getRawX() >= leftEdgeOfRightDrawable) {
                setText("");
            }
        }
        return super.onTouchEvent(event);
    }</span>
效果圖: