Android非常牛叉的表格编辑库SmartTable，让复杂表

作者: aKaiC | 来源:发表于2018-04-06 19:28 被阅读1578次

最近项目需求需要制作一个表格展示效果，先看下UI图吧：

image.png

刚开始接收到这个需求的时候，第一反应就是使用 RecyclerView 来进行实现，谁让 RecyclerView 那么牛逼呢？不用纠结 RecyclerView 完完全全可以实现这种效果，无外乎可能就是稍微复杂些

RecyclerView 实现思路：

最外层采用 HorizontalScrollView，保证表格可以左右进行滑动

内层使用 RecyclerView,而使用 RecyclerView 时需要使用到 getItemViewType 这个方法来规定条目的类型（第一行title以及合计可以认为是同一种类型，而“沈阳”那一个稍微大一点的条目可以认为是第二种类型

类型一：这个类型布局就非常简单了，采用 LInearLayout 就可以非常简单的实现

类型二：可以采用水平的 LinearLayout 包裹 TextView 以及 RecyclerView 来进行实现

上面仅仅是介绍了我最开始采用的方案，当然缺点非常多：

使用上面方案时，需要考虑列的宽度问题，要么宽度直接在布局中写死（每列中文字长度不一样，可能会出现第一行与第二行的列错位情况），要么根据服务器返回的数据动态获取每列中最长字符串所需要占用的宽度进行动态设置

表格一般都会存在排序功能（当然我这个项目中暂时还未出现），如果出现需要对列进行升序或降序排序，那就呵呵了，自己想办法去吧，想想都痛苦

说了这么多并不是贬低 RecyclerView 的意思，因为 RecyclerView 本身的定义就不是专门用来做这种复杂表格的（有说错的地方，欢迎在评论中留言），你让 RecyclerView 去实现这种效果就有点.......

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

先说一下 SmartTable 都支持的功能吧，具体例子后面再给出：

快速配置自动生成表格；

自动计算表格宽高

表格列标题组合

表格固定左序列、顶部序列、第一行、列标题、统计行

自动统计，排序（自定义统计规则）

表格图文、序列号、列标题格式化

表格各组成背景、文字、网格、padding 等配置

表格批注

表格内容、列标题点击事件

缩放模式和滚动模式

注解模式

内容多行显示

分页模式

首尾动态添加数据

丰富的格式化

支持二维数组展示（用于类似日程表，电影选票等）

导入 excel(支持颜色，字体，背景，批注，对齐，图片等基本 Excel 属性)

表格合并单元(支持注解合并，支持自动合并)

支持其他刷新框架 SmartRefreshLayout

可配置表格最小宽度(小于该宽度自动适配)

支持直接 List 或数组字段转列

支持 Json 数据直接转换成表格

支持表格网格指定行列显示

看介绍是不是感觉叼的不要不要的，不过呢，我也是刚使用这个框架，在这里也仅仅是介绍一些开发中常用的，其他的自己去尝试吧

如何使用

引用：添加 JitPack repository 到你的 build 文件

allprojects {
        repositories {
            ...
            maven { url 'https://www.jitpack.io' }
        }
    }

增加依赖

dependencies {
            compile 'com.github.huangyanbin:SmartTable:2.0'
    }

使用方式

SmartTable 的使用方式有两种：

采用注解的形式

基本模式，手动配置行与列

一、注解方式

步骤一：在布局文件中使用 SmartTable

<com.bin.david.form.core.SmartTable
        android:id="@+id/table"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

步骤二：定义表格（自定义bean对象）

@SmartTable(name = "销售计划表")
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：目标值，restaurant：餐饮数量，ka：KA数量，wholesale：流通批发数量，industry：工业加工数量，other：其它数量
    @SmartColumn(id = 0, name = "部门/渠道", autoMerge = true)
    private String city;
    @SmartColumn(id = 1, name = "板块")
    private int name;
    @SmartColumn(id = 2, name = "目标值")
    private int count;
    @SmartColumn(id = 3, name = "餐饮")
    private int restaurant;
    @SmartColumn(id = 4, name = "KA")
    private int ka;
    @SmartColumn(id = 5, name = "流通批发")
    private int wholesale;
    @SmartColumn(id = 6, name = "工业加工")
    private int industry;
    @SmartColumn(id = 7, name = "其他")
    private int other;
}

步骤三：绑定数据（完成）

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

是不是分分钟实现，效果图如下：

image.png

二、基本方式，手动创建行与列

步骤一：在布局文件中使用 SmartTable

<com.bin.david.form.core.SmartTable
        android:id="@+id/table"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

步骤二：定义表格（自定义bean对象），与采用注解方式唯一的不同就是不在使用 @SmartColumn 与 @SmartColumn 进行标注

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：目标值，restaurant：餐饮数量，ka：KA数量，wholesale：流通批发数量，industry：工业加工数量，other：其它数量
    private String city;
    private int name;
    private int count;
    private int restaurant;
    private int ka;
    private int wholesale;
    private int industry;
    private int other;
}

步骤三：手动创建列字段

//普通列
Column<String> city = new Column<>("部门/渠道", "city");
Column<Integer> name = new Column<>("板块", "name");
Column<Integer> count = new Column<>("目标值", "count");
Column<Integer> restaurant = new Column<>("餐饮", "restaurant");
Column<Integer> ka = new Column<>("KA", "ka");
Column<Integer> wholesale = new Column<>("流通批发", "wholesale");
Column<Integer> industry = new Column<>("工业加工", "industry");
Column<Integer> other = new Column<>("其他", "other");
//设置该列当字段相同时自动合并
city.setAutoMerge(true);

