Android项目类似淘宝 电商 搜索功能，监听软键盘搜索事件，延迟自动搜索，以及时间排序的搜索历史记录的实现

最近跳槽去新公司，接受的第一个任务是在 一个电商模块的搜索功能以及搜索历史记录的实现。

需求和淘宝等电商的功能大体差不多，最上面一个搜索框，下面显示搜索历史记录。在edittext里输入要搜索的关键字后，按软键盘的搜索按键/延迟xxxxms后自动搜索。然后将搜索的内容展示给用户/提示用户没有搜到相关信息。

历史记录是按时间排序的，最新的在前面，输入以前搜索过的关键字，例如牛仔裤(本来是第二条)，会更新这条记录的时间，下次再看，牛仔裤的排列就在第一位了。并且有清除历史记录的功能。

整理需求，大致需要做的工作如下：

功能部分：

一，点击edittext，弹出软键盘输入法，右下键为【搜索】字样。

二，监听软键盘输入法按下【搜索】事件。

三，在edittext输入内容后，1000ms内无修改则 自动搜索功能。

四，保存按时间排序的历史记录，

五，清除历史记录

六，点击历史记录条目，将内容填充至edittext并自动执行搜索功能。

ui示意图如下：

===============ui的实现==================

搜索header头部：

整体是一个水平方向linearlayout，依次放置imageview(返回箭头)，edittext(搜索框),textview(取消)。

布局文件如下：

<linearlayout
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:background="@color/black_14141f"
  android:gravity="center_vertical"
  android:orientation="horizontal"
  android:paddingbottom="6dp"
  android:paddingtop="6dp">

  <imageview
    android:id="@+id/iv_back"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingleft="14dp"
    android:paddingright="14dp"
    android:src="@drawable/icon_back" />

  <relativelayout
    android:id="@+id/rl_search_layout"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:background="@drawable/shape_search_bj"
    android:gravity="center"
    android:orientation="horizontal">

    <!--      <imageview
            android:layout_centervertical="true"
            android:layout_alignparentleft="true"
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margintop="5dp"
            android:layout_marginbottom="5dp"
            android:background="@drawable/icon_black_search" />-->

    <edittext
      android:id="@+id/et_search"
      android:layout_width="match_parent"
      android:layout_height="30dp"
      android:layout_centervertical="true"
      android:layout_marginleft="10dp"
      android:layout_toleftof="@+id/close"
      android:layout_torightof="@+id/tv"
      android:background="@null"
      android:hint="输入商品名或者店铺名称"
      android:imeoptions="actionsearch"
      android:singleline="true"
      android:textcolor="@color/black3"
      android:textcolorhint="@color/gray_aaaaaa"
      android:textsize="14sp" />


    <!--      <imageview
            android:layout_centervertical="true"
            android:layout_alignparentright="true"
            android:id="@+id/clear_search"
            android:background="@drawable/icon_dialog_close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textcolor="@color/white"
            android:textsize="18sp" />-->

  </relativelayout>

  <textview
    android:id="@+id/tv_cancel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginleft="14dp"
    android:layout_marginright="14dp"
    android:gravity="center_vertical"
    android:text="取消"
    android:textcolor="@color/white"
    android:textsize="18sp" />

</linearlayout>

从项目中直接拷出的，自行替换资源文件。

==================================

历史记录布局：

用一个垂直布局的linearlayout 包裹 textview(历史搜索四个字) +listview(搜索记录)+listview的footerview(清除历史记录)实现。

(淘宝的应该是一个listview即可，历史搜索字样用listview的headerview实现。而我们公司产品设计的历史搜索字样下面的分割线长度和历史记录item分割线长度不一样，我就直接用textview做了，大同小异)

代码如下：

<linearlayout
  android:id="@+id/ll_search_history"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <textview
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginbottom="14dp"
    android:layout_marginleft="14dp"
    android:layout_margintop="14dp"
    android:drawableleft="@drawable/brand_search_history_icon"
    android:drawablepadding="10dp"
    android:text="历史记录"
    android:textcolor="#333333" />

  <view
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/bg_dfdfdf" />

  <listview
    android:id="@+id/listview"
    android:divider="@null"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"></listview>

</linearlayout>

分割线一般都是用view设置background实现，省的ui切图。

