Android 简单实现联系人列表+字母索引联动效果

请添加图片描述
效果如上图。

Main Ideas

  1. 左右两个列表
  2. 左列表展示人员数据，含有姓氏首字母的 header item
  3. 右列表是一个全由姓氏首字母组成的索引列表，点击某个item，展示一个气泡组件(它会自动延时关闭)， 左列表滚动并显示与点击的索引列表item 相同的 header
  4. 搜索动作后，匹配人员名称中是否包含搜索字符串，或搜索字符串为单一字符时，是否能匹配到某个首字母；而且滚动后，左右列表都能滚动至对应 Header 或索引处。

Steps

S1. 汉字拼音转换

先找到了 Pinyin4J 这个库；后来发现没有对多音字姓氏 的处理；之后找到 TinyPinyin ，它可以自建字典，指明多音汉字(作为姓氏时)的指定读音。

fun initChinaNamesDictMap() {
    // 增加 多音字 姓氏拼音词典
    Pinyin.init(
        Pinyin.newConfig()
        .with(object : PinyinMapDict() {
            override fun mapping(): MutableMap<String, Array<String>> {
                val map = hashMapOf<String, Array<String>>()
                map["解"] = arrayOf("XIE")
                map["单"] = arrayOf("SHAN")
                map["仇"] = arrayOf("QIU")
                map["区"] = arrayOf("OU")
                map["查"] = arrayOf("ZHA")
                map["曾"] = arrayOf("ZENG")
                map["尉"] = arrayOf("YU")
                map["折"] = arrayOf("SHE")
                map["盖"] = arrayOf("GE")
                map["乐"] = arrayOf("YUE")
                map["种"] = arrayOf("CHONG")
                map["员"] = arrayOf("YUN")
                map["繁"] = arrayOf("PO")
                map["句"] = arrayOf("GOU")
                map["牟"] = arrayOf("MU") // mù、móu、mū
                map["覃"] = arrayOf("QIN")
                map["翟"] = arrayOf("ZHAI")
                return map
            }
        })
    )
}

// Pinyin.toPinyin(char) 方法不使用自定义字典
而使用 Pinyin.toPinyin(nameText.first().toString(), ",").first() // 将 nameText 的首字符，转为拼音，并取拼音首字母

S2. 数据bean 和 item view

对原有数据bean 增加 属性：

data class DriverInfo(
    var Name: String?, // 人名
    var isHeader: Boolean, // 是否是 header item
    var headerPinyinText: String? // header item view 的拼音首字母
)

左列表的 item view，当数据是 header时，仅显示 header textView (下图红色的文字)，否则仅显示 item textView (下图黑色的文字)：
在这里插入图片描述
右列表的 item view，更简单了，就只含一个 TextView 。

S3. 处理数据源

这一步要做的是：转拼音；拼音排序；设置 isHeader、headerPinyinText 属性；构建新的数据源集合 …

// 返回新的数据源
fun getPinyinHeaderList(list: List<DriverInfo>): List<DriverInfo> {
    list.forEachIndexed { index, driverInfo ->
        if (driverInfo.Name.isNullOrEmpty()) return@forEachIndexed
        // Pinyin.toPinyin(char) 方法不使用自定义字典
        val header = Pinyin.toPinyin(driverInfo.Name!!.first().toString(), ",").first()
        driverInfo.headerPinyinText = header.toString()
    }
    // 以拼音首字母排序
    (list as MutableList).sortBy { it.headerPinyinText }
    val newer = mutableListOf<DriverInfo>()
    list.forEachIndexed { index, driverInfo ->
        val newHeader = index == 0 || driverInfo.headerPinyinText != list[index - 1].headerPinyinText
        if (newHeader) {
            newer.add(DriverInfo(null, true, driverInfo.headerPinyinText))
        }
        newer.add(driverInfo)
    }
    return newer
}

当左侧列表有了数据源之后，那右侧的也就可以有了：将所有 header item 的 headerPinyinText 取出，并转为 新的 集合。

