简简单单搞一个实用的Android端搜索框

news2024/11/26 4:38:22

Hello啊老铁们,今天带来一个非常实用的自定义搜索框,包含了搜索框、热门搜索列表、最近搜索列表等常见的功能,有类似的,大家可以直接复用,将会大大节约您的开发时间,有一点,很负责任的告诉大家,实现这个没什么技术含量,就是很简单的自定义组合View,本文除了使用介绍,我也会把具体的实现过程分享给大家。

今天的内容大概如下:

1、效果展示

2、快速使用及属性介绍

3、具体代码实现

4、开源地址及总结

一、效果展示

效果很常见,就是平常需求中的效果,上面是搜索框,下面是最近和热门搜索列表,为了方便大家在实际需求中使用,配置了很多属性,也进行了上下控件的拆分,也就是上边搜索框和下面的搜索列表的拆分,可以按需进行使用。

二、快速使用及属性介绍

快速使用

目前已经发布至远程Maven,大家可以进行远程依赖使用。

1、在你的根项目下的build.gradle文件下,引入maven。

allprojects {
    repositories {
        maven { url "https://gitee.com/AbnerAndroid/almighty/raw/master" }
    }
}

2、在你需要使用的Module中build.gradle文件下,引入依赖。

dependencies {
    implementation 'com.vip:search:1.0.0'
}

具体代码

1、xml中引入SearchLayout(搜索框)和SearchList(搜索列表),在实际开发中,根据需求可选择使用,二者是互不关联的。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingLeft="10dp"
  android:paddingRight="10dp"
  tools:context=".MainActivity">

  <com.vip.search.SearchLayout
    android:id="@+id/search_layout"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_marginTop="10dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:search_bg="@drawable/shape_stroke_10" />

  <com.vip.search.SearchList
    android:id="@+id/search_list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    app:is_hot_flex_box_or_grid="true"
    app:is_visibility_history_clear="true"
    app:layout_constraintTop_toBottomOf="@id/search_layout" />

</androidx.constraintlayout.widget.ConstraintLayout>

2、代码逻辑,以下是测试代码,如用到实际项目,请以实际项目获取控件为主。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val searchLayout = findViewById<SearchLayout>(R.id.search_layout)
        val searchList = findViewById<SearchList>(R.id.search_list)

        searchLayout.setOnTextSearchListener({
            //搜索内容改变

        }, {
            //软键盘点击了搜索
            searchList.doSearchContent(it)
        })

        //设置用于测试的热门搜索列表
        searchList.setHotList(getHotList())
        //热门搜索条目点击事件
        searchList.setOnHotItemClickListener { s, i ->
            Toast.makeText(this, s, Toast.LENGTH_SHORT).show()
        }
        //历史搜索条目点击事件
        searchList.setOnHistoryItemClickListener { s, i ->
            Toast.makeText(this, s, Toast.LENGTH_SHORT).show()
        }

    }

    /**
* AUTHOR:AbnerMing
* INTRODUCE:模拟热门搜索列表
*/
    private val mTestHotList = arrayListOf(
        "二流小码农", "三流小可爱", "Android",
        "Kotlin", "iOS", "Java", "Python", "Php是世界上最好的语言"
    )

    private fun getHotList(): ArrayList<SearchBean> {
        return ArrayList<SearchBean>().apply {
            mTestHotList.forEachIndexed { index, s ->
                val bean = SearchBean()
                bean.content = s
                bean.isShowLeftIcon = true

                val drawable: Drawable? = if (index < 2) {
                    ContextCompat.getDrawable(this@MainActivity, R.drawable.shape_circle_select)
                } else if (index == 2) {
                    ContextCompat.getDrawable(this@MainActivity, R.drawable.shape_circle_ordinary)
                } else {
                    ContextCompat.getDrawable(this@MainActivity, R.drawable.shape_circle_normal)
                }
                drawable?.setBounds(0, 0, drawable.minimumWidth, drawable.minimumHeight)
                bean.leftIcon = drawable

                add(bean)
            }
        }
    }
}

主要方法介绍

1、搜索框监听

拿到searchLayout控件之后,调用setOnTextSearchListener方法即可,第一个方法是搜索内容发生变化会回调,第二个方法是,点击了软键盘的搜索按钮会回调,如果要在最近搜索里展示,直接调用doSearchContent方法即可。

 searchLayout.setOnTextSearchListener({
            //搜索内容改变

        }, {
            //软键盘点击了搜索
            searchList.doSearchContent(it)
})

