漂亮的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

• 設置單個格子背景

在網上參考了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到原點。

 

bg.png

github地址

https://github.com/huangyanbin/smartTable

作者：黃燕斌
鏈接：https://www.jianshu.com/p/6dc225602ca6
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。