val indexList = driverList?.filter { it.isHeader }?.map { it.headerPinyinText ?: ""} ?: arrayListOf()
indexAdapter.updateData(indexList)

S4. Adapter 的点击事件

这里省略设置 adapter 、LinearLayoutManager 等 样板代码 …

设定：左侧的适配器名为 adapter， 右侧字母索引名为 indexAdapter；左侧 RV 名为 recyclerView，右侧的名为了 rvIndex。

  1. 左侧的点击事件，不会触发右侧的联动
override fun onItemClick(position: Int, data: DriverInfo) {
    if (data.isHeader) return
    // 如果是点击 item， 做自己的业务
}
  1. 右侧点击事件，会触发左侧的滚动；还可以触发气泡 view 的显示，甚至自身的滚动
override fun onItemClick(position: Int, data: DriverInfo) {
    val item = adapter.dataset.first { it.isHeader && it.headerPinyinText == data }
    val index = adapter.dataset.indexOf(item)
//  mBind.recyclerView.scrollToPosition(index)
    (mBind.recyclerView.layoutManager as LinearLayoutManager).scrollToPositionWithOffset(index, 0)

//  mBind.rvIndex.scrollToPosition(position)
    val rightIndex = indexAdapter.dataset.indexOf(item.headerPinyinText)
    (mBind.rvIndex.layoutManager as LinearLayoutManager).scrollToPositionWithOffset(rightIndex, 0)
    showBubbleView(position, data)
}

一开始用 rv#scrollToPosition()，发现也能滚动。但是呢，指定 position 之后还有其它内容时，且该位置之前也有很多的内容；点击后，仅将 该位置 item ，显示在页面可见项的最后一个位置。 改成 LinearLayoutManager#scrollToPositionWithOffset()后，更符合预期。

S5. 气泡 view

<widget.BubbleView
      android:id="@+id/bubbleView"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:visibility="invisible"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="@id/rv_index" />

设置 文本；获取点击的 item view；根据 item view 的位置 进行显示设置；延迟1秒 隐藏气泡：

private fun showBubbleView(position: Int, data: String) {
    lifecycleScope.launch {
        mBind.bubbleView.setText(data)
        val itemView = mBind.rvIndex.findViewHolderForAdapterPosition(position)?.itemView ?: return@launch
        mBind.bubbleView.showAtLocation(itemView)
        delay(1000)
        mBind.bubbleView.visibility = View.GONE
    }
}

自定义 气泡 view：

/**
 * desc:    指定view左侧显示的气泡view
 * author:  stone
 * email:   aa86799@163.com
 * time:    2024/9/27 18:22
 */
class BubbleView(context: Context, attrs: AttributeSet? = null) : View(context, attrs) {  

    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {  
        color = resources.getColor(R.color.syscolor)
        style = Paint.Style.FILL  
    }  

    private val textPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {  
        color = Color.WHITE  
        textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50f, resources.displayMetrics)
        textAlign = Paint.Align.CENTER  
    }  

    private val path = Path()  
    private var text: String = ""  

    fun setText(text: String) {  
        this.text = text  
        invalidate()  
    }  

    override fun onDraw(canvas: Canvas) {  
        super.onDraw(canvas)  

        // 绘制贝塞尔曲线气泡  
        path.reset()  
        path.moveTo(width / 2f, height.toFloat())  
        path.quadTo(width.toFloat(), height.toFloat(), width.toFloat(), height / 2f)  
        path.quadTo(width.toFloat(), 0f, width / 2f, 0f)  
        path.quadTo(0f, 0f, 0f, height / 2f)  
        path.quadTo(0f, height.toFloat(), width / 2f, height.toFloat())  
        path.close()  

        canvas.drawPath(path, paint)  

        // 绘制文本  
        canvas.drawText(text, width / 2f, height / 2f + textPaint.textSize / 3, textPaint)
    }

    fun showAtLocation(view: View) {
        view.let {
            val location = IntArray(2)
            it.getLocationOnScreen(location)
            // 设置气泡的位置
            x = location[0] - width.toFloat() - 10
            y = location[1] - abs(height - it.height) / 2f - getStatusBarHeight()
            visibility = View.VISIBLE
        }
    }

    private fun getStatusBarHeight(): Int {
        var result = 0
        val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")
        if (resourceId > 0) {
            result = resources.getDimensionPixelSize(resourceId)
        }
        return result
    }
}

S6. 搜索实现

  • 空白输入字符时，左侧返回全数据源；右侧列表跟随左侧变化。
  • 有输入时，根据全数据源，获取 匹配的子数据源；右侧列表跟随左侧变化。
fun filterTextToNewHeaderList(list: List<DriverInfo>?, text: String): List<DriverInfo>? {
    // 如果item 的拼音和 查询字符 相同；或者，非 header 时，名称包含查询字符
    val filterList = list?.filter { it.headerPinyinText?.equals(text, true) == true
            || !it.isHeader && it.Name?.contains(text, ignoreCase = true) == true }
    if (filterList.isNullOrEmpty()) {
        return null
    }
    val newer = mutableListOf<DriverInfo>()
    filterList.forEachIndexed { index, driverInfo ->
        val newHeader = (index == 0 || driverInfo.headerPinyinText != filterList[index - 1].headerPinyinText) && !driverInfo.isHeader
        if (newHeader) {
            newer.add(DriverInfo(null, true, driverInfo.headerPinyinText))
        }
        newer.add(driverInfo)
    }
    return newer
}

// 搜索点击
mBind.tvSearch.setOnClickListener {
    val beanList: List<DriverInfo>? = adapter.filterTextToNewHeaderList(driverList, text)
    adapter.updateData(beanList)

    val indexList = beanList.filter { it.isHeader }.map { it.headerPinyinText ?: ""}
    indexAdapter.updateData(indexList)
}

整体核心实现都贴出来了，如果有什么bug，欢迎回复

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Meta首款多模态Llama 3.2开源：支持图像推理，还有可在手机上运行的版本 | LeetTalk Daily...

Meta首款多模态Llama 3.2开源：支持图像推理，还有可在手机上运行的版本 | LeetTalk Daily...

“LeetTalk Daily”&#xff0c;每日科技前沿&#xff0c;由LeetTools AI精心筛选&#xff0c;为您带来最新鲜、最具洞察力的科技新闻。 Meta最近推出的Llama Stack的发布标志着一个重要的里程碑。这一新技术的推出不仅为开发者提供了强大的多模态能力&#xff0c;还为企业和初…
阅读更多...
基于单片机的多路温度检测系统

基于单片机的多路温度检测系统

**单片机设计介绍&#xff0c;基于单片机CAN总线的多路温度检测系统设计 文章目录 前言概要功能设计设计思路 软件设计效果图 程序设计程序 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师&#xff0c;一名热衷于单片机技术探…
阅读更多...
详细介绍：API 和 SPI 的区别

详细介绍：API 和 SPI 的区别

文章目录 Java SPI (Service Provider Interface) 和 API (Application Programming Interface) 的区别详解目录1. 定义和目的1.1 API (Application Programming Interface)1.2 SPI (Service Provider Interface) 2. 使用场景2.1 API 的应用场景2.2 SPI 的应用场景 3. 加载和调…
阅读更多...
Python的异步编程

Python的异步编程

什么是协程&#xff1f; 协程不是计算机系统提供&#xff0c;程序员人为创造。 协程也可以被称为微线程&#xff0c;是一种用户态内的上下文切换技术。简而言之&#xff0c;其实就是通过一个线程实现代码块相互切换执行。 实现协程有那么几种方法&#xff1a; greenlet&…
阅读更多...
Qt/C++ 解决调用国密SM3，SM4加密解密字符串HEX,BASE64格式转换和PKCS5Padding字符串填充相关问题

Qt/C++ 解决调用国密SM3，SM4加密解密字符串HEX,BASE64格式转换和PKCS5Padding字符串填充相关问题

