Android 自定義LayoutManager實現花式表格

阿新 • • 發佈：2020-02-11

如果你對RecyclerView原理還不是特別瞭解，非常建議你讀一下。

本文的專案也是學習自定義LayoutManager絕佳資料，大家有需要的可以好好拜讀。

前言

表格是自打我進公司以後就使用的控制元件，起初使用的是ScrollablePanel，從一開始的被花式吊打，到後期的熟練使用。

Android 自定義LayoutManager實現花式表格

大佬寫的控制元件確實給我的工作帶來了極大的方便，不過還是有些問題存在：

無法實現不規則的表格
其核心是二層RecyclerView的巢狀，如果只用一層RecyclerView將會帶來效能的提升
多個RecyclerView有的時候會導致介面變形

在我深入學習RecyclerView以後，想能不能只用一層RecyclerView

，藉助LayoutManager實現，寫著寫著，發現該思路可行，並實現了一款基於一個RecyclerView的表格控制元件TableView，先看一下效果：

照片牆

Android 自定義LayoutManager實現花式表格

經常看到有同學問類似的首頁如何實現，現在不用自定義View也可以輕鬆實現了哈~

課程表

Android 自定義LayoutManager實現花式表格

表格

Android 自定義LayoutManager實現花式表格

TableView具有如下特點：

支援不規則表格
同時支援橫向和縱向滾動
支援頂部和左側懸浮
基於RecyclerView，所以RecyclerView自定義子檢視、高效回收、子檢視多樣性這些特點它都有
沒有多層RecyclerView巢狀，效能更棒

Github地址

使用

第一步 | 新增xml檔案

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".ui.fragment.table.TableFragment">
 
 <com.orient.me.widget.rv.adapter.TableView
 android:id="@+id/tb"
 android:layout_width="match_parent"
 android:layout_height="match_parent"/>
 
</FrameLayout>

第二步 | 獲取TableView

在展示程式碼之前，瞭解一下TableView中的主要函式：

Android 自定義LayoutManager實現花式表格

這個setTitle(boolean isLeftOpen,boolean isTopOpen)有什麼作用呢？為了確保表格的每一個單元格的長度和寬度都一樣（子檢視可以在橫縱方向上佔有多個單元格），寬和高都使用兩種方式：

設定具體的值，那麼單元格的寬或者高的值就是具體的
設定一行或者一列可以容納的單元格數量

所以寬高各有兩種，模式的數量 = 2 * 2，總共有：

Android 自定義LayoutManager實現花式表格

程式碼：

// if use butterknife
// or use findViewById
@BindView(R.id.tb)
 TableView mTable;
 
// 預設為 TableLayoutManager.MODE_A,4,8
mTable.setModeAndValue(TableLayoutManager.MODE_A,6,8);

第三步 | 建立資料類

實現ICellItem介面：

public class TableCell implements ICellItem {
 private String name;
 private String value;
 private int type;
 private int row;
 private int col;
 private int widthSpan;
 private int heightSpan;
 //... 省略建構函式和Get Set方法
 @Override
 public int getRow() {
 return row;
 }
 @Override
 public int getCol() {
 return col;
 }
 @Override
 public int getWidthSpan() {
 return widthSpan;
 }
 @Override
 public int getHeightSpan() {
 return heightSpan;
 }
}

第四步 | 設定介面卡

private TableAdapter<TableCell> mAdapter;
protected void initWidget(View root) {
 // 假設在這個方法中初始化
 mTable.setAdapter(mAdapter = new TableAdapter<TableCell>(new ArrayList<>()) {
 @Override
 public int getItemLayout(TableCell tableCell,int pos) {
  // ... 返回子檢視佈局檔案
  // 支援多型別
  return R.layout.table_cell_content_item;
 }
 @Override
 public BaseAdapter.ViewHolder<TableCell> onCreateViewHolder(View root,int itemType) {
  // itemType是子檢視佈局檔案
  // 根據佈局返回具體的ViewHolder
  return new ContentHolder(root);
 }
 });
}
// 具體的ViewHolder
class ContentHolder extends BaseAdapter.ViewHolder<TableCell>{
 TextView mContent;
 public ContentHolder(View itemView) {
  super(itemView);
  mContent = itemView.findViewById(R.id.tv_name);
 }
 @Override
 protected void onBind(TableCell tableCell) {
  mContent.setText(tableCell.getValue());
 }
 }

第五步 | 重新測繪

如果TableView使用的模式是Mode_A、Mode_C和Mode_D，需要再重新測量：