================功能实现部分==================

一，点击edittext，弹出软键盘输入法，右下键为【搜索】字样。

只需要在edittext控件的xml里配置如下属性即可：

android:imeoptions="actionsearch"

=================================

二，监听软键盘输入法按下【搜索】事件。

为edittext控件，设置oneditoractionlistener事件，判断当actionid == editorinfo.ime_action_search时，则是按下了 搜索按钮。

代码如下，这里我们隐藏了软键盘，并执行搜索请求。

medittextsearch.setoneditoractionlistener(new textview.oneditoractionlistener() {
  @override
  public boolean oneditoraction(textview v, int actionid, keyevent event) {
    if (actionid == editorinfo.ime_action_search) {
      // 先隐藏键盘
      ((inputmethodmanager) medittextsearch.getcontext().getsystemservice(context.input_method_service))
          .hidesoftinputfromwindow(mainactivity.this.getcurrentfocus().getwindowtoken(), inputmethodmanager.hide_not_always);
      //搜索具体逻辑
      //搜索请求转交给函数去处理：
      //search(string.valueof(medittextsearch.gettext()));
      toast.maketext(mainactivity.this,"按下了搜索按钮",toast.length_short).show();
      return true;
    }
    return false;
  }
});

==================================

三，在edittext输入内容后，1000ms内无修改则 自动搜索功能。

这里是监听edittext的textchangedlistener，在aftertextchanged(editable s) 回调方法中，首先判断当前当前edittext里的字符串是否为null/空，如果是空的，则不搜索，显示历史记录，如果不为空，则用handler.sendmessagedelayed方法 延迟500ms/1000ms 执行搜索功能。

这里有个情况就是，如果用户在1000ms内又输入了新内容，删改了字符 ，应该对新内容进行延迟1000ms搜索，或者删除字符后为空，则不该搜索了，即用户在1000ms内变动后，应该以最新的情况进行如上逻辑判断。所以这里在判断前加入了一条语句，在每次aftertextchanged()方法执行时，都先判断mhandler里是否有未处理的搜索请求，如果有，先remove掉这条请求message。

代码如下：这里引入handler，主要是为了实现延迟自动搜索，以及方便取消搜索请求。

      

 medittextsearch.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) {

      }

      @override
      public void aftertextchanged(editable s) {
//文字变动 ， 有未发出的搜索请求，应取消
        if(mhandler.hasmessages(msg_search)){
          mhandler.removemessages(msg_search);
        }
        //如果为空 直接显示搜索历史
        if(textutils.isempty(s)){
          //showhistory();
        }else {//否则延迟500ms开始搜索
          mhandler.sendemptymessagedelayed(msg_search,500); //自动搜索功能 删除
        }
      }
    });
  }
  private handler mhandler = new handler(){
    @override
    public void handlemessage(message msg) {
      //搜索请求
      toast.maketext(mainactivity.this,"搜索中。。。。",toast.length_short).show();
      //search(string.valueof(medittextsearch.gettext()));
    }
  };
  private static final int msg_search = 1;

==================================

四，按时间排序的历史记录，

我在封装的搜索方法中，就做了两件事，一 向服务器发出 搜索 关键字 的 请求。 二，同步将关键字保存至sharedprefrences (用sp简称)中，作为历史记录。

一略过，这里主要说二。

将关键字保存至sp中，是以key-value的形式，这里我将时间以yyyymmddhhmmss形式作为key，(用于后续排序)，将关键字作为value存入。

由于历史记录要有一个可以更新的感觉(最新的在前面，输入以前搜索过的关键字，例如牛仔裤(本来是第二条)，会更新这条记录的时间，下次再看，牛仔裤的排列就在第一位了。)，所以我在每次保存关键字之前，都先从sp中查询一下(返回sp中所有数据)，遍历这个返回的map，是否有该value的记录，如果有，则删除，因为后面紧跟着会插入一条该value的记录，所以用这种 删除+插入的操作，实现了sp更新 update 的功能(原本的sp只有 增 删 方法)。

保存历史记录代码如下：

private simpledateformat mformat;
mformat = new simpledateformat("yyyymmddhhmmss");
/**
 * 将历史记录保存至sp中，key=当前时间(20160302133455，便于排序) ，value=关键字
 * @param keywords
 */