项目中遇到了需要与JAVA WEB接口使用SM3,SM4加密数据对接的需求&#xff0c;于是简单了解了下SM3与SM4加密算法在C环境下的实现。并使用Qt/C还原了在线SM3国密加密工具和在线SM4国密加密解密工具网页的示例功能的实现 目录导读 前言SM3算法简介SM4算法简介 实现示例字符串HEX,B…
阅读更多...
慢病中医药膳养生食疗管理微信小程序、基于微信小程序的慢病中医药膳养生食疗管理系统设计与实现、中医药膳养生食疗管理微信小程序的开发与应用（源码+文档+定制）

慢病中医药膳养生食疗管理微信小程序、基于微信小程序的慢病中医药膳养生食疗管理系统设计与实现、中医药膳养生食疗管理微信小程序的开发与应用（源码+文档+定制）

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…
阅读更多...
计算机网络：计算机网络体系结构 —— 专用术语总结

计算机网络：计算机网络体系结构 —— 专用术语总结

文章目录 专用术语实体协议服务服务访问点 SAP 服务原语 SP 协议数据单元 PDU服务数据单元 SDU 专用术语 实体 实体是指任何可以发送或接收信息的硬件或软件进程 对等实体是指通信双方处于相同层次中的实体&#xff0c;如通信双方应用层的浏览器进程和 Web 服务器进程。 协…
阅读更多...
docker 部署 Seatunnel 和 Seatunnel Web

docker 部署 Seatunnel 和 Seatunnel Web

docker 部署 Seatunnel 和 Seatunnel Web 说明&#xff1a; 部署方式前置条件&#xff0c;已经在宿主机上运行成功运行文件采用挂载宿主机目录的方式部署SeaTunnel Engine 采用的是混合模式集群 编写Dockerfile并打包镜像 Seatunnel FROM openjdk:8 WORKDIR /opt/seatunne…
阅读更多...
【在Linux世界中追寻伟大的One Piece】System V共享内存

【在Linux世界中追寻伟大的One Piece】System V共享内存

目录 1 -> System V共享内存 1.1 -> 共享内存数据结构 1.2 -> 共享内存函数 1.2.1 -> shmget函数 1.2.2 -> shmot函数 1.2.3 -> shmdt函数 1.2.4 -> shmctl函数 1.3 -> 实例代码 2 -> System V消息队列 3 -> System V信号量 1 -> Sy…
阅读更多...
基于两分支卷积和 Transformer 的轻量级多尺度特征融合超分辨率网络 !

基于两分支卷积和 Transformer 的轻量级多尺度特征融合超分辨率网络 !

当前的单图像超分辨率&#xff08;SISR&#xff09;算法有两种主要的深度学习模型&#xff0c;一种是基于卷积神经网络&#xff08;CNN&#xff09;的模型&#xff0c;另一种是基于Transformer的模型。前者利用不同卷积核大小的卷积层堆叠来设计模型&#xff0c;使得模型能够更…
阅读更多...
OpenFeign微服务部署

OpenFeign微服务部署

一.开启nacos 和redis 1.查看nacos和redis是否启动 docker ps2.查看是否安装nacos和redis docker ps -a3.启动nacos和redis docker start nacos docker start redis-6379 docker ps 二.使用SpringSession共享例子 这里的两个例子在我的一个博客有创建过程&#xff0c…
阅读更多...
rtmp协议转websocketflv的去队列积压

rtmp协议转websocketflv的去队列积压

websocket server的优点 websocket server的好处&#xff1a;WebSocket 服务器能够实现实时的数据推送&#xff0c;服务器可以主动向客户端发送数据 1 不需要客户端不断轮询。 2 不需要实现httpserver跨域。 在需要修改协议的时候比较灵活&#xff0c;我们发送数据的时候比较…
阅读更多...
Linux云计算 |【第四阶段】RDBMS1-DAY3

Linux云计算 |【第四阶段】RDBMS1-DAY3