2、搜索列表点击事件

热门搜索调用setOnHotItemClickListener方法,历史搜索也就是最近搜索调用setOnHistoryItemClickListener方法,都是两个参数,第一个是文本内容,第二个是索引,也就是点的是哪一个。

//热门搜索条目点击事件
        searchList.setOnHotItemClickListener { s, i ->
            Toast.makeText(this, s, Toast.LENGTH_SHORT).show()
        }
        //历史搜索条目点击事件
        searchList.setOnHistoryItemClickListener { s, i ->
            Toast.makeText(this, s, Toast.LENGTH_SHORT).show()
        }

3、改变最近(历史)搜索item背景

有的老铁说了,默认的背景我不喜欢,能否可以动态设置,必须能!

默认背景

设置背景,通过setHistoryItemBg方法。

searchList.setHistoryItemBg(R.drawable.shape_solid_d43c3c_10)

效果展示

4、动态设置热门搜索热度

可能有很多需求中,需要展示几个热度,有的是按照颜色区分,如下图:

实现起来很简单,在设置热门列表(setHotList)的时候,针对传递的对象设置leftIcon即可。测试代码如下:

private fun getHotList(): ArrayList<SearchBean> {
        return ArrayList<SearchBean>().apply {
            mTestHotList.forEachIndexed { index, s ->
                val bean = SearchBean()
                bean.content = s
                bean.isShowLeftIcon = true
                val drawable: Drawable? = if (index < 2) {
                    ContextCompat.getDrawable(this@MainActivity, R.drawable.shape_circle_select)
                } else if (index == 2) {
                    ContextCompat.getDrawable(this@MainActivity, R.drawable.shape_circle_ordinary)
                } else {
                    ContextCompat.getDrawable(this@MainActivity, R.drawable.shape_circle_normal)
                }
                drawable?.setBounds(0, 0, drawable.minimumWidth, drawable.minimumHeight)
                bean.leftIcon = drawable

                add(bean)
            }
        }
    }

具体的哪个数据展示什么颜色,直接设置即可,想怎么展示就怎么展示。当然了除了展示不同的热度之外,还有一些其他的变量,isShowLeftIcon为是否展示文字左边的icon,textColor为当前文字的颜色,根据不同的颜色,我们也可以实现下面的效果。

除了常见的方法之外,还提供了很多的属性操作,具体的大家可以看下面,按需使用即可。

属性介绍

为了让功能灵活多变,也为了满足更多的需求样式,目前自定义了很多属性,大家可以按自己的需要进行设置,或者直接去GitHub中下载源码更改也可以。

SearchLayout(搜索框属性)

属性

类型

概述

search_icon

reference

搜索图标,可直接从drawable或者mipmap中设置

search_icon_width

dimension

搜索图标的宽

search_icon_height

dimension

搜索图标的高

search_icon_left

dimension

搜索图标距离左边的距离

search_icon_delete

reference

搜索删除图标,右侧的删除

search_icon_delete_width

dimension

搜索删除图标的宽

search_icon_delete_height

dimension

搜索删除图标的高

search_icon_delete_right

dimension

搜索删除图标距离右边的距离

search_hint

string

搜索框占位字符

search_hint_color

color

搜索框占位字符颜色

search_color

color

搜索框文字颜色

search_size

dimension

搜索框文字大小

search_text_cursor

reference

搜索框光标

search_bg

reference

整个搜索框背景

SearchList(搜索列表属性)

属性

类型

概述

is_hot_flex_box_or_grid

boolean

热门搜索列表样式,是网格还是流式布局

is_hot_center

boolean

热门搜索列表样式,内容是否居中

hot_grid_span_count

integer

热门搜索列表样式,如果是网格布局,条目列数,默认2

hot_item_top_margin

integer

热门搜索列表 item距离上边的距离

hot_item_color

color

热门搜索列表 item 文字颜色

hot_item_size

dimension

热门搜索列表 item 文字大小

hot_item_line

integer

热门搜索列表 item 文字展示几行

hot_item_bg

reference

热门搜索列表 item 背景

hot_item_margin_top

reference

热门搜索列表 item 距离上边的距离

hot_padding_left

dimension

热门搜索列表 内边距,左

hot_padding_top

dimension

热门搜索列表 内边距,上

hot_padding_right

dimension

热门搜索列表 内边距,右

hot_padding_bottom

dimension

热门搜索列表 内边距,下

is_history_flex_box_or_grid

boolean

历史搜索列表样式,是网格还是流式布局

history_flex_box_count

integer

历史搜索列表,最多展示几个item,默认10

is_history_center

boolean

历史搜索列表样式,内容是否居中

history_grid_span_count

integer

历史搜索列表样式,如果是网格布局,条目列数,默认2

history_item_top_margin

integer

历史搜索列表 item距离上边的距离

history_item_color

color

历史搜索列表 item 文字颜色

history_item_size

dimension

历史搜索列表 item 文字大小

history_item_margin_top

dimension

历史搜索列表 item 距离上边的距离

is_visibility_history_clear

boolean

历史搜索右边是否展示清除小按钮

history_clear_icon

reference

历史搜索右边的清除小按钮

history_clear_text

string

历史搜索右边的清除文字

history_clear_size

dimension

历史搜索右边的清除文字大小

history_clear_color

color

历史搜索右边的清除文字颜色

history_padding_left

dimension

历史搜索列表 内边距,左

history_padding_top

dimension

历史搜索列表 内边距,上

history_padding_right

dimension

历史搜索列表 内边距,右

history_padding_bottom

dimension

历史搜索列表 内边距,下

三、具体代码实现

关于这个组合View的实现方式,我是分为了两个View,大家在上边的使用中应该也看到了,一个是搜索框SearchLayout,一个是搜索框下面的搜索列表展示SearchList,开头就阐述了,没啥技术含量,简单的罗列下代码实现吧。

SearchLayout是一个组合View,中间是一个EditText,左右两边是一个ImageView,也就是搜索图标和删除图标,如下图:

SearchLayout本身没有啥要说的,无非就是把View组合到了一起,在开发的时候,既然要给别人使用,那么就要拓展出很多的动态属性或者方法出来,这是很重要的,所以,在封装的时候,自定义属性无比的重要,需要精确和认真,这一块没啥好说的,有一点需要注意,也就是EditText绑定软键盘搜索,除了设置属性android:imeOptions="actionSearch",也要设置,android:singleLine="true",方可生效。

SearchList其实也没啥好说的,也是一个组合View,使用的是上下两个RecyclerView来实现的,至于流失布局,采用的是google提供的flexbox,设置布局管理器即可。

recyclerView.layoutManager = FlexboxLayoutManager(mContext)

除了这个之外,可能需要阐述的也就是最近搜索的存储机制了,存储呢,Android中提供了很多的存储方式,比如数据库,SharedPreferences,SD卡,还有DataStore,MMKV等,无论哪一种吧,选择适合的即可,这个开源中,不想引入其他的三方了,直接使用的是SharedPreferences。

具体的实现方式,把搜索的内容,转成json串,以json串的形式进行存储,这里借助了原生的JSONArray和JSONObject。流程就是,触发搜索内容后,先从SharedPreferences取出之前存储的内容,放到JSONArray中,当前搜索内容如果存在JSONArray中,那边就要执行删除原来的,再把新的内容插入到第一个的位置,如果不存在JSONArray中,直接添加即可,随后再转成字符串存储即可。

当然了,一般在正常的需求开发中,最近搜索列表肯定不是无限展示的,都有固定的展示个数,比如10个,比如15个,所以,当超过指定的个数,也就是指定的阀门后,就要执行删除的操作。

val searchHistory = getSearchHistory()

        if (!TextUtils.isEmpty(it)) {
            val jsonArray: JSONArray = if (TextUtils.isEmpty(searchHistory)) {
                JSONArray()
            } else {
                JSONArray(searchHistory)
            }

            val json = JSONObject()
            json.put("content", it)

            //如果出现了一样的,删除后,加到第一个
            var isEqual = false
            var equalPosition = 0
            for (i in 0 until jsonArray.length()) {
                val item = jsonArray.getJSONObject(i)
                val content = item.getString("content")
                if (it == content) {
                    isEqual = true
                    equalPosition = i
                    break
                }
            }
            //有一样的
            if (isEqual) {
                jsonArray.remove(equalPosition)
            } else {
                //超过了指定的阀门之后,就不在扩充
                if (jsonArray.length() >= mHistoryListSize) {
                    jsonArray.remove(0)
                }
            }

            jsonArray.put(json)

            SearchSharedPreUtils.put(mContext!!, "search_history", jsonArray.toString())
        }

        getSearchHistory()?.let {
            eachSearchHistory(it)
        }
        //两个有一个不为空,展示
        if (!TextUtils.isEmpty(it) || !TextUtils.isEmpty(searchHistory)) {
            showOrHideHistoryLayout(View.VISIBLE)
        }

