Android非常牛叉的表格編輯庫SmartTable，讓復(fù)雜表格變得So Easy

最近項(xiàng)目需求需要制作一個(gè)表格展示效果，先看下UI圖吧：

image.png

剛開始接收到這個(gè)需求的時(shí)候，第一反應(yīng)就是使用 RecyclerView 來進(jìn)行實(shí)現(xiàn)，誰讓 RecyclerView 那么牛逼呢？不用糾結(jié) RecyclerView 完完全全可以實(shí)現(xiàn)這種效果，無外乎可能就是稍微復(fù)雜些

RecyclerView 實(shí)現(xiàn)思路：

  • 最外層采用 HorizontalScrollView，保證表格可以左右進(jìn)行滑動
  • 內(nèi)層使用 RecyclerView,而使用 RecyclerView 時(shí)需要使用到 getItemViewType 這個(gè)方法來規(guī)定條目的類型（第一行title以及合計(jì)可以認(rèn)為是同一種類型，而“沈陽”那一個(gè)稍微大一點(diǎn)的條目可以認(rèn)為是第二種類型
  • 類型一：這個(gè)類型布局就非常簡單了，采用 LInearLayout 就可以非常簡單的實(shí)現(xiàn)
  • 類型二：可以采用水平的 LinearLayout 包裹 TextView 以及 RecyclerView 來進(jìn)行實(shí)現(xiàn)

上面僅僅是介紹了我最開始采用的方案，當(dāng)然缺點(diǎn)非常多：

  1. 使用上面方案時(shí)，需要考慮列的寬度問題，要么寬度直接在布局中寫死（每列中文字長度不一樣，可能會出現(xiàn)第一行與第二行的列錯(cuò)位情況），要么根據(jù)服務(wù)器返回的數(shù)據(jù)動態(tài)獲取每列中最長字符串所需要占用的寬度進(jìn)行動態(tài)設(shè)置
  2. 表格一般都會存在排序功能（當(dāng)然我這個(gè)項(xiàng)目中暫時(shí)還未出現(xiàn)），如果出現(xiàn)需要對列進(jìn)行升序或降序排序，那就呵呵了，自己想辦法去吧，想想都痛苦

說了這么多并不是貶低 RecyclerView 的意思，因?yàn)?RecyclerView 本身的定義就不是專門用來做這種復(fù)雜表格的（有說錯(cuò)的地方，歡迎在評論中留言），你讓 RecyclerView 去實(shí)現(xiàn)這種效果就有點(diǎn).......

下面來介紹一下今天的主角：SmartTable —— 好用漂亮的 Android 表格框架

先說一下 SmartTable 都支持的功能吧，具體例子后面再給出：

  1. 快速配置自動生成表格；
  2. 自動計(jì)算表格寬高
  3. 表格列標(biāo)題組合
  4. 表格固定左序列、頂部序列、第一行、列標(biāo)題、統(tǒng)計(jì)行
  5. 自動統(tǒng)計(jì)，排序（自定義統(tǒng)計(jì)規(guī)則）
  6. 表格圖文、序列號、列標(biāo)題格式化
  7. 表格各組成背景、文字、網(wǎng)格、padding 等配置
  8. 表格批注
  9. 表格內(nèi)容、列標(biāo)題點(diǎn)擊事件
  10. 縮放模式和滾動模式
  11. 注解模式
  12. 內(nèi)容多行顯示
  13. 分頁模式
  14. 首尾動態(tài)添加數(shù)據(jù)
  15. 豐富的格式化
  16. 支持二維數(shù)組展示（用于類似日程表，電影選票等）
  17. 導(dǎo)入 excel(支持顏色，字體，背景，批注，對齊，圖片等基本 Excel 屬性)
  18. 表格合并單元(支持注解合并，支持自動合并)
  19. 支持其他刷新框架 SmartRefreshLayout
  20. 可配置表格最小寬度(小于該寬度自動適配)
  21. 支持直接 List 或數(shù)組字段轉(zhuǎn)列
  22. 支持 Json 數(shù)據(jù)直接轉(zhuǎn)換成表格
  23. 支持表格網(wǎng)格指定行列顯示

