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

需求和淘宝等电商的功能大体差不多，最上面一个搜索框，下面显示搜索历史记录。在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也利用条件删除，更加简单。

很多朋友找我要工具类，工具类下载传送门：

http://download.csdn.net/detail/zxt0601/9656132

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

  1. 淘宝电商：淘宝卖家如何快速提升店铺自然搜索流量？

    淘宝卖家如何快速提升店铺自然搜索流量? 今天我分享的是一些实操的干货和思路,还是要看个人操作的.我们先来看第一步,首先在淘宝卖货,要有流量才能有转化,那么我第一步先要梳理一下我们能够获取到的有哪些渠道 ...

  2. 淘宝电商搜索EBR算法笔记

    淘宝电商搜索EBR算法笔记 - 知乎<Embedding-based Product Retrieval in Taobao Search>介绍了淘宝目前最新的EBR算法.仍然是一个双塔的 ...

  3. 新媒体中的淘宝电商运营资源

    做电商运营一直都是很多公司不想放弃的,特别是卖产品的公司,于是各大电商平台也需要专业的电商运营人员来运营,淘宝电商运营平台是其中极具代表性的一个平台,今天来说一下新媒体中的淘宝电商运营该怎么做?分享一 ...

  4. 1个人，3个月业余时间，采用Flutter，居然仿写了一个淘宝电商开源项目

    来源 | https://www.jianshu.com/p/194448388ce9 前言 Flutter现在如火如荼,Google也在大力推广,是到了学习Flutter的时候了,今天推荐一款用Fl ...

  5. 淘宝电商项目落地，从零开始搭建亿级系统架构笔记

    电商亿级系统架构设计笔记,分为:基础篇.数据库篇.缓存篇.消息队列篇.分布式服务篇.维护篇.实战篇.通过学习这份笔记,你可以系统的学会从零开始搭建亿级系统架构.其中每篇中又有具体的设计实施的笔记供大家 ...

  6. 仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！

    仿淘宝电商官网静态页面 作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它 这是我刚"入坑"的时候写的Demo,因为当 ...

  7. 淘宝电商页面和产品海报设计PSD分层素材模板

    电商影响越来越大,已经渗透的我们日常生活的各个方面,很多以前不懂也不关心电商的客户也激动的做电商,以为电商就是把产品拍照片上传到淘宝上,就开始了电商生意.我只想说理想很丰满,现实很骨感.若只想打开淘宝 ...

  8. 淘宝电商创业可能会面临哪些问题？

    谈到互联网创业离不开电商,电商的魅力在于其不受时间.地点限制,创业门槛低,投入成本小,众多优势使得许多创业者加入电商创业大军. 此外,网购用户不断增长,2019年网络用户购物规模已超过6亿人次,电商行 ...

  9. 数字化时代-15：从商品交换过程解剖淘宝电商

    概述:本文探讨淘宝电商中的淘宝平台.支付宝.淘宝的买家.淘宝的卖家的各个角色. 探讨淘宝整个再生产过程中,处于哪个环节,支付在宝和淘宝解决了什么问题? 又有什么启发? 生产:在前面,花了很多的时间,从 ...

最新文章

  1. 看 600 页技术书可以坚持，剩 60 页就坚持不了……| 每日趣闻
  2. Win7+Ubuntu11
  3. Java面典_【Java实用工具】——使用oshi获取主机信息
  4. 曼哈顿距离最小生成树与莫队算法（总结）
  5. 在python中、如果异常并未被处理或捕捉_Python异常处理总结
  6. Could not resolve this reference. Could not locate the assembly
  7. java远程控制win10,如何在win10系统下远程连接linux服务器？（vnc版）
  8. 机器学习实战1--预测链家租房价格
  9. 【mysql】扩展-常用函数
  10. c语言常用绘图软件有哪些,数学绘图软件有哪些？好用的数学绘图软件推荐
  11. project2016资源管理
  12. 那个超级浏览器好（跨境浏览器哪个好）
  13. 屏幕共享的实现与应用
  14. 安装了Adobe Acrobat却没有pdf虚拟打印机
  15. addr2line命令使用
  16. VMware Error | IP地址经常变更
  17. element-ui input 身份证号码验证
  18. 狂野飙车显示无法连接服务器,狂野飙车（极速版）无法连接服务器是什么原因...
  19. 面试常见问题回答技巧（70题）
  20. GitChat · 架构 | 如何从零开始搭建高性能直播平台？

热门文章

  1. android移动体感 pc,android pc模拟器推荐 腾讯手游助手
  2. sdut-Collection(Map)-1 读中国载人航天史，汇航天员数量，向航天员致敬
  3. React+eCharts扇形图
  4. 硅谷海盗的片尾背景音乐, 有谁知道吗?
  5. CodeForces - 1234B1 Social Network (easy version)
  6. 测不准的程序员（Heisenberg Developers）
  7. 华为手机百度云息屏后停止下载_华为智选车载智慧屏评测，1699元让老汽车进入智能时代...
  8. 人工智能概论学习笔记（一）：CPU GPU
  9. 触控的手牌—Cocos Creator
  10. js过滤特殊字符，特殊字符串，敏感词汇等