当然了,存储的逻辑,有很多的实现的方式,这里并不是最优的,只是提供了一种思路,大家可以按照自己的方式来操作。

四、开源地址及总结

开源地址:https://github.com/AbnerMing888/SearchLayout

搜索列表,无论是热门还是最近的搜索列表,均支持网格和流失布局形式展示,大家看属性相关介绍中即可。这个搜索框本身就是很简单的效果还有代码,大家直接看源码或文中介绍即可,就不多赘述了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/4369.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

最全面的Mybatis教程,从“开局”到“通关”,Ready Go!

前言 本文为SSM框架 【Mybatis】 相关知识&#xff0c;MyBatis 是一款优秀的半自动的ORM持久层框架&#xff0c;下边将对Mybatis的简介、Mybatis的CRUD实现&#xff0c;Mybatis的配置文件&#xff0c;Mybatis的日志配置&#xff0c;resultMap详解&#xff0c;分页实现&#xff…

Vulnhub_CengBox

目录 一 环境异常处理 &#xff08;一&#xff09;nat设置无法正常获取地址 1 单用户模式进入命令行 2 passwd更改 3 修改网络配置文件 二 环境测试 &#xff08;一&#xff09;信息收集 1 端口服务 2 目录扫描 &#xff08;二&#xff09;漏洞测试 1 SQL…

SpringBoot项目的创建(一):通过idea的Spring Initializr来创建(需联网以下载SpringBoot相关的模板)

SpringBoot项目的创建1. 环境准备2. 创建SpringBoot项目3. 创建的SpringBoot项目结构如下4. 添加代码测试web页面效果1. 环境准备 安装jdk和idea&#xff0c;tomcat可不安装&#xff0c;有内置的tomcat 2. 创建SpringBoot项目 打包成war后&#xff0c;需要部署到tomcat中再运…

大数据培训技术操作Flume测试监控

大数据培训技术操作Flume测试监控 1&#xff09;修改/opt/module/flume/conf目录下的flume-env.sh配置&#xff1a; JAVA_OPTS”-Dflume.monitoring.typeganglia -Dflume.monitoring.hosts192.168.9.102:8649 -Xms100m -Xmx200m” 2&#xff09;启动Flume任务 [atguiguh…

关于微前端,你理解到究极奥义了么?

微前端的起源 在微前端这个概念出现之前&#xff0c;我们或多或少都能够联想到另一个词性上有些相似的概念微服务&#xff0c;它从出现后便一直都很火热&#xff0c;并不断催生着后端架构体系的演进&#xff0c;而此刻我们如果细品一下这微字头的两兄弟&#xff0c;探究他们的诞…

