动手写一个简单的Android 表格控件支持固定列

Android 动手写一个简洁版表格控件

简介

源码已放到 gitee

作为在测绘地理信息行业中穿梭的打工人,遇到各种数据采集需求,既然有数据采集需求,那当然少不了数据展示功能,最常见的如表格方式展示。
当然,类似表格这些控件网上也有挺多开源的,但是经过我一番思考,决定自己动手撸一个,还能了解下原理。

实现思路

如下图所示,我们把表格拆分成三部分,表头、固定列、表格内容,其中固定列顾名思义,位置固定,内容部分,当宽度超过可视范围时,可左右滚动
表格结构
对于表格垂直方向的滚动,我们可以用Rrecyclerview 来实现,那么水平方向的滚动,我们可以使用HorizontalScrollerView,
这样我们就可以得到一个初步的表格雏形,对应类暂且叫RPWDataGridView
行设计

关键属性、接口代码:

class RPWDataGridView<T> @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : LinearLayout(context, attrs) {
    private val headerView: RPWDataGridIRowItemView
	//表头
    private val recyclerView: RecyclerView//表格内容
    private val columns = mutableListOf<RPWDataGridColumn>()
	//列参数,每一行共用同一列参数,保证每个单元格的宽度一致
    private var horScrollOffset = 0
	 //当前水平滚动偏移量,保证每一行滚动量一致

    private val dataSource = mutableListOf<T>()
	 //数据源
    private var dataGridAdapter = DataGridAdapter() //数据适配器


 	fun build(vararg columns: RPWDataGridColumn) {//构建表格结构
		 //...
	 }
 
     /**
     * 设置表格数据源
     */
    fun setDataSource(data: List<T>) {
    //...
    }
}

众所周知,每一行里面又会按列分成狠多单元格,所以我们还得再把HorizontalScrollerView按列细分,里面单元格通过动态添加TextView来实现,由于需要固定列,所以为了方便实现固定的逻辑,我们做如下设计:

在这里插入图片描述
然后封装一个表格的行控件,暂且命名为RPWDataGridIRowItemView,该控件View的结构如上图所示,固定列使用一个LinearLayout ,滚动列使用HorizontalScrollerView, 代码层面,伪代码:

  1. View层:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/llRoot"
    android:layout_width="match_parent"
    android:layout_height="@dimen/ui_data_grid_row_min_height"
    android:background="@drawable/data_grid_view_row_item_background"
    android:clickable="true"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/llFreezeColumn"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:showDividers="middle" />


    <View
        android:id="@+id/viewVerHeaderDivider"
        android:background="@color/ui_data_grid_header_divider_color"
        android:layout_width="@dimen/ui_data_grid_header_divider_size"
        android:layout_height="match_parent"/>

    <com.rpw.view.RPWHorizontalScrollView
        android:id="@+id/horScrollView"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scrollbars="none">

        <LinearLayout
            android:id="@+id/llScrollColumn"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:showDividers="middle" />
    </com.rpw.view.RPWHorizontalScrollView>
</LinearLayout>
  1. 代码层
class RPWDataGridIRowItemView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : LinearLayout(context, attrs) {

    //冻结列父布局
    private val llFreezeColumn: LinearLayout
    //滚动列父布局
    private val llScrollColumn: LinearLayout
    //RPWDataGridColumn为列参数
    fun addColumn(column: RPWDataGridView.RPWDataGridColumn) {
      if (column.freeze) {
        llFreezeColumn.addView(TextView())
      }else{
       llScrollColumn.addView(TextView())
      }
    }

}

然后把他作为RecyclerViewItemView 加载到每一行中。
那么问题来了,每一行都有自己的滚动View,各滚各的,这跟表格也不一样。
所以,为了解决这个问题,我们需要给每个HorizontalScrollerView 注册滚动监听,当某个HorizontalScrollerView 发生滚动,我们把其他的HorizontalScrollerView 也设置同样的滚动量不就可以对齐了吗。
是的,但是在实现这个逻辑前,由于他不对外暴露滚动状态,我们还得继承HorizontalScrollerView 重写 onScrollChanged 函数,暂且命名为RPWHorizontalScrollView,我们专属的水平滚动View。
国际惯例,上关键代码:

public class RPWHorizontalScrollView extends HorizontalScrollView {

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (null != listener)
            listener.onCustomScrollChange(RPWHorizontalScrollView.this, l, t, oldl, oldt);
//通知滚动变化
    }

}

