I wrote a beautiful Android table frame before many students like it, thank you for reading. Within days of launch, the Github Star exceeded 700. https://github.com/huangyanbin is a bit overwhelmed. In the last two days, I have made some bug fixes and added new features to SmartTable. Support two – dimensional array display, import Excel table, merge cells and so on. The function is more practical. Attached are other relevant articles:

Nice Android table framework

Use the beautiful Android table framework 3

Show a two-dimensional array

All you have to do is replace TableData with ArrayTableData and ArrayTableData also inherits TableData, so you can use any of the TableData methods. Set the 2d array and column headings you want to display.

String[] week = {"Day"."一"."二"."Three"."Four"."Five"."Six"}; The Integer [] [] infos = {,1,2,1,1,0,1,1,0,1,1,2,3 {0}, {4,2,1,1,0,1,1,0,1,1,2,2,3}, ,1,1,0,1,4,0,1,1,2,2,0,3,2,0,1,2,4,1,0,1,3,0,1,1 {2}, {2}, {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}, ,1,2,4,0,1,2,1,1,0,1,1,0 {3}}; ArrayTableData<Integer> tableData = ArrayTableData.create("Schedule",week,infos,new IDrawFormat<Integer>(){ @Override public int measureWidth(Column<Integer> column, TableConfig config) {// Set width to 50dpreturnDensityUtils.dp2px(ArrayModeActivity.this,50); } @override public int measureHeight(Column<Integer> Column, int position, TableConfig Config) {// Set the measureHeight to 50dpreturn 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; Rect. left+5,rect.top+5,rect.right-5,rect.bottom-5,paint); }}); / / click event tableData. SetOnItemClickListener (new ArrayTableData. OnItemClickListener < Integer > () {@ Override public void onClick(Column column, String value, Integer o, int col, int row) { Toast.makeText(ArrayModeActivity.this,"Column."+col+ "Line."+row + "Data:"+value,Toast.LENGTH_SHORT).show(); }}); // Set table.settableData (tableData);Copy the code

It’s that simple. IDrawFormat is an interface for formatting styles. Several of them I provide images and text multi – line formatting etc. The measureWidth and measureHeight methods are used to specify the Cell Cell size. It is also possible to have null data in a two-dimensional array.

You might say, I don’t want the column headers to show up, OK, you don’t have to. Here is an example of seat selection.

final ArrayTableData<Integer> tableData = ArrayTableData.create(table, "Seat selection 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){return0; } switch (status){caseZero:return R.mipmap.seat;
                    case 1:
                        return R.mipmap.seat_selected;
                }
                return 0;
            }

Copy the code

Show the Excel

You can show Excel using ArrayTableData. Importing data can now be done via POI, JXL. I’m using JXL here. Here’s an example:

 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++) {// convertfor(int j = 0; j < data[i].length; j++) { newData[j][i] = data[i][j]; // transpose core}}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 (tableData, tableData)"Excel table", data, new TextDrawFormat<String>()); tableData.setCellRangeAddresses(cellRanges); table.setTableData(tableData); }}Copy the code

GIF effect is not very clear, post a screenshot

Merged cell

Form want beautiful, this is missing, especially import Excel. In TableData. SetCellRangeAddresses (CellRange [] CellRange). Constructor public CellRange(int firstRow, int lastRow, int firstCol, int lastCol) Similar to POI and JXL, setting the location of the cells that need to be merged will do.

Range[] ranges = sheet.getMergedCells(); // Read merge unit rules from JXLif(ranges ! =null) { cellRanges = new CellRange[ranges.length]; // Convert to CellRangefor(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; }}Copy the code

Importing basic Excel properties such as alignment, font color, size, annotation, background color is now supported. These are almost enough. Here’s an Excel screenshot of various complexities:

Take a look at our effect, it is very close, of course there is color deviation, line feed, continue to optimize:

Align the Align

In normal mode, the Align column is set directly


column.setTextAlign(Paint.Align textAlign)
Copy the code

In annotation mode

@SmartColumn(id =1,name="Area",align = Paint.Align.LEFT)
Copy the code

Other updates
  • 1. Add whether to display table titles (table titles support up, down, left and right directions);
  • 2. Check whether the column header is displayed.
  • 3. Add formatting for the upper left corner space;
  • 4. Enlarge X in the table,Y serial number will not follow font enlargement;
  • 5. Fix scaling problems and improve stability.

They are in the demo in the above example, https://github.com/huangyanbin/smartTable, and finally thank you support.