好用漂亮的Android 表格框架

黃燕斌發表於2018-01-11
Android框架

Android 表格使用的頻率並不高，之前花了心思寫了SmartTable表格，覺得android移動端表格就應該是這個樣子的，地址github.com/huangyanbin…,一直放在github上無人問津，最近有同學說蠻好用的，為啥沒更新下去。便想寫這邊文章推銷推銷。也算值了！我按功能點一一介紹下：

附上其他文章：

好用漂亮的Android 表格框架2

好用漂亮的Android 表格框架3

如何生成一個表格
 <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即可。

好用漂亮的Android 表格框架

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;
            }
        });
複製程式碼

好用漂亮的Android 表格框架

格式化資料

發現時間這個列很不美觀，我們想要格式化一下時間這列


 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;
            }
        });
複製程式碼

好用漂亮的Android 表格框架

提供支援文字，多行文字，文字和圖示組合（上下左右）

表格一般可以統計功能，我們開啟統計功能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);
複製程式碼

好用漂亮的Android 表格框架

動效

固定指定列和X序號列，Y序號列，列標題，統計行。你可以根據需求開啟，組合效果真的很棒

//固定指定列
   timeColumn.setFixed(true);
   //Y序號列
   table.getConfig().setFixedYSequence(true);
   //X序號列
   table.getConfig().setFixedXSequence(true);
   //列標題
   table.getConfig().setFixedCountRow(true);
   //統計行
   table.getConfig().setFixedTitle(true);
 
複製程式碼

好用漂亮的Android 表格框架

縮放

當然肯定少不了放大和縮小

table.setZoom(true);
//可以設定放大最大和最小值
 setZoom(boolean zoom,float maxZoom,float minZoom);
複製程式碼

好用漂亮的Android 表格框架

事件

批註和點選事件

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;
            }
        };
複製程式碼

好用漂亮的Android 表格框架

排序

可以通過設定列，然後列條件來排序。

//設定排序列，設定是否反序
 table.setSortColumn(ageColumn,false);
複製程式碼

如果覺得還是不滿足，可以自己定義排序規則

ageColumn.setComparator(new Comparator<Integer>() {
   @Override
   public int compare(Integer o1, Integer o2) {
      return o1- o2;
   }
 });
複製程式碼

支援二維陣列

你可以使用ArrayTableData來代替TableData。就可以愉快的使用二維陣列，你甚至可以不用設定列標題。這樣可以實現一些類似選票和選座app需求。

 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) {
               return DensityUtils.dp2px(ArrayModeActivity.this,50);
           }

           @Override
           public int measureHeight(Column<Integer> column, int position, TableConfig config) {
               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;
                   case 3:
                       color =R.color.github_con_3;
                       break;
                   case 4:
                       color =R.color.github_con_4;
                       break;
                   default:
                       color =R.color.github_con_0;
                       break;
               }
               paint.setStyle(Paint.Style.FILL);
               paint.setColor(ContextCompat.getColor(ArrayModeActivity.this, color));
               c.drawRect(rect.left+5,rect.top+5,rect.right-5,rect.bottom-5,paint);
           }
       });
複製程式碼

好用漂亮的Android 表格框架

其他

還有很多功能點，包括動態新增首尾資料，分頁，格式化字型，背景等。這裡不一一介紹了。

  • 支援首尾動態新增資料

首尾動態新增資料 SmartTable.addData(List<T> t,boolean isFoot)來實現新增資料.

好用漂亮的Android 表格框架

  • 設定單個格子背景

在網上參考了html的table,發現樣式好看多了，按到這個思路，SmartTable增加了支援對單個格子的不同背景支援，在TableConfig裡面有5個IBackgroundFormat樣式，可以根據boolean isDraw(T t)返回資料做出判斷是否繪製背景drawBackground，預設繪製整個背景，當然你可以自己定義IBackgroundFormat使用其他形狀。

  • 設定單個格子字型

由於支援到單個格子背景的支援，字型顏色也需要根據背景還進行調整，所以又支援單個格子的字型設定，IBackgroundFormat中有 int getTextColor(T t),你只需重寫它，根據需求設定不同顏色。

  • 分頁

在客戶端太多資料體驗不好，所以開發分頁模式，在未使用註解情況下，只需要使用PageTableData分頁表格資料類 代替之前TableData表格資料類即可，使用PageTableData的setPageSize方法設定每頁數量。分頁就完成了。 如果你使用註解，請在@SmartTable註解元素新增pageSize屬性即可，setData會返回PageTableData物件，你可以使用它完成後面其他的設定。

  • 其他

SmartTable 增加notifyDataChanged方法用於重新解析計算佈局；

提供back方法fling到原點。

好用漂亮的Android 表格框架

github地址

github.com/huangyanbin…

相關文章