接下来,我们还需要补充一下对齐RecyclerView 中所有已加载的ItemView ,这个代码需要写到表格控件RPWDataGridView 中,与其他行共享同一偏移量,对齐关键代码如下:


    /**
     * 对齐当前视图下每一行的滚动偏移
     */
    private fun alignItems(scrollX: Int) {
        val layoutManager = recyclerView.layoutManager as LinearLayoutManager
        for (i in 0..layoutManager.childCount) {
            val v = layoutManager.getChildAt(i)
            if (v != null) {
                val vh = recyclerView.getChildViewHolder(v) as RPWDataGridView<*>.DataGridViewHolder
                vh.rowView.scrollTo(scrollX, 0)
                Log.i(TAG, "alignItems: $horScrollOffset")
            }
        }
        horScrollOffset = scrollX
        headerView.setHorOffset(horScrollOffset)
tHorOffset(horScrollOffset)
//给表头也设置相同的滚动量
    }

然后在适配器中监听和绑定每一行的滚动量,给他设置到全局horScrollOffset 中,在适配器onBindViewHolder 的时候,给他设置这个偏移量,实现新的行也对齐。
完整封装的代码就不在这里详细展示了,有兴趣可以到Gitee上查看

使用方法

   with(rpwDataGridView) {
            verDividerParams.show = false
            verDividerParams.showHeaderDivider = true
            horDividerParams.show = true
            horDividerParams.showHeaderDivider = true

            //region build column

			//构建表格结构
            build(
                RPWDataGridView.RPWDataGridColumn(
                    DensityUtil.dpToPx(this@MainActivity, 100), "姓名", true
                ),
                RPWDataGridView.RPWDataGridColumn(
                    DensityUtil.dpToPx(this@MainActivity, 100), "密码", false
                ),
                RPWDataGridView.RPWDataGridColumn(
                    DensityUtil.dpToPx(this@MainActivity, 200), "身份证号码", false
                ),
                RPWDataGridView.RPWDataGridColumn(
                    DensityUtil.dpToPx(this@MainActivity, 200), "出生年月", false
                ),
                RPWDataGridView.RPWDataGridColumn(
                    DensityUtil.dpToPx(this@MainActivity, 60), "性别", false
                ),
                RPWDataGridView.RPWDataGridColumn(
                    DensityUtil.dpToPx(this@MainActivity, 150), "手机号码", false
                ),
                RPWDataGridView.RPWDataGridColumn(
                    DensityUtil.dpToPx(this@MainActivity, 150), "邮箱", false
                ),
                RPWDataGridView.RPWDataGridColumn(
                    DensityUtil.dpToPx(this@MainActivity, 300), "地址", false
                ),
            )

            //endregion
			
			//绑定每行显示的数据
            setRowBuildListener(object : RPWDataGridView.RowBuildListener<ItemData> {
                override fun onBuildRow(rowItemView: RPWDataGridIRowItemView, data: ItemData) {
                    rowItemView.cells[0].text = data.name
                    rowItemView.cells[1].text = data.password
                    rowItemView.cells[2].text = "11235842364564582"
                    rowItemView.cells[3].text = "2024-04-28"
                    rowItemView.cells[4].text = data.sex
                    rowItemView.cells[5].text = data.phone
                    rowItemView.cells[6].text = data.email
                    rowItemView.cells[7].text = data.address
                }
            })
			
			//监听单元格点击
            setRowClickListener(object : RPWDataGridView.RowClickListener<ItemData> {
                override fun onRowClick(data: ItemData, rowIndex: Int, columnIndex: Int) {
                    Toast.makeText(
                        this@MainActivity, "点击坐标[$rowIndex:$columnIndex]", Toast.LENGTH_SHORT
                    ).show()
                }

                override fun onRowLongClick(
                    t: ItemData, rowIndex: Int, columnIndex: Any?
                ): Boolean {
                    rpwDataGridView.startSelect(true)
                    return true
                }
            })

			//监听页面状态变化
            setStatusListener(object : RPWDataGridView.DataGridViewStatusListener {
                override fun onStatusChange(statusEnum: RPWDataGridViewStatusEnum) {
                    Toast.makeText(
                        this@MainActivity, "状态改变:$statusEnum", Toast.LENGTH_SHORT
                    ).show()
                }
            })

            val ds = mutableListOf<ItemData>()
            repeat(1000) {//添加1000条测试数据
                ds.add(
                    ItemData(
                        "WPR$it",
                        it.toString(),
                        "$it",
                        "广东省广州市番禺区xxxxxx$it 号",
                        "123456789"
                    )
                )
            }
            setDataSource(ds)
        }