主要内容&#xff1a; 子查询&#xff08;单行单列、多行单列、单行多列、多行多列&#xff09;、分页查询limit、联合查询union、插入语句、修改语句、删除语句 一、子查询 子查询就是指的在一个完整的查询语句之中&#xff0c;嵌套若干个不同功能的小查询&#xff0c;从而一…
阅读更多...
安宝特案例 | 某知名日系汽车制造厂，借助AR实现智慧化转型

安宝特案例 | 某知名日系汽车制造厂，借助AR实现智慧化转型

案例介绍 在全球制造业加速数字化的背景下&#xff0c;工厂的生产管理与设备维护效率愈发重要。 某知名日系汽车制造厂当前面临着设备的实时监控、故障维护&#xff0c;以及跨地域的管理协作等挑战&#xff0c;由于场地分散和突发状况的不可预知性&#xff0c;传统方式已无法…
阅读更多...
大模型部署——NVIDIA NIM 和 LangChain 如何彻底改变 AI 集成和性能

大模型部署——NVIDIA NIM 和 LangChain 如何彻底改变 AI 集成和性能

DigiOps与人工智能 人工智能已经从一个未来主义的想法变成了改变全球行业的强大力量。人工智能驱动的解决方案正在改变医疗保健、金融、制造和零售等行业的企业运营方式。它们不仅提高了效率和准确性&#xff0c;还增强了决策能力。人工智能的价值不断增长&#xff0c;这从它处…
阅读更多...
Html 转为 MarkDown

Html 转为 MarkDown

在 RAG 中，通常需要将 HTML 转为 Markdown，有很多第三方 API 都支持 HTML 的转换，本文使用一个代码文档的例子 https://www.joinquant.com/help/api/help#name:Stock，将聚宽 API 转为 Markdown。本文通过两种方式进行实现，使用收费和开源的解决方案。聚宽 API 格式转为 Ma…
阅读更多...
【Linux】几种常见配置文件介绍

【Linux】几种常见配置文件介绍

配置文件目录 linux 系统中有很多配置文件目录 /etc/systemd/system /lib/systemd/system /usr/lib/systemd/system 【结果就是这个目录配置文件是源头】 这三者有什么样的关系呢&#xff1f; 以下是网络上找的资料汇总&#xff0c;并加了一些操作验证。方便后期使用 介…
阅读更多...
鸿蒙NEXT开发环境搭建（基于最新api12稳定版）

鸿蒙NEXT开发环境搭建（基于最新api12稳定版）

注意&#xff1a;博主有个鸿蒙专栏&#xff0c;里面从上到下有关于鸿蒙next的教学文档&#xff0c;大家感兴趣可以学习下 如果大家觉得博主文章写的好的话&#xff0c;可以点下关注&#xff0c;博主会一直更新鸿蒙next相关知识 专栏地址: https://blog.csdn.net/qq_56760790/…
阅读更多...
Linux 进程的基本概念及描述

Linux 进程的基本概念及描述

目录 0.前言 1. 什么是进程 1.1 进程的定义与特性 1.2 进程与线程的区别 2.描述进程 2.1 PCB (进程控制块) 2.2 task_struct 3.查看进程 3.1 查看进程信息 3.1.1 /proc 文件系统 3.1.2 ps 命令 3.1.2 top 和 htop 命令 3.2 获取进程标识符 3.2.1使用命令获取PID 3.2.2 使用C语言…
阅读更多...
中原台球展，2025郑州台球展会，中国台球产业链发展大会

中原台球展，2025郑州台球展会，中国台球产业链发展大会

阳春三月&#xff0c;万物复苏&#xff0c;商机无限&#xff1b;品牌宣传正当季&#xff0c;产品招商正当时&#xff0c;新品发布好时期。抓住台球发展的这波财富机遇&#xff0c;借助壹肆柒郑州台球展这个超级平台&#xff0c;将品牌和产品快速打造成为覆盖全国市场的顶流。20…
阅读更多...
最新文章

Copyright @ 2022~2023