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

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

简介

源码已放到

Github

Gitee

作为在测绘地理信息行业中穿梭的打工人，遇到各种数据采集需求，既然有数据采集需求，那当然少不了数据展示功能，最常见的如表格方式展示。

当然，类似表格这些控件网上也有挺多开源的，但是经过我一番思考，决定自己动手撸一个，还能了解下原理。

实现思路

如下图所示，我们把表格拆分成三部分，表头、固定列、表格内容，其中固定列顾名思义，位置固定，内容部分，当宽度超过可视范围时，可左右滚动

对于表格垂直方向的滚动，我们可以用Rrecyclerview 来实现，那么水平方向的滚动，我们可以使用HorizontalScrollerView,

这样我们就可以得到一个初步的表格雏形,对应类暂且叫RPWDataGridView

关键属性、接口代码：

class RPWDataGridView @JvmOverloads constructor(    context: Context, attrs: AttributeSet? = null) : LinearLayout(context, attrs) {    private val headerView: RPWDataGridIRowItemView//表头    private val recyclerView: RecyclerView//表格内容    private val columns = mutableListOf()//列参数，每一行共用同一列参数，保证每个单元格的宽度一致    private var horScrollOffset = 0 //当前水平滚动偏移量，保证每一行滚动量一致    private val dataSource = mutableListOf() //数据源    private var dataGridAdapter = DataGridAdapter() //数据适配器 fun build(vararg columns: RPWDataGridColumn) {//构建表格结构 //... }      /**     * 设置表格数据源     */    fun setDataSource(data: List) {    //...    }}

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

然后封装一个表格的行控件，暂且命名为RPWDataGridIRowItemView，该控件View的结构如上图所示，固定列使用一个LinearLayout ,滚动列使用HorizontalScrollerView, 代码层面，伪代码：

1. View层：

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())      }    }}

然后把他作为RecyclerView 的 ItemView 加载到每一行中。

那么问题来了，每一行都有自己的滚动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 {                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 {                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()            repeat(1000) {//添加1000条测试数据                ds.add(                    ItemData(                        "WPR$it",                        it.toString(),                        "$it",                        "广东省广州市番禺区xxxxxx$it 号",                        "123456789"                    )                )            }            setDataSource(ds)        }

嗯嗯嗯~~按照这个思路，实现如下：

总结

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