嗯嗯嗯~~按照这个思路,实现如下:
实现效果

总结

至此,简单的表格效果已有,目前发现有一些UI体验层面的bug,后面我会看情况在Gitee中完善,因为是想写一个简单易用的表格控件,所以对每个单元格里面的View都写死成TextView了,另一方面是我需求没那么复杂。。

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

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

相关文章

【消息队列】MQ介绍

MQ MQ&#xff08;MessageQueue&#xff09;&#xff0c;中文是消息队列&#xff0c;就是存放消息的队列&#xff0c;也是下面提到的事件驱动架构中的Broker 同步调用的优点&#xff1a; 时效性强&#xff0c;可以立即得到结果 同步调用的问题&#xff1a; 耦合度高性能和吞吐…

汽车信息安全入门总结(2)

目录 1.引入 2.汽车信息安全技术 3.密码学基础知识 4.小结 1.引入 上篇汽车信息安全入门总结(1)-CSDN博客主要讲述了汽车信息安全应该关注的点&#xff0c;以及相关法规和标准&#xff0c;限于篇幅&#xff0c;继续聊信息安全相关技术以及需要掌握的密码学基础知识。 2.汽…

Costas-Barker序列模糊函数仿真

文章目录 前言一、Costas 序列二、Barker 码三、Costas-Barker 序列模糊函数仿真1、MATLAB 核心代码2、仿真结果①、Costas-Barker 模糊函数图②、Costas-Barker 距离模糊函数图③、Costas-Barker 速度模糊函数图 四、资源自取 前言 Costas 码是一种用于载波同步的频率调制序列…

基于SpringBoot+Vue高校竞赛管理系统的设计与实现

项目介绍&#xff1a; 高校竞赛管理系统管理系统按照操作主体分为管理员和用户。管理员的功能包括字典管理、论坛管理、竞赛公告管理、获奖管理、老师管理、评审管理、评审分配管理、评审打分管理、赛事管理、赛事提交管理、赛事报名管理、用户管理、专家管理、管理员管理。用…

万兴PDF专家 PDFelement Pro v10.3.8 破姐版!

&#x1f9d1;‍&#x1f4bb;万兴PDF专家 PDFelement Pro v10.3.8 破姐版 (https://docs.qq.com/sheet/DRVVxTHJ3RXJFVHVr)

FreeRTOS软件定时器

说明本文章基于百问网RTOS教程文档 1.硬件定时器 什么是硬件定时器&#xff0c;由硬件电路构成的定时器。在学习STM32时我们都会学到定时器&#xff0c;这个就是硬件定时器。硬件定时器不单单可以定时&#xff0c;它还可以进行PWM输出等等。硬件定时器每隔一段固定的时间会进…

近几年视频取证、视频篡改检测技术发展现状及挑战

前言 本文主要搜集了视频取证各个子领域近几年的高影响因子/引用数的文章及其主要思想和做法&#xff0c;旨在分析目前视频篡改检测的发展现状与热点领域&#xff0c;文章中也融合了自己的一点看法和展望&#xff0c;欢迎感兴趣的同学和我多多沟通。 本文无论是文献搜集还是方…

基于Spring Boot的外卖点餐系统设计与实现

基于Spring Boot的外卖点餐系统设计与实现 开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/idea 系统部分展示 网站首页界面图&#xff0c;通过进入网站可以查看首页、…

并查集应用-连通块中点的数量and食物链

文章目录 连通块中点的数量思路代码javaC 代码 食物链带扩展域的并查集代码带边权的并查集数组d的真正含义以及find()函数调用过程核心代码注意事项&#xff0c;即明白 d[i] 的含义 代码C Java 连通块中点的数量 给定一个包含 n 个点&#xff08;编号为 1∼n &#xff09;的无向…

Leetcode—860. 柠檬水找零【简单】

2024每日刷题&#xff08;122&#xff09; Leetcode—860. 柠檬水找零 实现代码 class Solution { public:bool lemonadeChange(vector<int>& bills) {int count5 0;int count10 0;for(int i 0; i < bills.size(); i) {if(bills[i] 5) {count5;} else if(bi…

