快速实现股票APP里自选股左固定右滑动表格列表--SmartTableRecycleView

寻梦_finddreams
2,660 阅读5分钟

背景

在 APP 开发领域，尤其是股票、财经类应用的开发进程中，常常会面临构建左右滑动表格视图的需求，并且要确保左侧固定列的存在，从而使用户能够清晰地识别每行数据所对应的主体。以同花顺的自选列表、股票排行榜等功能模块为例，此类多列动态表格场景在该类应用中极为常见。

SmartTableRecycleView 库就封装了这类实现，帮助快速实现这个功能，它能够完美适配股票软件中的自选股列表、股票排行榜以及财务报表等场景，集成简单，可以参考拓展自定义需求。其仓库地址为：github.com/finddreams/…

实现效果

untitled7.gif

untitled53.gif

项目简介

在股票行情类应用中，数据表格通常需要具备以下特点：

  • 多方向滑动：支持横向和纵向同步滚动。
  • 高性能渲染：应对大量数据时仍能保持流畅。
  • 精准滑动控制：用户滑动手势与表格行为一致，避免滑动冲突。

在笔者过往对一些股票类 APP 的使用经历中，察觉到部分此类应用内的左右滑动列表存在一定问题。其中较为突出的是滑动冲突问题，这使得用户在操作过程中会遇到不顺畅的情况。此外，还存在用户正在滑动的行与其他行滑动不同步的现象，这严重影响了用户对数据的查看与交互体验，导致操作的连贯性和准确性大打折扣。

SmartTableRecycleView内部就解决了这些滑动冲突和滑动当前行和其他行不同步的问题，在ViewPager里也是支持左右滑动到不同的Tab Fragment页面的。

SmartTableRecycleView主要功能

  1. 左侧固定列：表格左侧固定显示第一列，提供快速定位功能。

  2. 右侧横向滑动：右侧列支持高效的横向滑动，展示更多内容。

  3. 高性能：基于 RecyclerView 构建，适用于大数据量场景。

  4. 灵活定制：

    • 自定义列内容和布局。
    • 动态调整列宽、颜色等属性。
    • 支持横屏模式
    • 支持下拉刷新和加载更多
    • 可参考实现更多其他自己想要的功能；

接入

1.在xml布局里引入

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="自选股列表"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
<com.finddreams.smarttablerecycleview.SmartTableRecycleView
    android:id="@+id/smart_table_recycle_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/title" />

</LinearLayout>

2.绑定数据即可实现

    smartTableRecycleView.setTabDataSet(getDemoTableViewDataSet(cellWidthList), onItemContainerClick = {
            Toast.makeText(this, "点击到了item ${it.firstColumName}", Toast.LENGTH_SHORT).show()
        },onHeaderItemClick={
            Toast.makeText(this, "点击到了header 需要进行排序${it.title} ${it.asc}", Toast.LENGTH_SHORT).show()
        })

实现细节解析

因为这个左边固定右边滑动的列表，在一个股票类APP中很多页面都会用到，所以可以封装成一个通用的数据类，开发时文字设置什么数据就显示什么数据，文字的颜色也可以定制，每一列的宽度因为值不一样应该也是要能灵活的设置宽度的，这样基于数据类来实现可复用。

TableViewDataSet这个类,是设置的入口类

里包含了 第一列的宽度，每个Item的高度，以及标题栏的文字大小等，items的集合为一共有多少行内容，headers则是一共有多少个标题。

data class TableDataSet(
    @StringRes
    val firstColumHeaderNameResId: Int= R.string.mingcheng,
    val firstColumWith: Int=112,//单位dp
    val itemHeight: Int=55,//单位dp
    val headerTextSize: Int =13,//单位sp
    val isShowLoadMore:Boolean=false,
    val items: List<TabViewItemsEntity>? =null,
    val headers:ArrayList<TableViewHeaderEntity>,
) {
}

我们再来看看的TabViewItemsEntity实现细节

这里面包含了一行的所有内容，比如左边第一列的值和文字大小，以及右边可滑动的列的childItems的集合。注意childItems和headers集合的size应该是一样的，这样一个header对应一个列。

TableViewChildItemEntity里定义了text的值，颜色以及字体大小，就是说每一列的颜色字体大小都可以单独设置，很灵活，因为有些时候某一列的内容比较长，需要缩小字体。有些时候某一列的值是需要根据涨跌来设置红绿颜色的，也能满足要求，默认为null就是用默认的颜色。

data class TableItemsEntity(
    val firstColumName:String,
    val firstColumTextSize: Int =15,
    val stockCode:String?=null,
    val firstColumValue:String?=null,
    val bgColor: Color? = null,//背景颜色
    val sortValue:Float?=null,//排序的值
    val childItems:List<TableChildItemEntity>,
)

data class TableChildItemEntity(
    val value: String,
    val color: Int? = null,
    val textSize: Float = 15f,
)

TableViewHeaderEntity的实现呢

title设置这个header的名称，width设置宽度，单位是int，后面直接会加上dp显示,因为每一个列header列的宽度和内容列的宽度是一样的，这里都用header里的width来设置整个列的宽度。

因为自选股列表，常常需要按照涨跌幅，市值等字段排序，所以我们需要给header增加排序功能。 asc是TableViewSort，就是枚举，分为升序，降序和没有顺序，asc如果设置为null则说明这列不能排序；

data class TableHeaderEntity(
    val title: String,
    val width: Int = 60,
    var asc: TableSort? = null,//为null 则不能排序
    var sortType:Int = 0,
    val headerTextSize: Int? =null,//单个头部文字大小
    var isCurrentSortSelected: Boolean =false,
)

enum class TableSort {
    ASC,//升序
    DESC,//降序
    NONE
}

总结

到这里拼装好TableViewDataSet就能显示出完整的自选股列表数据了，而且想实现更多的功能完全可以参照我的实现方式，自己来定制，这里只是提供大家一种实现方式的思路.

更多细节可以查看github库：github.com/finddreams/…

avatar
文章
阅读
粉丝