112

好用漂亮的Android 表格框架2

 6 years ago
source link: https://juejin.im/post/5a5dce7651882573256bd043
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

好用漂亮的Android 表格框架2

2018-01-17 02:41 52785

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

好用漂亮的Android 表格框架

好用漂亮的Android 表格框架3

展示二维数组

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

160fe701e82e9288~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
//造假数据 仿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,你也可以不用列标题。下面是选座的示例。



fortran

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

160fe7053a69c129~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
展示Excel

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

160fe70eee06a176~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
 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效果不是很清楚,贴张截图

160fe7382285065a~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
合并单元格

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



pgsql

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截图:

16107703b8703d24~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp

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

161077102b186bd8~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
对齐Align

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



reasonml

column.setTextAlign(Paint.Align textAlign)

注解模式下



reasonml

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

160fe73edb9da431~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
  • 1.增加设置是否显示表格标题(表格标题支持上下左右方向);
  • 2.是否显示列标题;
  • 3.增加左上角空隙格式化;
  • 4.表格放大X,Y序号不会跟随字体放大;
  • 5.修复缩放问题,提升稳定性。

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK