Android 轻松实现 增强版灵活的 滑动式表格视图

表格视图组件，支持：
1.  无标题模式：只有数据行也可以正常滑动
2.  两种滑动模式：固定第一列 或 全部滑动
3.  全面的样式自定义能力
4.  智能列宽计算

 1. 无标题模式支持

设置无标题：调用 

setHeaderData(null)

或

setHeaderData(emptyList())

自动调整：
    隐藏标题行相关视图
    智能计算列宽时忽略标题行
    保持数据行正常显示和滑动

 2. 两种滑动模式

固定第一列模式：

 tableView.setScrollMode(FlexibleTableView.ScrollMode.FIXED_FIRST_COLUMN)

    第一列垂直固定
    标题行和内容区域可水平滚动
    适合需要固定标识列的场景

全滑动模式：

    tableView.setScrollMode(FlexibleTableView.ScrollMode.FULL_SCROLL)

   - 整个表格可水平滚动
   - 标题行和内容区域同步滚动
   - 适合所有列同等重要的场景

3. 智能列宽计算

等宽模式：

    tableView.setEqualColumnWidth(true)

  - 所有列使用相同宽度

  - 宽度取所有列内容最大宽度

自适应模式：

 tableView.setEqualColumnWidth(false)

每列根据内容计算宽度
可设置最小宽度保证可读性最小宽度设置：

  // 设置第一列最小宽度tableView.setFirstColumnMinWidth(120) // 120dp// 设置其他列最小宽度tableView.setOtherColumnMinWidth(90) // 90dp

4. 全面的样式自定义

   //标题行样式：tableView.setHeaderTextColor(Color.WHITE)tableView.setHeaderBackgroundColor(Color.BLUE)//第一列样式：tableView.setFirstColumnTextColor(Color.DKGRAY)tableView.setFirstColumnBackgroundColor(Color.LTGRAY)//内容区域样式：tableView.setContentTextColor(Color.BLACK)tableView.setContentBackgroundColor(Color.WHITE)//网格线样式：tableView.setGridLineColor(Color.GRAY)

使用方法示例

class MainActivity : AppCompatActivity() {private lateinit var tableView: FlexibleTableViewoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)tableView = findViewById(R.id.tableView)// 1. 设置表格模式tableView.setScrollMode(FlexibleTableView.ScrollMode.FIXED_FIRST_COLUMN)// 2. 设置表格列宽配置tableView.setEqualColumnWidth(true) // 所有列等宽tableView.setFirstColumnMinWidth(120) // 第一列最小宽度120dptableView.setOtherColumnMinWidth(90)  // 其他列最小宽度90dp// 3. 设置样式tableView.setHeaderTextColor(Color.WHITE)tableView.setHeaderBackgroundColor(Color.parseColor("#3F51B5"))tableView.setFirstColumnTextColor(Color.DKGRAY)tableView.setFirstColumnBackgroundColor(Color.parseColor("#E8EAF6"))tableView.setContentTextColor(Color.BLACK)tableView.setContentBackgroundColor(Color.parseColor("#F5F5F5"))tableView.setGridLineColor(Color.parseColor("#9E9E9E"))// 4. 场景1: 有标题行的情况setupWithHeaders()// 5. 场景2: 无标题行的情况setupWithoutHeaders()// 6. 添加切换按钮setupModeSwitchButton()}private fun setupWithHeaders() {// 有标题行的数据val headers = listOf("产品", "一月", "二月", "三月", "四月", "五月", "六月")tableView.setHeaderData(headers)val products = listOf(listOf("智能手机", "1250", "1380", "1520", "1670", "1820", "1980"),listOf("笔记本电脑", "780", "820", "890", "920", "950", "980"),listOf("平板电脑", "620", "680", "710", "750", "790", "820"))tableView.setRowData(products)}private fun setupWithoutHeaders() {// 无标题行的数据tableView.setHeaderData(null) // 不设置标题行val data = listOf(listOf("张三", "90", "85", "95", "88", "92"),listOf("李四", "88", "92", "90", "85", "90"),listOf("王五", "78", "80", "85", "90", "86"),listOf("赵六", "92", "90", "88", "92", "94"),listOf("钱七", "76", "85", "80", "78", "82"))tableView.setRowData(data)}private fun setupModeSwitchButton() {val switchButton: Button = findViewById(R.id.switchModeButton)switchButton.setOnClickListener {val newMode = if (tableView.getScrollMode() == FlexibleTableView.ScrollMode.FIXED_FIRST_COLUMN) {FlexibleTableView.ScrollMode.FULL_SCROLL} else {FlexibleTableView.ScrollMode.FIXED_FIRST_COLUMN}tableView.setScrollMode(newMode)switchButton.text = if (newMode == FlexibleTableView.ScrollMode.FIXED_FIRST_COLUMN) {"切换到全滑动模式"} else {"切换到固定第一列模式"}}}
}