看介紹是不是感覺叼的不要不要的，不過呢，我也是剛使用這個(gè)框架，在這里也僅僅是介紹一些開發(fā)中常用的，其他的自己去嘗試吧

如何使用

  • 引用：添加 JitPack repository 到你的 build 文件
allprojects {
        repositories {
            ...
            maven { url 'https://www.jitpack.io' }
        }
    }
  • 增加依賴
dependencies {
            compile 'com.github.huangyanbin:SmartTable:2.0'
    }

使用方式

SmartTable 的使用方式有兩種：

  1. 采用注解的形式
  2. 基本模式，手動配置行與列

一、注解方式

  • 步驟一：在布局文件中使用 SmartTable
<com.bin.david.form.core.SmartTable
        android:id="@+id/table"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  • 步驟二：定義表格（自定義bean對象）
@SmartTable(name = "銷售計(jì)劃表")
public class UserInfo {
    public UserInfo(String city, int name, int count, int restaurant, int ka, int wholesale, int industry, int other) {
        this.city = city;
        this.name = name;
        this.count = count;
        this.restaurant = restaurant;
        this.ka = ka;
        this.wholesale = wholesale;
        this.industry = industry;
        this.other = other;
    }

    //    name：版塊名稱，count：目標(biāo)值，restaurant：餐飲數(shù)量，ka：KA數(shù)量，wholesale：流通批發(fā)數(shù)量，industry：工業(yè)加工數(shù)量，other：其它數(shù)量
    @SmartColumn(id = 0, name = "部門/渠道", autoMerge = true)
    private String city;
    @SmartColumn(id = 1, name = "板塊")
    private int name;
    @SmartColumn(id = 2, name = "目標(biāo)值")
    private int count;
    @SmartColumn(id = 3, name = "餐飲")
    private int restaurant;
    @SmartColumn(id = 4, name = "KA")
    private int ka;
    @SmartColumn(id = 5, name = "流通批發(fā)")
    private int wholesale;
    @SmartColumn(id = 6, name = "工業(yè)加工")
    private int industry;
    @SmartColumn(id = 7, name = "其他")
    private int other;
}
  • 步驟三：綁定數(shù)據(jù)（完成）
public class MainActivity extends AppCompatActivity {

    private SmartTable table;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        List<UserInfo> list = new ArrayList<>();
        table = findViewById(R.id.table);
        list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
        list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
        list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
        list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
        list.add(new UserInfo("烏魯木齊",100, 150, 50, 240, 1100, 450, 23458));
        list.add(new UserInfo("烏魯木齊",100, 150, 50, 240, 1100, 450, 23458));
        list.add(new UserInfo("烏魯木齊",100, 150, 50, 240, 1100, 450, 23458));
        list.add(new UserInfo("烏魯木齊",100, 150, 50, 240, 1100, 450, 23458));
        list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
        list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
        list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
        list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));

        table.setData(list);
        table.getConfig().setContentStyle(new FontStyle(50, Color.BLUE));
    }
}

是不是分分鐘實(shí)現(xiàn)，效果圖如下：


image.png

二、基本方式，手動創(chuàng)建行與列

  • 步驟一：在布局文件中使用 SmartTable
<com.bin.david.form.core.SmartTable
        android:id="@+id/table"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  • 步驟二：定義表格（自定義bean對象），與采用注解方式唯一的不同就是不在使用 @SmartColumn 與 @SmartColumn 進(jìn)行標(biāo)注
public class User {
    public User(String city, int name, int count, int restaurant, int ka, int wholesale, int industry, int other) {
        this.city = city;
        this.name = name;
        this.count = count;
        this.restaurant = restaurant;
        this.ka = ka;
        this.wholesale = wholesale;
        this.industry = industry;
        this.other = other;
    }

    //    name：版塊名稱，count：目標(biāo)值，restaurant：餐飲數(shù)量，ka：KA數(shù)量，wholesale：流通批發(fā)數(shù)量，industry：工業(yè)加工數(shù)量，other：其它數(shù)量
    private String city;
    private int name;
    private int count;
    private int restaurant;
    private int ka;
    private int wholesale;
    private int industry;
    private int other;
}
  • 步驟三：手動創(chuàng)建列字段