【自然语言处理】Word2VecTranE的实现

作业一 Word2Vec&TranE的实现 1 任务目标 1.1 案例简介 Word2Vec是词嵌入的经典模型&#xff0c;它通过词之间的上下文信息来建模词的相似度。TransE是知识表示学习领域的经典模型&#xff0c;它借鉴了Word2Vec的思路&#xff0c;用“头实体关系尾实体”这一简单的训练目…

【matplot】【matlab】绘制简洁美观二维坐标系的一个例子

觉得下图不错美观大方&#xff0c;现仿制下图&#xff1a; import numpy as np import matplotlib.pyplot as pltdef sigmoid(x):return 1 / (1 np.exp(-x))def sigmoid_derivative(x):return sigmoid(x) * (1 - sigmoid(x))# 设置中文字体 plt.rcParams[font.family] [Tim…

如何使用Go语言的标准库和第三方库?

文章目录 一、如何使用Go语言的标准库示例&#xff1a;使用标准库中的fmt包打印输出 二、如何使用Go语言的第三方库示例&#xff1a;使用第三方库github.com/gin-gonic/gin创建Web服务器 总结 在Go语言中&#xff0c;标准库和第三方库的使用是日常编程中不可或缺的一部分。标准…

Facebook的声音:听见社交媒体的心跳

社交媒体如今已经成为人们日常生活中不可或缺的一部分&#xff0c;而Facebook作为其中的佼佼者&#xff0c;承载着数以亿计的用户的交流、分享和连接。在这个信息爆炸的时代&#xff0c;Facebook的声音就像是社交媒体的心跳&#xff0c;传递着无数个体的情感、思想和生活。本文…

NASA数据集——NASA 标准三级(L3)每月深蓝气溶胶产品提供了全球陆地和海洋上空气溶胶光学厚度(AOT)

VIIRS/NOAA20 Deep Blue Level 3 monthly aerosol data, 1x1 degree grid 简介 联合极地卫星系统&#xff08;JPSS&#xff09;系列 NOAA-20 仪器中的可见红外成像辐射计套件&#xff08;VIIRS&#xff09;NASA 标准三级&#xff08;L3&#xff09;每月深蓝气溶胶产品提供了全…

分布式与一致性协议之Raft算法(三)

Raft算法 如何复制日志 你可以把Raft算法的日志复制理解成一个优化后的二阶段提交(将二阶段优化成了一阶段)。优化后减少了一半的往返消息&#xff0c;也就是降低了一半的消息延迟&#xff0c;那日志复制的具体过程又是什么呢&#xff1f; 首先&#xff0c;领导者进入第一阶段…

LT2611UX四端口 LVDS转 HDMI2.0,带音频

描述LT2611UX 是一款面向机顶盒、DVD 应用的高性能 LVDS 至 HDMI2.0 转换器。LVDS输入可配置为单端口、双端口或四端口&#xff0c;具有1个高速时钟通道和3~4个高速数据通道&#xff0c;工作速率最高为1.2Gbps/通道&#xff0c;可支持高达19.2Gbps的总带宽。LT2611UX 支持灵活的…

C语言案例04 -流程控制-逻辑符的正确使用

****一.C语言逻辑运算符详解&#xff1a;逻辑与&&与逻辑或||的运用及其短路特性 你知道吗&#xff1f;逻辑运算符&&和||可是C语言世界的“流量担当”&#xff0c;它们不仅实力强大&#xff0c;还自带神秘光环——短路效应 &#x1f4dd;短路法则揭秘&#xf…

CVE-2022-2602:unix_gc 错误释放 io_uring 注册的文件从而导致的 file UAF

前言 复现该漏洞只是为了学习相关知识&#xff0c;在这里仅仅做简单记录下 exp&#xff0c;关于漏洞的详细内容请参考其他文章&#xff0c;最后在 v5.18.19 内核版本上复现成功&#xff0c;v6.0.2 复现失败 漏洞利用 diff --git a/include/linux/skbuff.h b/include/linux/s…

vscode 配置与插件记录

vscode插件 python PythonPython DebuggerruffisortPylanceJupyterJupyter KeymapJupyter Slide ShowJupyter Cell TagsautoDocstring - Python Docstring Generator ruff isort pylance autodocsting 在setting.json里这么配置&#xff0c;这样你保存时就会自动format…