自定义延时查询控件---valen

当查询已经成标配

查询是已成为每个应用常用的功能，也正是这样前端后对查询的设计需求也日益增加，本文针对前端（Android端）查询控件做一个例子；

控件设计与逻辑

产品的设计UI图;

要达到如下

1|、默认第一张图，中间展示默认提示文字，左边搜索图标；

2、输入文字后提示语消失，搜索的文字在后面，另外右边显示取消的图标

3、外加一个性能需求，我们搜索没必要每输入一个字都请求一次后台数据，有时候用户很快输入很多字符，就会导致大量没用的期过后，可以输入完等一段时间没输入才发起查询请求；

具体代码实现

先贴出代码后面做关键的解释

public class SearchDisplayView extends EditText {
    private static int COUNTDOWN_INTERVAL = 300;
    private DelayAfterTextChangedListener mDelayTextChangedListener;

    public static interface DelayAfterTextChangedListener {
        public void afterTextChanged(String keyword);
    }

    private CountDownTimer mCountDownTimer = new CountDownTimer(COUNTDOWN_INTERVAL, COUNTDOWN_INTERVAL) {

        @Override
        public void onTick(long millisUntilFinished) {
            //间隔执行
        }

        @Override
        public void onFinish() {
            if(mDelayTextChangedListener != null) {
                mDelayTextChangedListener.afterTextChanged(getText().toString());
            }
        }
    };

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

    public SearchDisplayView(Context context, AttributeSet attrs) {
        super(context, attrs);
        if (isInEditMode()) {
            return;
        }
        initViews();
    }

    private void initViews() {
        setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_search, 0, 0, 0);
        setTextAppearance(getContext(), R.style.LHBTextView_Medium_DaryGray);
        setHintTextColor(getResources().getColor(R.color.light_gray));
        setBackgroundResource(R.drawable.bg_corner_white);
        int paddingLeft = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10,
                getResources().getDisplayMetrics());
        int paddingTop = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 4,
                getResources().getDisplayMetrics());
        setPadding(paddingLeft, paddingTop, paddingLeft, paddingTop);
        setCompoundDrawablePadding(paddingLeft);
        setGravity(Gravity.CENTER);

        setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_UP) {
                    if (getCompoundDrawables()[2] != null) {
                        boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight()) &&
                                (event.getX() < ((getWidth() - getPaddingRight())));
                        if (touchable) {
                            setText("");
                        }
                    }
                }
                return false;
            }
        });

        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) {
                boolean empty = TextUtils.isEmpty(s);
                setCompoundDrawablesWithIntrinsicBounds(0, 0, !empty ? R.drawable.ic_dialog_close : 0, 0);
            }

            @Override
            public void afterTextChanged(Editable s) {
                if(mDelayTextChangedListener != null) {
                    mCountDownTimer.cancel();
                    mCountDownTimer.start();
                }
            }
        });

        setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus) {
                    setTag(getHint());
                    setHint("");
                } else {
                    setHint(getTag().toString());
                }
                setGravity(hasFocus ? Gravity.LEFT : Gravity.CENTER);
                setCompoundDrawablesWithIntrinsicBounds(!hasFocus ? R.drawable.ic_search : 0, 0, getCompoundDrawables()[2] != null ? R.drawable.ic_dialog_close : 0, 0);
            }
        });
    }

    public void setDelayAfterTextChangedListener(DelayAfterTextChangedListener afterTextChangedListener) {
        mDelayTextChangedListener = afterTextChangedListener;
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (mCountDownTimer != null) {
            mCountDownTimer.cancel();
        }
    }

    public void setDisplayHint(int resid) {
        setHint(resid);
        setTag(getResources().getString(resid));
    }
}

 1、代码继承EditText实现输入框的查询；

 2、initView()初始化查询控件的样式和相关事件触发；

 3、setOnTouchListener()处理右边"点击关闭图标"的出现时机和清楚输入文字处理；

 4、addTextChangedListener() 监听文字变化，当中 onTextChanged() 回调函数处理左边样式控制，afterTextChanged() 做延时查询处理；

 5、setOnFocusChangeListener() 处理在获得焦点的时候样式的变化，如提示语消失和文字靠左;

 6、延时处理核心在CountDownTimer这个匿名内部类段落，里面重写了CountDownTimer回调方法并实现自己的逻辑,这是一个时间倒数的处理类，通过人肉实验300毫秒能处理好少请求并查询速度响应的时点；到最后在控件脱离窗体的时候onDetachedFromWindow()，为了安全起见别忘了重新取消下定时的操作；

 7、这样控件并封装完成，在需要使用的地方直接引用就可以，需要延时的则调用监听方法setDelayAfterTextChangedListener() 可以使用；

最后

上面以安卓为例子，IOS WEB端当然也可以实现自己的延时查询控件，达到一次编写，到处运行;