//普通列
Column<String> city = new Column<>("部門/渠道", "city");
Column<Integer> name = new Column<>("板塊", "name");
Column<Integer> count = new Column<>("目標(biāo)值", "count");
Column<Integer> restaurant = new Column<>("餐飲", "restaurant");
Column<Integer> ka = new Column<>("KA", "ka");
Column<Integer> wholesale = new Column<>("流通批發(fā)", "wholesale");
Column<Integer> industry = new Column<>("工業(yè)加工", "industry");
Column<Integer> other = new Column<>("其他", "other");
//設(shè)置該列當(dāng)字段相同時(shí)自動合并
city.setAutoMerge(true);
  • 步驟四：設(shè)置單元格內(nèi)容
//設(shè)置單元格內(nèi)容
List<User> list = new ArrayList<>();
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("烏魯木齊", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("烏魯木齊", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("烏魯木齊", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("烏魯木齊", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
  • 步驟五：把數(shù)據(jù)綁定到 SmartTable 上
//表格數(shù)據(jù) datas 是需要填充的數(shù)據(jù)
TableData<User> tableData = new TableData<>("表格名", list, city, name, count, restaurant, ka, wholesale, industry, other);

//設(shè)置數(shù)據(jù)
table = findViewById(R.id.table);
table.setTableData(tableData);
table.getConfig().setContentStyle(new FontStyle(50, Color.BLUE));

是不是也是分分鐘的事，效果圖是一樣的就不貼了

優(yōu)劣勢：（個(gè)人看法，歡迎吐槽）

  • 注解方式
    • 使用上簡單，幾行代碼就可以創(chuàng)建一個(gè)表格
    • 不能實(shí)現(xiàn)列的動態(tài)創(chuàng)建
    • 不能實(shí)現(xiàn)列的排序
  • 基本方式：
    • 使用上稍稍比注解方式麻煩一點(diǎn)
    • 可以實(shí)現(xiàn)列的動態(tài)創(chuàng)建（根據(jù)服務(wù)器返回的列的數(shù)量動態(tài)創(chuàng)建表格）
    • 可以實(shí)現(xiàn)點(diǎn)擊列，對列進(jìn)行升序以及倒序排列

注解的其他功能

  • @SmartTable：表格注解，用于生成表格

可用屬性：

  • name：表格名
  • count：是否顯示統(tǒng)計(jì)行
  • pageSize：頁數(shù)量
  • currentPage：當(dāng)前頁
    目測沒什么用，可能還沒找到技巧，先記錄下........
  • @SmartColumn列，用于注解列
  • name：列標(biāo)題
  • id：列排列位置（id越小，位置越靠前）
  • parent：父列名稱（不設(shè)置則沒有父列）
  • align：列對其方式，默認(rèn)居中
  • type：設(shè)置是否查詢下一級，有 ColumnType.Own,ColumnType.Child,兩個(gè)值可以設(shè)置，假設(shè) UserInfo 有個(gè)屬性是 Family family 對象，你想解析 faily 對象的屬性 monther,father 兩個(gè)屬性，則需要設(shè)置 Child，并在 monther,father 下添加相對應(yīng)的注解@SmartColumn，否則只解析到 Family，默認(rèn)是 Own。
  • autoMerge：設(shè)置是否自動合并，假設(shè)你返回的數(shù)據(jù)格式化之后 該列附近數(shù)據(jù)有相同，則會自動合并成一個(gè)單元格，默認(rèn)不開啟合并。
  • maxMergeCount：合并最大數(shù)量
  • autoCount：是否開啟統(tǒng)計(jì)，table 開啟顯示統(tǒng)計(jì)行，設(shè)置 autoCount 為 true，則該列可以自動統(tǒng)計(jì)，默認(rèn)為 false。
  • fixed：是否固定該列， fixed 設(shè)置為 true，該列滾動到最左邊時(shí)，可以自動固定住。

基本方法介紹

  • Column 類的常用方法
  • setAutoCount(boolean isAutoCount)：設(shè)置自動排序（默認(rèn)升序）
  • isReverseSort：是否是反序排列
  • setComparator：設(shè)置排序比較
  • setCountFormat：統(tǒng)計(jì)格式化
  • OnColumnItemClickListener：列內(nèi)容點(diǎn)擊事件
  • setFixed：滑動到表格左邊時(shí)固定列
  • setTextAlign：設(shè)置開啟自動合并
  • setMaxMergeCount：設(shè)置開啟最大數(shù)量
  • setDrawFormat：設(shè)置繪制樣式格式化
  • setFormat：設(shè)置文字格式化
  • TableData 類常用方法
  • setSortColumn：設(shè)置排序列
  • settitleDrawFormat：設(shè)置列標(biāo)題格式化
  • setXSequenceFormat：設(shè)置頂部序列號格式化
  • setYSequenceFormat：設(shè)置左邊序列號格式化
  • setShowCount：設(shè)置是否顯示統(tǒng)計(jì)
  • setTitleDrawFormat：設(shè)置列標(biāo)題繪制格式化
  • setXSequenceFormat :設(shè)置 X 序號行文字格式化
  • setYSequenceFormat :設(shè)置 Y 序號行文字格式化
  • setUserCellRange(List<CellRange> userCellRange) :設(shè)置添加自定義合并規(guī)則

TableConfig 類常用方法

  • setContentStyle :設(shè)置內(nèi)容文字樣式
  • setYSequenceStyle :設(shè)置左邊序列文字樣式
  • setXSequenceStyle :設(shè)置頂部序列文字樣式
  • setColumnTitleStyle :設(shè)置列標(biāo)題文字樣式
  • setTableTitleStyle :設(shè)置表格標(biāo)題文字樣式
  • setCountStyle :設(shè)置統(tǒng)計(jì)行樣式
  • setColumnTitleGridStyle :設(shè)置列標(biāo)題網(wǎng)格樣式
  • setGridStyle :設(shè)置內(nèi)容網(wǎng)格樣式
  • setVerticalPadding :設(shè)置網(wǎng)格列 padding
  • setHorizontalPadding :設(shè)置網(wǎng)格行 padding
  • setYSequenceBackgroundColor :設(shè)置左序列背景
  • setXSequenceBackgroundColor :設(shè)置橫序行背景
  • setColumnTitleBackgroundColor :設(shè)置列標(biāo)題背景
  • setContentBackgroundColor :設(shè)置內(nèi)容背景
  • setCountBackgroundColor :設(shè)置統(tǒng)計(jì)行背景
  • setFixedYSequence :固定左側(cè)
  • setFixedXSequence :固定頂部
  • setFixedTitle :固定列標(biāo)題
  • setFixedCountRow :固定統(tǒng)計(jì)行
  • setColumnTitleVerticalPadding :列標(biāo)題上下 padding
  • setColumnTitleHorizontalPadding :增加列標(biāo)題左右 padding
  • setSequenceGridStyle :序列網(wǎng)格樣式
  • columnTitleGridStyle :列標(biāo)題網(wǎng)格樣式
  • setShowXSequence :設(shè)置是否顯示頂部序號列
  • setShowYSequence :設(shè)置是否顯示左側(cè)序號列
  • setShowTableTitle :設(shè)置是否顯示表格標(biāo)題
  • isShowColumnTitle :設(shè)置是否顯示列標(biāo)題
  • setMinTableWidth :設(shè)置表格最小寬度

SmartTable 類的常用方法

  • setOnColumnClickListener :設(shè)置列標(biāo)題點(diǎn)擊事件
  • setSortColumn :設(shè)置排序列
  • setZoom(boolean zoom,float maxZoom,float minZoom) :設(shè)置是否開啟縮放
  • addData(List<T> t, boolean isFoot) :添加新數(shù)據(jù)
  • setSelectFormat :設(shè)置選中 Cell 樣式
  • notifyDataChanged :重新計(jì)算布局

相關(guān)文章推薦：

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容