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也利用条件删除,更加简单。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Android自定义UI实现微信语音