漂亮的Android表格框架 - 大西瓜3721

时间:2024-03-12 11:32:19

漂亮的Android表格框架

Android 表格使用的频率并不高,之前花了心思写了SmartTable表格,觉得android移动端表格就应该是这个样子的,地址https://github.com/huangyanbin/smartTable,一直放在github上无人问津,最近有同学说蛮好用的,为啥没更新下去。便想写这边文章推销推销。也算值了!我按功能点一一介绍下:

如何生成一个表格
 <com.bin.david.form.core.SmartTable
       android:id="@+id/table"
       android:layout_width="match_parent"
       android:layout_height="300dp"

      />

可以通过注解@SmartTable表格注解 @SmartColumn字段注解

@SmartTable(name="用户信息列表")
public class UserInfo {
    @SmartColumn(id =1,name = "姓名")
    private String name;
    @SmartColumn(id=2,name="年龄")
    private int age;
    ...
}

    List<UserInfo> list = new ArrayList<>();
    ...
    table = (SmartTable<UserInfo>) findViewById(R.id.table);
    table.setData(list);

OK,这就是最简单的注解版。下面看下强大功能的普通版。只需要创建需要显示的列,设置需要解析的字段就可以,假设需要解析到UserInfo.parent.name,只需parent.name即可。

 
IMG_20180110_141537.jpg

 

final Column<String> nameColumn = new Column<>("姓名", "name");
final Column<Integer> ageColumn = new Column<>("年龄", "age");
 ...
 tableData = new TableData<>("测试",list,nameColumn,ageColumn...);
 table.setTableData(tableData);
 
美化

肯定有人说,这点功能,呵呵。来来,我们坐一下,开始展示丰富的功能。界面不美观,看这里,格式化一下内容背景:

 table.getConfig().setContentBackgroundFormat(new BaseBackgroundFormat<CellInfo>() {
            @Override
            public int getBackGroundColor() {
                return ContextCompat.getColor(AnnotationModeActivity.this,R.color.content_bg);
            }
            @Override
            public boolean isDraw(CellInfo cellInfo) {
                return cellInfo.position%2 ==0;
            }
        });
 
IMG_20180110_141600.jpg

发现时间这个列很不美观,我们想要格式化一下时间这列


 final IFormat<Long> format =  new IFormat<Long>() {
            @Override
            public String format(Long aLong) {
                Calendar calendar = Calendar.getInstance();
                calendar.setTimeInMillis(aLong);
                return calendar.get(Calendar.YEAR)+"-"+(calendar.get(Calendar.MONTH)+1)+"-"+calendar.get(Calendar.DAY_OF_MONTH);
            }
        };
final Column<Long> timeColumn = new Column<>("时间", "time",format);

还支持表格图文、序列号、列标题格式化;表格各组成背景、文字、网格、padding等配置,你可以参考demo;

勾选这列,我们想展示勾选的图标

 int size = DensityUtils.dp2px(this,15); //指定图标大小
 Column<Boolean> checkColumn = new Column<>("勾选", "isCheck",new ImageResDrawFormat<Boolean>(size,size) {
            @Override
            protected Context getContext() {
                return AnnotationModeActivity.this;
            }

            @Override
            protected int getResourceID(Boolean isCheck, String value, int position) {
                if(isCheck){
                    return R.mipmap.check;
                }
                return 0;
            }
        });
 
IMG_20180110_141623.jpg

提供支持文字,多行文字,文字和图标组合(上下左右)

表格一般可以统计功能,我们开启统计功能setShowCount(true),哪列需要统计开启setAutoCount即可,数字如果统计就是相加,文字就是取最长的大小

 tableData.setShowCount(true);
 nameColumn.setAutoCount(true);

但是这样不满足真实需求,需求往往很坑爹。所以提供了统计接口。下面是统计最大时间示例:

 timeColumn.setAutoCount(true);
        timeColumn.setCountFormat(new ICountFormat<Long, Long>() {
            private long maxTime;
            @Override
            public void count(Long aLong) {
                if(aLong > maxTime){
                    maxTime = aLong;
                }
            }

            @Override
            public Long getCount() {
                return maxTime;
            }

            @Override
            public String getCountString() {
                return format.format(maxTime);
            }

            @Override
            public void clearCount() {
                maxTime =0;
            }
        });

有时候我们需要标题组合,这个时候就可以这样玩:

Column groupColumn = new Column("组合",nameColumn,ageColumn);
TableData<UserInfo> tableData = new TableData<>("用户表",userInfos,groupColumn,timeColumn,checkColumn);
 
QQ图片20180110142851.jpg
动效

固定指定列和X序号列,Y序号列,列标题,统计行。你可以根据需求开启,组合效果真的很棒

//固定指定列
   timeColumn.setFixed(true);
   //Y序号列
   table.getConfig().setFixedYSequence(true);
   //X序号列
   table.getConfig().setFixedXSequence(true);
   //列标题
   table.getConfig().setFixedCountRow(true);
   //统计行
   table.getConfig().setFixedTitle(true);
 
 
QQ图片20180110143443.gif
缩放

当然肯定少不了放大和缩小

table.setZoom(true);
//可以设置放大最大和最小值
 setZoom(boolean zoom,float maxZoom,float minZoom);
 
QQ图片20180110153427.gif
事件

批注和点击事件

table.setOnColumnClickListener();

 MultiLineBubbleTip<Column> tip = new MultiLineBubbleTip<Column>(this,R.mipmap.round_rect,R.mipmap.triangle,fontStyle) {
            @Override
            public boolean isShowTip(Column column, int position) {
                if(column == nameColumn){
                    return true;
                }
                return false;
            }


            @Override
            public String[] format(Column column, int position) {
                UserInfo data = testData.get(position);
                String[] strings = {"批注","姓名:"+data.getName(),"年龄:"+data.getAge()};
                return strings;
            }
        };
 
IMG_20180110_141930.jpg

其他

还有很多功能点,包括动态添加首尾数据,分页,格式化字体,背景等。这里不一一介绍了。

  • 支持首尾动态添加数据

首尾动态添加数据 SmartTable.addData(List<T> t,boolean isFoot)来实现添加数据.

 
QQ图片20180110143453.gif
  • 设置单个格子背景

在网上参考了htmltable,发现样式好看多了,按到这个思路,SmartTable增加了支持对单个格子的不同背景支持,在TableConfig里面有5个IBackgroundFormat样式,可以根据boolean isDraw(T t)返回数据做出判断是否绘制背景drawBackground,默认绘制整个背景,当然你可以自己定义IBackgroundFormat使用其他形状。

  • 设置单个格子字体

由于支持到单个格子背景的支持,字体颜色也需要根据背景还进行调整,所以又支持单个格子的字体设置,IBackgroundFormat中有 int getTextColor(T t),你只需重写它,根据需求设置不同颜色。

  • 分页

在客户端太多数据体验不好,所以开发分页模式,在未使用注解情况下,只需要使用PageTableData分页表格数据类 代替之前TableData表格数据类即可,使用PageTableDatasetPageSize方法设置每页数量。分页就完成了。
如果你使用注解,请在@SmartTable注解元素添加pageSize属性即可,setData会返回PageTableData对象,你可以使用它完成后面其他的设置。

  • 其他

SmartTable 增加notifyDataChanged方法用于重新解析计算布局;

提供back方法fling到原点。


 
bg.png

github地址

https://github.com/huangyanbin/smartTable



作者:黄燕斌
链接:https://www.jianshu.com/p/6dc225602ca6
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。