步骤四：设置单元格内容

//设置单元格内容
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));

步骤五：把数据绑定到 SmartTable 上

//表格数据 datas 是需要填充的数据
TableData<User> tableData = new TableData<>("表格名", list, city, name, count, restaurant, ka, wholesale, industry, other);

//设置数据
table = findViewById(R.id.table);
table.setTableData(tableData);
table.getConfig().setContentStyle(new FontStyle(50, Color.BLUE));

是不是也是分分钟的事，效果图是一样的就不贴了

优劣势：（个人看法，欢迎吐槽）

注解方式
- 使用上简单，几行代码就可以创建一个表格
- 不能实现列的动态创建
- 不能实现列的排序

基本方式：
- 使用上稍稍比注解方式麻烦一点
- 可以实现列的动态创建（根据服务器返回的列的数量动态创建表格）
- 可以实现点击列，对列进行升序以及倒序排列

注解的其他功能

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

可用属性：

name：表格名

count：是否显示统计行

pageSize：页数量

currentPage：当前页
目测没什么用，可能还没找到技巧，先记录下........

@SmartColumn列，用于注解列

name：列标题

id：列排列位置（id越小，位置越靠前）

parent：父列名称（不设置则没有父列）

align：列对其方式，默认居中

type：设置是否查询下一级，有 ColumnType.Own,ColumnType.Child,两个值可以设置，假设 UserInfo 有个属性是 Family family 对象，你想解析 faily 对象的属性 monther,father 两个属性，则需要设置 Child，并在 monther,father 下添加相对应的注解@SmartColumn，否则只解析到 Family，默认是 Own。

autoMerge：设置是否自动合并，假设你返回的数据格式化之后该列附近数据有相同，则会自动合并成一个单元格，默认不开启合并。

maxMergeCount：合并最大数量

autoCount：是否开启统计，table 开启显示统计行，设置 autoCount 为 true，则该列可以自动统计，默认为 false。

fixed：是否固定该列， fixed 设置为 true，该列滚动到最左边时，可以自动固定住。

基本方法介绍

Column 类的常用方法

setAutoCount(boolean isAutoCount)：设置自动排序（默认升序）

isReverseSort：是否是反序排列

setComparator：设置排序比较

setCountFormat：统计格式化

OnColumnItemClickListener：列内容点击事件

setFixed：滑动到表格左边时固定列

setTextAlign：设置开启自动合并

setMaxMergeCount：设置开启最大数量

setDrawFormat：设置绘制样式格式化

setFormat：设置文字格式化

TableData 类常用方法

setSortColumn：设置排序列

settitleDrawFormat：设置列标题格式化

setXSequenceFormat：设置顶部序列号格式化

setYSequenceFormat：设置左边序列号格式化

setShowCount：设置是否显示统计

setTitleDrawFormat：设置列标题绘制格式化

setXSequenceFormat :设置 X 序号行文字格式化

setYSequenceFormat :设置 Y 序号行文字格式化

setUserCellRange(List<CellRange> userCellRange) :设置添加自定义合并规则

TableConfig 类常用方法

setContentStyle :设置内容文字样式

setYSequenceStyle :设置左边序列文字样式

setXSequenceStyle :设置顶部序列文字样式

setColumnTitleStyle :设置列标题文字样式

setTableTitleStyle :设置表格标题文字样式

setCountStyle :设置统计行样式

setColumnTitleGridStyle :设置列标题网格样式

setGridStyle :设置内容网格样式

setVerticalPadding :设置网格列 padding

setHorizontalPadding :设置网格行 padding

setYSequenceBackgroundColor :设置左序列背景

setXSequenceBackgroundColor :设置横序行背景

setColumnTitleBackgroundColor :设置列标题背景

setContentBackgroundColor :设置内容背景

setCountBackgroundColor :设置统计行背景

setFixedYSequence :固定左侧

setFixedXSequence :固定顶部

setFixedTitle :固定列标题

setFixedCountRow :固定统计行

setColumnTitleVerticalPadding :列标题上下 padding

setColumnTitleHorizontalPadding :增加列标题左右 padding

setSequenceGridStyle :序列网格样式

columnTitleGridStyle :列标题网格样式

setShowXSequence :设置是否显示顶部序号列

setShowYSequence :设置是否显示左侧序号列

setShowTableTitle :设置是否显示表格标题

isShowColumnTitle :设置是否显示列标题

setMinTableWidth :设置表格最小宽度

SmartTable 类的常用方法

setOnColumnClickListener :设置列标题点击事件

setSortColumn :设置排序列

setZoom(boolean zoom,float maxZoom,float minZoom) :设置是否开启缩放

addData(List<T> t, boolean isFoot) :添加新数据

setSelectFormat :设置选中 Cell 样式

notifyDataChanged :重新计算布局

Android非常牛叉的表格编辑库SmartTable，让复杂表

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

如何使用

使用方式

一、注解方式

二、基本方式，手动创建行与列

优劣势：（个人看法，欢迎吐槽）

注解的其他功能

基本方法介绍

TableConfig 类常用方法

SmartTable 类的常用方法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

自定义控件