自定义延时查询控件---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端当然也可以实现自己的延时查询控件，达到一次编写，到处运行;