private void savesearchhistory(string keywords) {
  //保存之前要先查询sp中是否有该value的记录，有则删除.这样保证搜索历史记录不会有重复条目
  map<string, string> historys = (map<string, string>) searchhistoryutils.getall(getactivity());
  for (map.entry<string, string> entry : historys.entryset()) {
    if(keywords.equals(entry.getvalue())){
      searchhistoryutils.remove(getactivity(),entry.getkey());
    }
  }
  searchhistoryutils.put(getactivity(), "" + mformat.format(new date()), keywords);
}

查询历史记录

查询时，也是先返回sp中所有的数据，返回的是一个map集合。然后取出map集合中的keyset，由于key是按照指定数字格式插入的，所以将key排序。这里是升序排序。

首先计算一下keyset的集合长度 keyleng，即历史记录有多少条，

然后和要显示的最大条数(history_max，这里我们产品定义的是5条)比较，

如果历史记录条数 > 要显示条数，则取为history_max，5条。 否则用历史记录的条数 keyleng。

然后循环取出返回的map集合中的，按照key升序排列的，后n条数据，加入集合中用于显示，这里判断一下，如果要显示的数据集合的size不等于0，说明有历史记录，则要显示footerview(清空历史记录)，否则则不显示。

代码如下：

/**
 * 最多显示几条历史记录
 */
private static final int history_max = 5;
/**
 * 从sp查询搜索历史，并按时间显示
 */
private void showsearchhistory() {
  map<string, string> hisall = (map<string, string>) searchhistoryutils.getall(getactivity());
  //将key排序升序
  object[] keys = hisall.keyset().toarray();
  arrays.sort(keys);
  int keyleng = keys.length;
  //这里计算 如果历史记录条数是大于 可以显示的最大条数，则用最大条数做循环条件，防止历史记录条数-最大条数为负值，数组越界
  int hisleng = keyleng > history_max ? history_max : keyleng;
  for (int i = 1; i <= hisleng; i++) {
    mresults.add(hisall.get(keys[keyleng - i]));
  }
  madapter.setdatas(mresults);
  //如果size不为0 显示footerview
  mfooterview.setvisibility(0!=mresults.size()?view.visible:view.gone);
}

================================

五，清除历史记录

该功能很简单，清空sp里的数据即可，不过要同步更新一下listview，以及footerview的可见性。

/**
 * 清楚历史记录
 */
private void clearsearchhistory() {
  searchhistoryutils.clear(this);
  //同时刷新历史记录显示页面
  //mresults = new arraylist<>();
  //madapter.setdatas(mresults);
  //如果size不为0 显示footerview
  //mfooterview.setvisibility(0!=mresults.size()?view.visible:view.gone);
}

==================================

六，点击历史记录条目，将内容填充至edittext并自动执行搜索功能。

没啥好说的，为listview设置点击监听，然后为edittext settext()设置内容，同步执行seach操作。略。

==================================

七优化：为了防止历史记录条数越来越多，我在这个fragment的ondestroy()方法里，调用了删除多余历史记录的方法，将sp中的元素数量一直控制在 要显示的最大条数之内：

思路：如果map集合数量大于，要显示的max，则说明要删除多余条目。

然后和查询显示历史记录逻辑一样，先对key排序，删除，key值比较小的多余的那几条即可。

代码如下：

/**
 * 删除多余的历史记录
 * 如果历史记录数量大于限定数量(10条)，则按key升序排序，删除前几条
 */
private void delmoresearchhistory() {

  map<string, string> hisall = (map<string, string>) searchhistoryutils.getall(this);
  if (hisall.size() > history_max) {
    //将key排序升序
    object[] keys = hisall.keyset().toarray();
    arrays.sort(keys);
    // length = 12 , max = 10 , i = 1,0,count =2;
    for (int i = keys.length - history_max - 1; i > -1; i--) {
      searchhistoryutils.remove(this, (string) keys[i]);
    }
  }

}

================================================

这是我来新公司做的第一个小功能，特此记录一下，

其实这个功能思路大体如上，只不过用sp会有一些东西要手动处理一下，所以有些可以说的。

如果用数据库保存历史记录，直接利用select 查询条件 排序时间， delete也利用条件删除，更加简单。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。