好用漂亮的Android 表格框架2

54,792 阅读4分钟

之前写了好用漂亮的Android表格框架很多同学点赞了,多谢各位看官。在发布几天,github star 超过700。https://github.com/huangyanbin 有点受宠若惊。这两天,我对SmartTable进行一些bug修复以及增加了新功能。支持二维数组展示,导入Excel表格,合并单元格等。功能更加实用。 附上相关其他文章:

好用漂亮的Android 表格框架

好用漂亮的Android 表格框架3

展示二维数组

你只需要用ArrayTableData 代替TableData就可以ArrayTableData也是继承TableData,所以TableData方法都可以使用。设置想要展示的二维数组和列标题。

//造假数据 仿github贡献图
  String[] week = {"日","一","二","三","四","五","六"};
        Integer[][] infos = {{0,1,2,1,1,0,1,1,0,1,1,2,3}, {4,2,1,1,0,1,1,0,1,1,2,2,3},
                {2,2,0,1,2,4,1,0,1,3,0,1,1},{2,1,1,0,1,4,0,1,1,2,2,0,3},
                {0,1,2,4,1,0,1,4,0,1,1,2,2}, {1,0,1,3,2,2,0,1,2,1,1,0,4},
                {3,1,2,4,0,1,2,1,1,0,1,1,0}};
  ArrayTableData<Integer> tableData = ArrayTableData.create("日程表",week,infos,new IDrawFormat<Integer>(){
 @Override
            public int measureWidth(Column<Integer> column, TableConfig config) {
                //设置宽50dp
                return DensityUtils.dp2px(ArrayModeActivity.this,50);
            }

            @Override
            public int measureHeight(Column<Integer> column, int position, TableConfig config) {
             //设置高50dp
                return DensityUtils.dp2px(ArrayModeActivity.this,50);
            }
            @Override
            public void draw(Canvas c, Column<Integer> column, Integer integer, String value, Rect rect, int position, TableConfig config) {
                Paint paint = config.getPaint();
                int color;
                switch (integer){
                    case 1:
                        color =R.color.github_con_1;
                        break;
                    case 2:
                        color =R.color.github_con_2;
                        break;
                        ...
                        break;
                }
                //绘制正方形
                c.drawRect(rect.left+5,rect.top+5,rect.right-5,rect.bottom-5,paint); 
            }
        });
        //点击事件
        tableData.setOnItemClickListener(new ArrayTableData.OnItemClickListener<Integer>() {
            @Override
            public void onClick(Column column, String value, Integer o, int col, int row) {
                Toast.makeText(ArrayModeActivity.this,"列:"+col+ " 行:"+row + "数据:"+value,Toast.LENGTH_SHORT).show();
            }
        });
        //设置表格数据
        table.setTableData(tableData);      
        

就是这么简单。IDrawFormat是格式化样式的接口。其中我几种提供图片和文字多行格式化等。这里直接实现接口,measureWidthmeasureHeight方法用于指定Cell格子大小。二维数组里面数据为null也是可以的。

你可能会说,我不想要列标题显示出来,OK,你也可以不用列标题。下面是选座的示例。

final ArrayTableData<Integer> tableData = ArrayTableData.create(table, "选座表", data, new ImageResDrawFormat<Integer>(size,size) {
            @Override
            protected Context getContext() {
                return SeatModeActivity.this;
            }

            @Override
            protected int getResourceID(Integer status, String value, int position) {
                if(status == null){return 0;}
                switch (status){
                    case 0:
                        return R.mipmap.seat;
                    case 1:
                        return R.mipmap.seat_selected;
                }
                return 0;
            }

展示Excel

展示Excel也是使用ArrayTableData就可以。导入数据现在可以通过POI,jxl。我这里使用的jxl.下面是个示例:

 public class ExcelAsyncTask extends AsyncTask<Integer,Void,String[][]>{

        @Override
        protected String[][] doInBackground(Integer... position) {

            try {
                int maxRow, maxColumn;
                cellRanges = null;
                InputStream is = getAssets().open(fileName);
                Workbook workbook = Workbook.getWorkbook(is);
                Sheet sheet = workbook.getSheet(position[0]);
                maxRow = sheet.getRows();
                maxColumn =  sheet.getColumns();
                String[][] data = new String[maxRow][];
                for (int i = 0; i < maxRow; i++) {
                    String[] rows = new String[maxColumn];
                    for(int j = 0;j < maxColumn;j++){
                        Cell cell = sheet.getCell(j, i);
                        if(cell !=null){
                            rows[j] = cell.getContents();
                        }else{
                            rows[j] = null;
                        }
                    }
                    data[i] = rows;
                }
                workbook.close();
                String[][] newData = new String[maxColumn][maxRow];
                for (int i = 0; i < data.length; i++) { //转换一下
                    for (int j = 0; j < data[i].length; j++) {
                        newData[j][i] = data[i][j]; // 转置核心
                    }
                }
                return newData;

            } catch (Exception e) {

            }

            return null;
        }

        @Override
        protected void onPostExecute(String[][] data) {
            if(data ==null || data.length==0) {
                data = new String[26][50]; //空白表格美观
            }
            ArrayTableData<String> tableData = ArrayTableData.create(table, "Excel表", data, new TextDrawFormat<String>());
            tableData.setCellRangeAddresses(cellRanges);
            table.setTableData(tableData);

        }
    }

gif效果不是很清楚,贴张截图

合并单元格

表格想要美观,这个不可缺失,特别是导入Excel.在TableData.setCellRangeAddresses(CellRange[] cellRange)CellRange是用于合并单元的 看看构造方法public CellRange(int firstRow , int lastRow, int firstCol, int lastCol)。和POIjxl类似,设置需要合并单元格的位置,就可以。

 Range[] ranges = sheet.getMergedCells(); //从jxl读取合并单元规则
                if(ranges !=null) {
                    cellRanges = new CellRange[ranges.length];
                    //依次转换成CellRange
                    for (int i = 0;i < ranges.length;i++) {
                        Range range =ranges[i];
                        CellRange cellRange = new CellRange(range.getTopLeft().getRow(),
                                range.getBottomRight().getRow(),
                              range.getTopLeft().getColumn(),range.getBottomRight().getColumn());
                        cellRanges[i] = cellRange;
                    }
                }

现在支持导入Excel中基本属性如:对齐,字体颜色,大小,批注,背景颜色。这些差不多够用了。下面是一张各种复杂点的Excel截图:

看下我们的效果,很接近了,当然还有颜色偏差,换行,后续继续优化:

对齐Align

普通模式下,列直接设置Align


column.setTextAlign(Paint.Align textAlign)

注解模式下

@SmartColumn(id =1,name="地区",align = Paint.Align.LEFT)

其他更新
  • 1.增加设置是否显示表格标题(表格标题支持上下左右方向);
  • 2.是否显示列标题;
  • 3.增加左上角空隙格式化;
  • 4.表格放大X,Y序号不会跟随字体放大;
  • 5.修复缩放问题,提升稳定性。

上面示例都放在demo中,https://github.com/huangyanbin/smartTable,最后谢谢支持大家。