Android开源实战:SearchView搜索框(含历史搜索记录)
前言
Android
开发中,类似下图的搜索功能非常常见
- 今天,我将手把手教大家实现一款 封装了 历史搜索记录功能 & 样式 的
Android
自定义搜索框 开源库,希望你们会喜欢。
已在
Github
开源:地址:SearchView,欢迎Star
!
目录
1. 简介
一款封装了 历史搜索记录功能 & 样式 的Android
自定义搜索框
已在
Github
开源:地址:SearchView,欢迎Star
!
2. 需求场景
- 在开始
coding
前, 理解好用户的需求场景 有助于我们更好地设计 & 实现功能 - 需求场景如下
3. 业务流程图
根据场景,梳理出来的功能业务流程图如下:
4. 功能需求
根据功能的业务流程图,得出功能需求如下
4.1 功能列表
4.2 功能原型图
4.3 示意图
5. 总体设计
下面,将根据功能需求给出特定的技术解决方案
5.1 总体解决方案
5.2 项目结构说明
- 项目工程示意图
先下载Demo再阅读,效果会更好:Carson_Ho的Github地址:Search_Layout
- 结构说明
文件类型 | 作用 |
---|---|
SearchView.java | 搜索框所有功能的实现 |
RecordSQLiteOpenHelper.java | 创建、管理数据库 & 版本控制 |
EditText_Clear.java | 自定义EdiText,丰富了自定义样式 & 一键删除 |
ICallBack.java | 点击搜索按键后的接口回调方法 |
bCallBack.java | 点击返回按键后的接口回调方法 |
SearchListView.java | 解决ListView & ScrollView的嵌套冲突 |
search_layout.xml | 搜索框的布局 |
6. 功能详细设计
下面将给出详细的功能逻辑
6.1 关键字搜索
- 描述:根据用户输入的搜索字段进行结果搜索
- 原型图
注:关键字搜索功能是因人而异的,所以本源码仅留出接口供开发者实现,不作具体实现
- 源码分析
分析1:EditText_Clear.java
- 作用:自定义
EdiText
,与系统自带的EdiText
对比:多了左侧图片 & 右侧图片设置、一键清空EdiText
内容功能 - 具体代码如下:
public class EditText_Clear extends android.support.v7.widget.AppCompatEditText {/*** 步骤1:定义左侧搜索图标 & 一键删除图标*/private Drawable clearDrawable,searchDrawable;public EditText_Clear(Context context) {super(context);init();// 初始化该组件时,对EditText_Clear进行初始化 ->>步骤2}public EditText_Clear(Context context, AttributeSet attrs) {super(context, attrs);init();}public EditText_Clear(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}/*** 步骤2:初始化 图标资源*/private void init() {clearDrawable = getResources().getDrawable(R.drawable.delete);searchDrawable = getResources().getDrawable(R.drawable.search);setCompoundDrawablesWithIntrinsicBounds(searchDrawable, null,null, null);// setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom)介绍// 作用:在EditText上、下、左、右设置图标(相当于android:drawableLeft="" android:drawableRight="")// 注1:setCompoundDrawablesWithIntrinsicBounds()传入的Drawable的宽高=固有宽高(自动通过getIntrinsicWidth()& getIntrinsicHeight()获取)// 注2:若不想在某个地方显示,则设置为null// 此处设置了左侧搜索图标// 另外一个相似的方法:setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)介绍// 与setCompoundDrawablesWithIntrinsicBounds()的区别:可设置图标大小// 传入的Drawable对象必须已经setBounds(x,y,width,height),即必须设置过初始位置、宽和高等信息// x:组件在容器X轴上的起点 y:组件在容器Y轴上的起点 width:组件的长度 height:组件的高度}/*** 步骤3:通过监听复写EditText本身的方法来确定是否显示删除图标* 监听方法:onTextChanged() & onFocusChanged()* 调用时刻:当输入框内容变化时 & 焦点发生变化时*/@Overrideprotected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {super.onTextChanged(text, start, lengthBefore, lengthAfter);setClearIconVisible(hasFocus() && text.length() > 0);// hasFocus()返回是否获得EditTEXT的焦点,即是否选中// setClearIconVisible() = 根据传入的是否选中 & 是否有输入来判断是否显示删除图标->>关注1}@Overrideprotected void onFocusChanged(boolean focused, int direction, Rect previouslyFocusedRect) {super.onFocusChanged(focused, direction, previouslyFocusedRect);setClearIconVisible(focused && length() > 0);// focused = 是否获得焦点// 同样根据setClearIconVisible()判断是否要显示删除图标}/*** 关注1* 作用:判断是否显示删除图标*/private void setClearIconVisible(boolean visible) {setCompoundDrawablesWithIntrinsicBounds(searchDrawable, null,visible ? clearDrawable : null, null);}/*** 步骤4:对删除图标区域设置点击事件,即"点击 = 清空搜索框内容"* 原理:当手指抬起的位置在删除图标的区域,即视为点击了删除图标 = 清空搜索框内容*/@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {// 原理:当手指抬起的位置在删除图标的区域,即视为点击了删除图标 = 清空搜索框内容case MotionEvent.ACTION_UP:Drawable drawable = clearDrawable;if (drawable != null && event.getX() <= (getWidth() - getPaddingRight())&& event.getX() >= (getWidth() - getPaddingRight() - drawable.getBounds().width())) {setText("");}// 判断条件说明// event.getX() :抬起时的位置坐标// getWidth():控件的宽度// getPaddingRight():删除图标图标右边缘至EditText控件右边缘的距离// 即:getWidth() - getPaddingRight() = 删除图标的右边缘坐标 = X1// getWidth() - getPaddingRight() - drawable.getBounds().width() = 删除图标左边缘的坐标 = X2// 所以X1与X2之间的区域 = 删除图标的区域// 当手指抬起的位置在删除图标的区域(X2=<event.getX() <=X1),即视为点击了删除图标 = 清空搜索框内容// 具体示意图请看下图break;}return super.onTouchEvent(event);}}
对于含有一键清空功能 & 更多自定义样式的EditText自定义控件具体请看我的另外一个简单 & 好用的开源组件:Android自定义EditText:手把手教你做一款含一键删除&自定义样式的SuperEditText
分析2:SearchListView.java
- 作用:解决
ListView
&ScrollView
的嵌套冲突 - 具体代码如下:
public class Search_Listview extends ListView {public Search_Listview(Context context) {super(context);}public Search_Listview(Context context, AttributeSet attrs) {super(context, attrs);}public Search_Listview(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}// 通过复写其onMeasure方法,达到对ScrollView适配的效果@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,MeasureSpec.AT_MOST);super.onMeasure(widthMeasureSpec, expandSpec);}}
分析3: search_layout.xml
- 作用:搜索框的布局
- 具体代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"android:focusableInTouchMode="true"android:orientation="vertical"><LinearLayoutandroid:id="@+id/search_block"android:layout_width="match_parent"android:layout_height="10dp"android:orientation="horizontal"android:paddingRight="10dp">// 返回按钮<ImageViewandroid:layout_width="38dp"android:layout_height="38dp"android:layout_gravity="center_vertical"android:padding="10dp"android:src="@drawable/back" />// 搜索框(采用上面写的自定义EditText<scut.carson_ho.searchview.EditText_Clearandroid:id="@+id/et_search"android:layout_width="0dp"android:layout_height="fill_parent"android:layout_weight="264"android:background="@null"android:drawablePadding="8dp"android:gravity="start|center_vertical"android:imeOptions="actionSearch"android:singleLine="true"// 最后2行 = 更换输入键盘按钮:换行 ->>搜索/></LinearLayout>// 下方搜索记录布局 = ScrollView+Listview<ScrollViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical">// Listview布局(采用上述讲解的SearchListView,解决了与ScrollView的冲突)<scut.carson_ho.searchview.SearchListViewandroid:id="@+id/listView"android:layout_width="match_parent"android:layout_height="wrap_content"></scut.carson_ho.searchview.SearchListView><TextViewandroid:id="@+id/tv_clear"android:layout_width="match_parent"android:layout_height="40dp"android:background="#F6F6F6"android:gravity="center"android:visibility="invisible"android:text="清除搜索历史" /></LinearLayout></ScrollView>
</LinearLayout>
分析4:ICallBack.java、bCallBack.java
- 作用:搜索按键、返回按键回调接口
- 具体代码如下:
/*** ICallBack.java*/
public interface ICallBack {void SearchAciton(String string);}/*** bCallBack.java*/
public interface bCallBack {void BackAciton();
}
分析5:SearchView.java
- 作用:涵盖搜索框中所有功能,此处主要讲解 关键字搜索 功能实现
- 具体代码如下:
/*** 步骤1:初始化成员变量*/// 搜索框组件private EditText et_search; // 搜索按键private LinearLayout search_block; // 搜索框布局private ImageView searchBack; // 返回按键// 回调接口private ICallBack mCallBack;// 搜索按键回调接口private bCallBack bCallBack; // 返回按键回调接口// ListView列表 & 适配器private SearchListView listView;private BaseAdapter adapter;/*** 步骤2:绑定 搜索框 组件*/private void initView(){// 1. 绑定R.layout.search_layout作为搜索框的xml文件LayoutInflater.from(context).inflate(R.layout.search_layout,this);// 2. 绑定搜索框EditTextet_search = (EditText) findViewById(R.id.et_search);// 3. 搜索框背景颜色search_block = (LinearLayout)findViewById(R.id.search_block);// 4. 历史搜索记录 = ListView显示listView = (Search_Listview) findViewById(R.id.listView);// 5. 删除历史搜索记录 按钮tv_clear = (TextView) findViewById(R.id.tv_clear);tv_clear.setVisibility(INVISIBLE); // 初始状态 = 不可见}/*** 步骤3* 监听输入键盘更换后的搜索按键* 调用时刻:点击键盘上的搜索键时*/et_search.setOnKeyListener(new View.OnKeyListener() {public boolean onKey(View v, int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_ENTER && event.getAction() == KeyEvent.ACTION_DOWN) {// 点击搜索按键后,根据输入的搜索字段进行查询// 注:由于此处需求会根据自身情况不同而不同,所以具体逻辑由开发者自己实现,此处仅留出接口if (!(mCallBack == null)){mCallBack.SearchAciton(et_search.getText().toString());}Toast.makeText(context, "需要搜索的是" + et_search.getText(), Toast.LENGTH_SHORT).show();}return false;}});/*** 步骤4:回调接口*/// 搜索按键回调接口
public interface ICallBack {void SearchAciton(String string);
}// 返回按键接口回调public void setOnClickBack(bCallBack bCallBack){this.bCallBack = bCallBack;}
6.2 实时显示历史搜索记录
- 描述:包括 最近搜索记录 & 相似搜索记录
- 原型图
- 源码分析
分析1:RccordSQLiteOpenHelper.java
- 作用:创建、管理数据库 & 版本控制
该数据库用于存储用户的搜索历史记录
- 具体代码如下:
对于
Android SQLlite
数据库的操作请看文章:Android:SQLlite数据库操作最详细解析
// 继承自SQLiteOpenHelper数据库类的子类
public class RecordSQLiteOpenHelper extends SQLiteOpenHelper {private static String name = "temp.db";private static Integer version = 1;public RecordSQLiteOpenHelper(Context context) {super(context, name, null, version);}@Overridepublic void onCreate(SQLiteDatabase db) {// 打开数据库 & 建立一个名为records的表,里面只有一列name来存储历史记录:db.execSQL("create table records(id integer primary key autoincrement,name varchar(200))");}@Overridepublic void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {}
}
分析2:SearchView.java
- 作用:涵盖搜索框中所有功能,此处主要讲解 实时显示历史搜索记录 功能实现
- 具体代码如下:
/*** 步骤1:初始化变量*/// 用于存放历史搜索记录private RecordSQLiteOpenHelper helper ;private SQLiteDatabase db;// ListView列表 & 适配器private SearchListView listView;listView = (SearchListView) findViewById(R.id.listView);private BaseAdapter adapter;// 实例化数据库SQLiteOpenHelper子类对象helper = new RecordSQLiteOpenHelper(context);/*** 步骤2:搜索框的文本变化实时监听*/et_search.addTextChangedListener(new TextWatcher() {@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {}// 输入文本后调用该方法@Overridepublic void afterTextChanged(Editable s) {// 每次输入后,模糊查询数据库 & 实时显示历史搜索记录// 注:若搜索框为空,则模糊搜索空字符 = 显示所有的搜索历史String tempName = et_search.getText().toString();queryData(tempName); // ->>关注1}});/*** 步骤3:搜索记录列表(ListView)监听* 即当用户点击搜索历史里的字段后,会直接将结果当作搜索字段进行搜索*/listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {// 获取用户点击列表里的文字,并自动填充到搜索框内TextView textView = (TextView) view.findViewById(android.R.id.text1);String name = textView.getText().toString();et_search.setText(name);Toast.makeText(context, name, Toast.LENGTH_SHORT).show();}});/*** 关注1* 模糊查询数据 & 显示到ListView列表上*/private void queryData(String tempName) {// 1. 模糊搜索Cursor cursor = helper.getReadableDatabase().rawQuery("select id as _id,name from records where name like '%" + tempName + "%' order by id desc ", null);// 2. 创建adapter适配器对象 & 装入模糊搜索的结果adapter = new SimpleCursorAdapter(context, android.R.layout.simple_list_item_1, cursor, new String[] { "name" },new int[] { android.R.id.text1 }, CursorAdapter.FLAG_REGISTER_CONTENT_OBSERVER);// 3. 设置适配器listView.setAdapter(adapter);adapter.notifyDataSetChanged();System.out.println(cursor.getCount());// 当输入框为空 & 数据库中有搜索记录时,显示 "删除搜索记录"按钮if (tempName.equals("") && cursor.getCount() != 0){tv_clear.setVisibility(VISIBLE);}else {tv_clear.setVisibility(INVISIBLE);};}
6.3 删除历史搜索记录
- 描述:清空所有历史搜索记录
- 原型图
- 源码分析
/*** 步骤1:初始化变量*/private TextView tv_clear; // 删除搜索记录按键tv_clear = (TextView) findViewById(R.id.tv_clear);tv_clear.setVisibility(INVISIBLE);// 初始状态 = 不可见/*** 步骤2:设置"清空搜索历史"按钮*/tv_clear.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// 清空数据库->>关注2deleteData();// 模糊搜索空字符 = 显示所有的搜索历史(此时是没有搜索记录的) & 显示该按钮的条件->>关注3queryData("");}});/*** 关注2:清空数据库*/private void deleteData() {db = helper.getWritableDatabase();db.execSQL("delete from records");db.close();tv_clear.setVisibility(INVISIBLE);}/*** 关注3* 模糊查询数据、显示到ListView列表上 & 确定显示 “删除历史按钮”条件*/private void queryData(String tempName) {// 步骤1、2、3上面已经提到了,直接看步骤4// 1. 模糊搜索Cursor cursor = helper.getReadableDatabase().rawQuery("select id as _id,name from records where name like '%" + tempName + "%' order by id desc ", null);// 2. 创建adapter适配器对象 & 装入模糊搜索的结果adapter = new SimpleCursorAdapter(context, android.R.layout.simple_list_item_1, cursor, new String[] { "name" },new int[] { android.R.id.text1 }, CursorAdapter.FLAG_REGISTER_CONTENT_OBSERVER);// 3. 设置适配器listView.setAdapter(adapter);adapter.notifyDataSetChanged();// 4. 当输入框为空 & 数据库中有搜索记录时,才显示 "删除搜索记录"按钮if (tempName.equals("") && cursor.getCount() != 0){tv_clear.setVisibility(VISIBLE);}else {tv_clear.setVisibility(INVISIBLE);};}
6.4 保存历史搜索记录
- 描述:将用户输入的搜索字段保存到数据库中
- 原型图
- 源码分析
/*** 监听输入键盘更换后的搜索按键* 调用时刻:点击键盘上的搜索键时*/et_search.setOnKeyListener(new View.OnKeyListener() {public boolean onKey(View v, int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_ENTER && event.getAction() == KeyEvent.ACTION_DOWN) {// 步骤1已经讲解过,直接看步骤2// 1. 点击搜索按键后,根据输入的搜索字段进行查询// 注:由于此处需求会根据自身情况不同而不同,所以具体逻辑由开发者自己实现,此处仅留出接口if (!(mCallBack == null)){mCallBack.SearchAciton(et_search.getText().toString());}Toast.makeText(context, "需要搜索的是" + et_search.getText(), Toast.LENGTH_SHORT).show();// 2. 点击搜索键后,对该搜索字段在数据库是否存在进行检查(查询)->> 关注3boolean hasData = hasData(et_search.getText().toString().trim());// 3. 若存在,则不保存;若不存在,则将该搜索字段保存(插入)到数据库,并作为历史搜索记录if (!hasData) {insertData(et_search.getText().toString().trim()); // ->>关注4queryData("");}}return false;}});/*** 关注3* 检查数据库中是否已经有该搜索记录*/private boolean hasData(String tempName) {// 从数据库中Record表里找到name=tempName的idCursor cursor = helper.getReadableDatabase().rawQuery("select id as _id,name from records where name =?", new String[]{tempName});// 判断是否有下一个return cursor.moveToNext();}/*** 关注4* 插入数据到数据库,即写入搜索字段到历史搜索记录*/private void insertData(String tempName) {db = helper.getWritableDatabase();db.execSQL("insert into records(name) values('" + tempName + "')");db.close();}
- 至此,关于搜索框的全部源码讲解完毕。
- 完整源代码请看:Carson_Ho的Github地址:SearchView
7. 具体使用
- 具体请看文章:Android开源库:这里有一个简单好用、含历史搜索记录的搜索框
- 完整Demo地址:Carson_Ho的Github地址:SearchView
Android开源实战:SearchView搜索框(含历史搜索记录)相关推荐
- position:搜索框显示历史浏览记录
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "righ ...
- 有历史搜索记录的搜索框(百度搜索案例)
带有历史搜索词条的搜索框 记录一下带有历史搜索词条的搜索框,具体效果类似百度搜索: 点击搜索框 展示历史搜索词条列表: 点击搜索框以外的区域 隐藏历史搜索词条列表: 点击删除除去对应词条. 效果图: ...
- Android开源实战:简单好用、含历史搜索记录的智能搜索框
前言 Android开发中,类似下图的搜索功能非常常见 今天,我将带来一款 封装了 历史搜索记录功能 & 样式 的Android 自定义搜索框 开源库,希望你们会喜欢. 已在Github开源: ...
- Android常用:手把手教你实现搜索框(含历史搜索记录)
http://blog.csdn.net/carson_ho/article/details/53366570 前言 像下图的搜索功能在Android开发中非常常见 今天我将手把手教大家如何实现具备历 ...
- Android 系统搜索框(有浏览记录)
实现Android 系统搜索框(有浏览记录),先看下效果: 一.配置搜索描述文件 要在res中的xml文件加创建sreachable.xml,内容如下: <?xml version=" ...
- android特效集锦系列之八 仿快播搜索框悬浮文字搜索
1. 仿快播搜索框悬浮文字搜索,我很无耻的把别人的成果直接拿了过来(大神饶了我吧,真是没有记作者名字的习惯), 效果: 一张图???为什么跟之前的文风不一样啊??别吐槽了,洗洗睡吧. 源码
- 百度搜索结果的URL参数 搜索框提示词搜索方式(rsv_sug2)
通过百度搜索框提示,看到可能想找的关键词之后,百度提供了2种方式供选择,并且用参数 rsv_sug2 记录了用户的选择. 百度搜索结果网址参数 搜索框提示词搜索方式(rsv_sug2) 名称 rsv_ ...
- 百度搜索引擎结果网址参数 搜索框提示词搜索方式(rsv_sug2)
通过百度搜索框提示,看到可能想找的关键词之后,百度提供了2种方式供选择,并且用参数 rsv_sug2 记录了用户的选择. [b]百度搜索结果网址参数 搜索框提示词搜索方式(rsv_sug2)[/b] ...
- 百度搜索结果页面的参数 搜索框提示词搜索方式(rsv_sug2)
通过百度搜索框提示,看到可能想找的关键词之后,百度提供了2种方式供选择,并且用参数 rsv_sug2 记录了用户的选择. 百度搜索结果网址参数 搜索框提示词搜索方式(rsv_sug2) 名称 rsv_ ...
最新文章
- python 结束进程 terminate_python – 如果已存在浏览器窗口,则process.terminate()不适用于chrome / firefox子进程...
- bzoj1089 [SCOI2003]严格n元树(dp+高精)
- MySQL中使用LIMIT进行分页的方法
- html一条横线在文本旁边_lt;delgt; | HTML删除标记标签
- (59)简单介绍RAM IP核类型和接口信号?
- Maven私服(一)
- 虚拟货币公有链项目集体爆发,AE超过历史最高点
- POJ 1325 Machine Schedule(zoj 1364) 最小覆盖数
- ajax 传送很多html字符串到前台例子
- Gradle发布项目到 maven 之novoda/bintray-release(3)
- 谷歌升级云数据库:更多的储存及更快的读取
- localhost改ip访问
- DNS中NS和SOA区别
- python安装Jpype
- 【竞品分析】腾讯QQ手机浏览器与UC手机浏览器产品对比
- 自律-克服不良习惯读后感
- 高光时刻 | 方正璞华联合开发的「人力资源法律服务共享平台」在创新创业大赛中获奖
- IDEA中DEBUG时断点变成灰色
- 【从饮水机到名人堂之c语言】操作符详解(1)
- idm 无法下载此文件 备注: SSL_connect error 5