大白鲨优化算法(WSO)(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

2022年Java发展怎么样?现在学了Java技术出来是否还能找到工作?

马云爸爸说过&#xff0c;未来的制造业要的不是石油&#xff0c;最大的能源应该是数据。不管你是上网购物&#xff0c;还是手机浏览咨询&#xff0c;甚至是政府机构&#xff0c;大型跨国集团系统&#xff0c;银行&#xff0c;背后的庞大的数据处理都是由Java来完成&#xff0c;…

FPGA时序约束02——不同时序路径的分析方法

前言前文&#xff08;FPGA时序约束01——基本概念&#xff09;中介绍了四种时序路径&#xff0c;如下图所示。 分别是触发器到触发器&#xff0c;触发器到输出端&#xff0c;输入端到触发器&#xff0c;输入端到输出端&#xff0c;其中输入端到输出端是纯组合逻辑路径&#xff…

外包做的系统宕机了,逼得我重新设计一套MySQL数据库架构!

V-xin&#xff1a;ruyuanhadeng获得600页原创精品文章汇总PDF 目录 一般业务系统运行流程图一台 4 核 8G 的机器能扛多少并发量呢&#xff1f;高并发来袭时数据库会先被打死吗&#xff1f;8 核 16G 的数据库每秒大概可以抗多少并发压力&#xff1f;数据库架构可以从哪些方面优…

[Android移动安全渗透基础教程] 如何为Android Studio 模拟器(AVD)设置Frida?

也许每个人出生的时候都以为这世界都是为他一个人而存在的&#xff0c;当他发现自己错的时候&#xff0c;他便开始长大 少走了弯路&#xff0c;也就错过了风景&#xff0c;无论如何&#xff0c;感谢经历 0x01 如何为Android Studio 模拟器&#xff08;AVD&#xff09;设置Frid…

全志V853 NPU 系统介绍

NPU 系统介绍 V853 芯片内置一颗 NPU&#xff0c;其处理性能为最大 1 TOPS 并有 128KB 内部高速缓存用于高速数据交换&#xff0c;支持 OpenCL、OpenVX、android NN 与 ONNX 的 API 调用&#xff0c;同时也支持导入大量常用的深度学习模型。 NPU 系统架构 NPU 的系统架构如下…

猿创征文| 六款我的开发者宝藏工具箱

目录 No.1 | 亿图图示 简介&#xff1a; 推荐之处&#xff1a; 下载途径&#xff1a; Show time&#xff1a; No.2 | 飞书 简介&#xff1a; 推荐之处&#xff1a; 下载途径&#xff1a; Show time&#xff1a; No.3 | 迅捷PDF转换器 简介&#xff1a; 推荐之处&#xff1a; …

Allegro SigXplorer 等长设置方法-比较简单

使用方法示一&#xff1a; 1、如图SDRAM的连线U2到U5、U6和U7的地址线均需要设置等长&#xff0c;常规我们对每个网络设置pin pair&#xff0c;会比较繁琐&#xff0c;设过的人都知道。 使用方法二&#xff1a; 2、开始设置&#xff0c;打开规则管理器&#xff0c;在电气规则…

HTML爱心代码 | 一起体验理工男的极致浪漫(电视剧男主同款)

写在前面 大家好&#xff0c;我是陈橘又青&#xff0c;今天中午刷微博&#xff0c;看到最近《点燃我温暖你》中男主角——理工男李峋的爱心代码撩到了无数人&#xff0c;于是把代码开源分享给大家。 文章目录写在前面运行示例完整代码保姆级运行教学添加背景图片修改爱心颜色运…

软件工程毕业设计课题(17)基于python的毕业设计python鲜花水果商城系统毕设作品源码

项目背景和意义 目的&#xff1a;伴随着互联网技术的不断发展和完善&#xff0c;在人们的生活和工作的各个方面&#xff0c;互联网都有着非常重大的影响。伴随着国内电子商务行业的迅猛发展&#xff0c;消费者现在能够轻松的实现足不出户的&#xff0c;仅仅通过网络购物平台就可…

这些包括我在内都有的Python编程陋习,趁早改掉

B站|公众号&#xff1a;啥都会一点的研究生 相关阅读 整理了几个100%会踩的Python细节坑&#xff0c;提前防止脑血栓 整理了十个100%提高效率的Python编程技巧&#xff0c;更上一层楼 Python-列表&#xff0c;从基础到进阶用法大总结&#xff0c;进来查漏补缺 Python-元组&…

pytest参数化详解

文章目录一.概念二.单个参数三.多个参数案例1案例2:使用py文件存放测试数据案例3:使用yaml文件存放测试数据案例4:使用json文件存放测试数据四.对测试类参数化案例1一.概念 参数化&#xff0c;就是把测试过程中的数据提取出来&#xff0c;通过参数传递不同的数据来驱动用例运行…

健身房信息管理系统(PHP+Html+MySQL)

3.需求分析 3.1 健身房管理系统功能需求 健身房管理信息系统&#xff0c;提供动作教学&#xff0c;健身基本动作可视化&#xff0c;健身知识层次化&#xff0c;一个完整的健身房管理系统&#xff0c;为健身爱好者对健身知识的了解和健身动作的了解提供了便利&#xff0c;系统应…

网络协议:透彻解析HTTPS协议

本篇内容包括&#xff1a;HTTPS 协议概述&#xff0c;SSL 与 TLS&#xff08;SSL 与 TLS 概述、SSL证书 和 SSL 与 TLS 二者之间关系&#xff09;&#xff0c;以及 HTTPS 下浏览器访问一个网站的全过程的内容&#xff01; 文章目录一、HTTPS 协议概述二、SSL 与 TLS1、SSL 与 T…

两种让python输出更加美观的方式,三分钟看完就会

嗨害大家好鸭&#xff01;我是小熊猫❤ 最近要给大家持续带来干货输出啦&#xff01; 赶紧收藏起来&#xff0c;以后查漏补缺要用到的喔~ 源码、资料电子书点击这里 1.输出格式美化 Python两种输出值的方式: 表达式语句和 print() 函数。 (第三种方式是使用文件对象的 write…