完整实现代码

FlexibleTableView

class FlexibleTableView @JvmOverloads constructor(context: Context,attrs: AttributeSet? = null,defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {enum class ScrollMode {FIXED_FIRST_COLUMN, // 固定第一列模式FULL_SCROLL        // 全部滑动模式}private val mContext: Context = contextprivate lateinit var rvHeader: RecyclerViewprivate lateinit var rvFirstColumn: RecyclerViewprivate lateinit var rvItems: RecyclerViewprivate lateinit var tvFirstHeader: TableCellprivate lateinit var headerAdapter: TableAdapterprivate lateinit var firstColumnAdapter: TableAdapterprivate lateinit var itemAdapter: TableAdapterprivate var headerList: List<String> = ArrayList()private val firstColumnList: MutableList<String> = ArrayList()private val itemList: MutableList<String> = ArrayList()// 样式配置@ColorInt private var headerTextColor = Color.WHITE@ColorInt private var headerBackgroundColor = Color.parseColor("#3F51B5")@ColorInt private var firstColumnTextColor = Color.DKGRAY@ColorInt private var firstColumnBackgroundColor = Color.parseColor("#E8EAF6")@ColorInt private var contentTextColor = Color.BLACK@ColorInt private var contentBackgroundColor = Color.parseColor("#F5F5F5")@ColorInt private var gridLineColor = Color.parseColor("#9E9E9E")// 宽度配置private var firstColumnMinWidth = dpToPx(120) // 第一列最小宽度private var otherColumnMinWidth = dpToPx(100) // 其他列最小宽度private var equalColumnWidth = true // 是否等宽显示// 滚动模式private var scrollMode = ScrollMode.FIXED_FIRST_COLUMN// 滚动位置缓存private var scrollX = 0private var scrollY = 0// 标题行可见性private var headerVisible = trueinit {initView()}private fun initView() {orientation = HORIZONTALremoveAllViews()when (scrollMode) {ScrollMode.FIXED_FIRST_COLUMN -> initFixedFirstColumnMode()ScrollMode.FULL_SCROLL -> initFullScrollMode()}}private fun initFixedFirstColumnMode() {// 固定第一列模式addView(createFixedColumnHeader())addView(createScrollableContentArea())setupAdapters()setupScrollSync()}private fun initFullScrollMode() {// 全滑动模式addView(createFullScrollContainer())setupAdapters()setupScrollSync()}private fun setupAdapters() {headerAdapter = TableAdapter(mContext)headerAdapter.isHeader(true)firstColumnAdapter = TableAdapter(mContext)itemAdapter = TableAdapter(mContext)if (::rvHeader.isInitialized) rvHeader.adapter = headerAdapterif (::rvFirstColumn.isInitialized) rvFirstColumn.adapter = firstColumnAdapterif (::rvItems.isInitialized) rvItems.adapter = itemAdapterif (::tvFirstHeader.isInitialized) {tvFirstHeader.setHeader(true)}}private fun setupScrollSync() {if (!::rvItems.isInitialized || !::rvFirstColumn.isInitialized) returnrvFirstColumn.addOnScrollListener(object : RecyclerView.OnScrollListener() {override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {super.onScrolled(recyclerView, dx, dy)if (recyclerView.scrollState != RecyclerView.SCROLL_STATE_IDLE) {rvItems.scrollBy(dx, dy)scrollY += dy}}})rvItems.addOnScrollListener(object : RecyclerView.OnScrollListener() {override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {super.onScrolled(recyclerView, dx, dy)if (recyclerView.scrollState != RecyclerView.SCROLL_STATE_IDLE) {rvFirstColumn.scrollBy(dx, dy)scrollY += dyscrollX += dx}}})}private fun createFixedColumnHeader(): LinearLayout {tvFirstHeader = TableCell(mContext, firstColumnMinWidth)tvFirstHeader.setGridLineColor(gridLineColor)tvFirstHeader.setTextColor(headerTextColor)tvFirstHeader.setHeaderBackgroundColor(headerBackgroundColor)tvFirstHeader.visibility = if (headerVisible) View.VISIBLE else View.GONEval lyHeader = LinearLayout(mContext)lyHeader.orientation = LinearLayout.VERTICALlyHeader.layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT)lyHeader.addView(tvFirstHeader)rvFirstColumn = RecyclerView(mContext)rvFirstColumn.layoutManager = LinearLayoutManager(mContext)lyHeader.addView(rvFirstColumn)return lyHeader}private fun createScrollableContentArea(): HorizontalScrollView {val layout = LinearLayout(mContext)layout.orientation = LinearLayout.VERTICALlayout.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)// 标题行容器rvHeader = RecyclerView(mContext)rvHeader.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)rvHeader.visibility = if (headerVisible) View.VISIBLE else View.GONEval headerManager = LinearLayoutManager(mContext)headerManager.orientation = LinearLayoutManager.HORIZONTALrvHeader.layoutManager = headerManagerlayout.addView(rvHeader)// 内容行容器rvItems = RecyclerView(mContext)rvItems.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)layout.addView(rvItems)val scrollView = HorizontalScrollView(mContext)scrollView.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)scrollView.addView(layout)scrollView.isFillViewport = truescrollView.overScrollMode = View.OVER_SCROLL_NEVERscrollView.isHorizontalScrollBarEnabled = falsereturn scrollView}private fun createFullScrollContainer(): HorizontalScrollView {val container = LinearLayout(mContext)container.orientation = LinearLayout.VERTICALcontainer.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)// 标题行（可滑动）rvHeader = RecyclerView(mContext)rvHeader.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)rvHeader.visibility = if (headerVisible) View.VISIBLE else View.GONEval headerManager = LinearLayoutManager(mContext)headerManager.orientation = LinearLayoutManager.HORIZONTALrvHeader.layoutManager = headerManagercontainer.addView(rvHeader)// 内容区域（包括第一列和其余列）val contentContainer = LinearLayout(mContext)contentContainer.orientation = LinearLayout.HORIZONTALcontentContainer.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)// 第一列（在完整滑动模式下也包含在可滚动区域）val firstColumnContainer = LinearLayout(mContext)firstColumnContainer.orientation = LinearLayout.VERTICALfirstColumnContainer.layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT)tvFirstHeader = TableCell(mContext, firstColumnMinWidth)tvFirstHeader.setGridLineColor(gridLineColor)tvFirstHeader.setTextColor(headerTextColor)tvFirstHeader.setHeaderBackgroundColor(headerBackgroundColor)tvFirstHeader.visibility = if (headerVisible) View.VISIBLE else View.GONEfirstColumnContainer.addView(tvFirstHeader)rvFirstColumn = RecyclerView(mContext)rvFirstColumn.layoutManager = LinearLayoutManager(mContext)firstColumnContainer.addView(rvFirstColumn)contentContainer.addView(firstColumnContainer)// 其余列rvItems = RecyclerView(mContext)rvItems.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)contentContainer.addView(rvItems)container.addView(contentContainer)val scrollView = HorizontalScrollView(mContext)scrollView.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)scrollView.addView(container)scrollView.isFillViewport = truescrollView.overScrollMode = View.OVER_SCROLL_NEVERscrollView.isHorizontalScrollBarEnabled = falsescrollView.scrollTo(scrollX, 0)return scrollView}fun setHeaderData(headerData: List<String>?) {if (headerData == null || headerData.isEmpty()) {// 没有标题行headerVisible = falseheaderList = emptyList()if (::tvFirstHeader.isInitialized) {tvFirstHeader.visibility = View.GONE}if (::rvHeader.isInitialized) {rvHeader.visibility = View.GONE}headerAdapter.setItemList(emptyList())return}// 有标题行headerVisible = trueheaderList = ArrayList(headerData)val headers = ArrayList(headerData)if (::tvFirstHeader.isInitialized) {tvFirstHeader.text = headers[0]tvFirstHeader.visibility = View.VISIBLE}headers.removeAt(0)headerAdapter.setItemList(headers)if (::rvHeader.isInitialized) {rvHeader.visibility = View.VISIBLE}if (::rvItems.isInitialized) {rvItems.layoutManager = GridLayoutManager(mContext, headerList.size - 1)}}fun setRowData(rowDataList: List<List<String>>) {if (rowDataList.isEmpty()) {// 清空数据firstColumnList.clear()itemList.clear()firstColumnAdapter.setItemList(emptyList())itemAdapter.setItemList(emptyList())return}// 确定列数：取第一行数据除去第一列后的列数val columnCount = rowDataList[0].size - 1// 设置GridLayoutManager的列数if (::rvItems.isInitialized) {rvItems.layoutManager = GridLayoutManager(mContext, columnCount)}// 处理数据firstColumnList.clear()itemList.clear()addRowData(rowDataList)}fun addRowData(rowDataList: List<List<String>>) {val list = ArrayList(rowDataList)for (rowData in list) {val row = ArrayList(rowData)if (row.isNotEmpty()) {firstColumnList.add(row[0])row.removeAt(0)itemList.addAll(row)}}firstColumnAdapter.setItemList(firstColumnList)itemAdapter.setItemList(itemList)if (::rvFirstColumn.isInitialized && ::rvItems.isInitialized) {rvFirstColumn.scrollTo(0, scrollY)rvItems.scrollTo(scrollX, scrollY)}calculateColumnWidths()}private fun calculateColumnWidths() {// 计算第一列宽度val firstColData = firstColumnList.toMutableList()if (headerVisible) {firstColData.add(tvFirstHeader.text.toString())}val firstColWidth = calculateColumnWidth(firstColData, firstColumnMinWidth)// 计算其他列宽度val otherColWidth = if (equalColumnWidth) {val maxOtherWidth = if (headerVisible) {maxOf(calculateColumnWidth(headerList, otherColumnMinWidth),calculateColumnWidth(itemList, otherColumnMinWidth))} else {calculateColumnWidth(itemList, otherColumnMinWidth)}maxOf(maxOtherWidth, otherColumnMinWidth)} else {if (headerVisible) {maxOf(calculateColumnWidth(headerList, otherColumnMinWidth),calculateColumnWidth(itemList, otherColumnMinWidth))} else {calculateColumnWidth(itemList, otherColumnMinWidth)}}// 设置宽度if (::tvFirstHeader.isInitialized) {tvFirstHeader.width = firstColWidth}firstColumnAdapter.setItemWidth(firstColWidth)headerAdapter.setItemWidth(otherColWidth)itemAdapter.setItemWidth(otherColWidth)}private fun calculateColumnWidth(data: List<String>, minWidth: Int): Int {if (data.isEmpty()) return minWidthvar maxWidth = minWidthval paint = Paint()paint.textSize = spToPx(14)for (text in data) {val textWidth = paint.measureText(text).toInt()val cellWidth = textWidth + dpToPx(20) // 加上内边距if (cellWidth > maxWidth) {maxWidth = cellWidth}}return maxWidth}fun getItemCount(): Int = firstColumnList.size * (if (headerVisible) headerList.size - 1 else 0)// 样式设置方法fun setHeaderTextColor(@ColorInt color: Int) {headerTextColor = colorif (::tvFirstHeader.isInitialized) {tvFirstHeader.setTextColor(color)}headerAdapter.setTextColor(color)}fun setHeaderBackgroundColor(@ColorInt color: Int) {headerBackgroundColor = colorif (::tvFirstHeader.isInitialized) {tvFirstHeader.setHeaderBackgroundColor(color)}headerAdapter.setBackgroundColor(color)}fun setFirstColumnTextColor(@ColorInt color: Int) {firstColumnTextColor = colorfirstColumnAdapter.setTextColor(color)}fun setFirstColumnBackgroundColor(@ColorInt color: Int) {firstColumnBackgroundColor = colorfirstColumnAdapter.setBackgroundColor(color)}fun setContentTextColor(@ColorInt color: Int) {contentTextColor = coloritemAdapter.setTextColor(color)}fun setContentBackgroundColor(@ColorInt color: Int) {contentBackgroundColor = coloritemAdapter.setBackgroundColor(color)}fun setGridLineColor(@ColorInt color: Int) {gridLineColor = colorif (::tvFirstHeader.isInitialized) {tvFirstHeader.setGridLineColor(color)}headerAdapter.setGridLineColor(color)firstColumnAdapter.setGridLineColor(color)itemAdapter.setGridLineColor(color)}// 宽度设置方法fun setEqualColumnWidth(enabled: Boolean) {equalColumnWidth = enabledcalculateColumnWidths()}fun setFirstColumnMinWidth(minWidthDp: Int) {firstColumnMinWidth = dpToPx(minWidthDp)calculateColumnWidths()}fun setOtherColumnMinWidth(minWidthDp: Int) {otherColumnMinWidth = dpToPx(minWidthDp)calculateColumnWidths()}// 滚动模式设置fun setScrollMode(mode: ScrollMode) {if (scrollMode != mode) {// 保存当前滚动位置scrollX = 0scrollY = 0scrollMode = modeinitView()// 重新应用数据if (headerList.isNotEmpty()) {setHeaderData(headerList)}if (firstColumnList.isNotEmpty()) {setRowData(firstColumnList.map { listOf(it) })}}}fun getScrollMode(): ScrollMode = scrollMode// 单位转换工具private fun dpToPx(dp: Int): Int {return (dp * context.resources.displayMetrics.density).toInt()}private fun spToPx(sp: Int): Float {return sp * context.resources.displayMetrics.scaledDensity}
}

TableAdapter

@SuppressLint("NotifyDataSetChanged")
class TableAdapter(private val mContext: Context) : RecyclerView.Adapter<TableAdapter.MyViewHolder>() {private var mItemList: List<String> = ArrayList()private var itemWidth = 0private var isHeader = falseprivate var textColor = Color.BLACKprivate var backgroundColor = Color.WHITEprivate var gridLineColor = Color.GRAYfun setItemWidth(width: Int) {itemWidth = widthnotifyDataSetChanged()}fun setTextColor(color: Int) {textColor = colornotifyDataSetChanged()}fun setBackgroundColor(color: Int) {backgroundColor = colornotifyDataSetChanged()}fun setGridLineColor(color: Int) {gridLineColor = colornotifyDataSetChanged()}fun setItemList(itemList: List<String>) {mItemList = itemListnotifyDataSetChanged()}override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {val cell = TableCell(mContext, itemWidth)cell.setHeader(isHeader)cell.setGridLineColor(gridLineColor)return MyViewHolder(cell)}override fun onBindViewHolder(holder: MyViewHolder, position: Int) {val item = mItemList[position]val tv = holder.itemView as TableCelltv.text = itemtv.setTextColor(textColor)tv.setCellBackgroundColor(backgroundColor)// 如果是表头行，应用特殊样式if (isHeader) {tv.setTextColor(textColor)tv.setHeaderBackgroundColor(backgroundColor)}}override fun getItemCount(): Int = mItemList.sizefun isHeader(isHeader: Boolean) {this.isHeader = isHeader}inner class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}

TableCell

class TableCell @JvmOverloads constructor(context: Context,private var width: Int = ViewGroup.LayoutParams.WRAP_CONTENT
) : AppCompatTextView(context) {private var isHeader = falseprivate var gridLineColor = Color.GRAYprivate var headerBackgroundColor = Color.parseColor("#3F51B5")private var cellBackgroundColor = Color.WHITEinit {initView()}private fun initView() {setBackgroundColor(cellBackgroundColor)val params = LinearLayout.LayoutParams(width - 2, ViewGroup.LayoutParams.WRAP_CONTENT)params.setMargins(0, 0, 2, 2)layoutParams = paramstextSize = 14fgravity = Gravity.CENTERsetPadding(dpToPx(10), dpToPx(10), dpToPx(10), dpToPx(10))}fun setHeader(isHeader: Boolean) {this.isHeader = isHeadersetBackgroundColor(if (isHeader) headerBackgroundColor else cellBackgroundColor)setPadding(dpToPx(10), dpToPx(if (isHeader) 15 else 10), dpToPx(10), dpToPx(if (isHeader) 15 else 10))}fun setHeaderBackgroundColor(color: Int) {headerBackgroundColor = colorif (isHeader) {setBackgroundColor(color)}}fun setCellBackgroundColor(color: Int) {cellBackgroundColor = colorif (!isHeader) {setBackgroundColor(color)}}fun setGridLineColor(color: Int) {gridLineColor = colorinvalidate()}override fun setWidth(pixels: Int) {width = pixelsrefreshWidth()}private fun refreshWidth() {val params = layoutParams as LinearLayout.LayoutParamsparams.width = width - 2params.setMargins(0, 0, 2, 2)layoutParams = params}override fun onDraw(canvas: Canvas) {// 绘制网格线val paint = Paint()paint.color = gridLineColorpaint.strokeWidth = 1f// 绘制右边框canvas.drawLine(width.toFloat() - 2, 0f, width.toFloat() - 2, height.toFloat(), paint)// 绘制下边框canvas.drawLine(0f, height.toFloat() - 2, width.toFloat(), height.toFloat() - 2, paint)// 表头特殊样式if (isHeader) {paint.style = Paint.Style.FILL_AND_STROKEpaint.strokeWidth = 1.5f}super.onDraw(canvas)}private fun dpToPx(dp: Int): Int {return (dp * context.resources.displayMetrics.density).toInt()}
}

在布局文件中添加表格视图

 <com.yourpackage.FlexibleTableViewandroid:id="@+id/scrollTableView"android:layout_width="match_parent"android:layout_height="wrap_content" />