最近項目需求需要制作一個表格展示效果妄迁，先看下UI圖吧：
image.png
剛開始接收到這個需求的時候疗韵，第一反應(yīng)就是使用 RecyclerView 來進(jìn)行實現(xiàn)兑障，誰讓 RecyclerView 那么牛逼呢？不用糾結(jié) RecyclerView 完完全全可以實現(xiàn)這種效果，無外乎可能就是稍微復(fù)雜些
RecyclerView 實現(xiàn)思路：
- 最外層采用 HorizontalScrollView流译，保證表格可以左右進(jìn)行滑動
- 內(nèi)層使用 RecyclerView,而使用 RecyclerView 時需要使用到 getItemViewType 這個方法來規(guī)定條目的類型（第一行title以及合計可以認(rèn)為是同一種類型逞怨，而“沈陽”那一個稍微大一點的條目可以認(rèn)為是第二種類型
- 類型一：這個類型布局就非常簡單了，采用 LInearLayout 就可以非常簡單的實現(xiàn)
- 類型二：可以采用水平的 LinearLayout 包裹 TextView 以及 RecyclerView 來進(jìn)行實現(xiàn)
上面僅僅是介紹了我最開始采用的方案福澡，當(dāng)然缺點非常多：
- 使用上面方案時叠赦，需要考慮列的寬度問題，要么寬度直接在布局中寫死（每列中文字長度不一樣革砸，可能會出現(xiàn)第一行與第二行的列錯位情況）除秀，要么根據(jù)服務(wù)器返回的數(shù)據(jù)動態(tài)獲取每列中最長字符串所需要占用的寬度進(jìn)行動態(tài)設(shè)置
- 表格一般都會存在排序功能（當(dāng)然我這個項目中暫時還未出現(xiàn)），如果出現(xiàn)需要對列進(jìn)行升序或降序排序算利，那就呵呵了册踩，自己想辦法去吧，想想都痛苦
說了這么多并不是貶低 RecyclerView 的意思效拭，因為 RecyclerView 本身的定義就不是專門用來做這種復(fù)雜表格的（有說錯的地方暂吉，歡迎在評論中留言），你讓 RecyclerView 去實現(xiàn)這種效果就有點.......
下面來介紹一下今天的主角：SmartTable —— 好用漂亮的 Android 表格框架
先說一下 SmartTable 都支持的功能吧允耿，具體例子后面再給出：
- 快速配置自動生成表格借笙；
- 自動計算表格寬高
- 表格列標(biāo)題組合
- 表格固定左序列、頂部序列较锡、第一行业稼、列標(biāo)題、統(tǒng)計行
- 自動統(tǒng)計蚂蕴，排序（自定義統(tǒng)計規(guī)則）
- 表格圖文低散、序列號、列標(biāo)題格式化
- 表格各組成背景骡楼、文字熔号、網(wǎng)格、padding 等配置
- 表格批注
- 表格內(nèi)容鸟整、列標(biāo)題點擊事件
- 縮放模式和滾動模式
- 注解模式
- 內(nèi)容多行顯示
- 分頁模式
- 首尾動態(tài)添加數(shù)據(jù)
- 豐富的格式化
- 支持二維數(shù)組展示（用于類似日程表引镊，電影選票等）
- 導(dǎo)入 excel(支持顏色，字體篮条，背景弟头，批注，對齊涉茧，圖片等基本 Excel 屬性)
- 表格合并單元(支持注解合并赴恨，支持自動合并)
- 支持其他刷新框架 SmartRefreshLayout
- 可配置表格最小寬度(小于該寬度自動適配)
- 支持直接 List 或數(shù)組字段轉(zhuǎn)列
- 支持 Json 數(shù)據(jù)直接轉(zhuǎn)換成表格
- 支持表格網(wǎng)格指定行列顯示
看介紹是不是感覺叼的不要不要的，不過呢伴栓，我也是剛使用這個框架伦连，在這里也僅僅是介紹一些開發(fā)中常用的雨饺，其他的自己去嘗試吧
如何使用
- 引用：添加 JitPack repository 到你的 build 文件
allprojects {
repositories {
...
maven { url 'https://www.jitpack.io' }
}
}
- 增加依賴
dependencies {
compile 'com.github.huangyanbin:SmartTable:2.0'
}
使用方式
SmartTable 的使用方式有兩種：
- 采用注解的形式
- 基本模式，手動配置行與列
一惑淳、注解方式
- 步驟一：在布局文件中使用 SmartTable
<com.bin.david.form.core.SmartTable
android:id="@+id/table"
android:layout_width="match_parent"
android:layout_height="match_parent" />
- 步驟二：定義表格（自定義bean對象）
@SmartTable(name = "銷售計劃表")
public class UserInfo {
public UserInfo(String city, int name, int count, int restaurant, int ka, int wholesale, int industry, int other) {
this.city = city;
this.name = name;
this.count = count;
this.restaurant = restaurant;
this.ka = ka;
this.wholesale = wholesale;
this.industry = industry;
this.other = other;
}
// name：版塊名稱额港，count：目標(biāo)值，restaurant：餐飲數(shù)量汛聚，ka：KA數(shù)量锹安，wholesale：流通批發(fā)數(shù)量，industry：工業(yè)加工數(shù)量倚舀，other：其它數(shù)量
@SmartColumn(id = 0, name = "部門/渠道", autoMerge = true)
private String city;
@SmartColumn(id = 1, name = "板塊")
private int name;
@SmartColumn(id = 2, name = "目標(biāo)值")
private int count;
@SmartColumn(id = 3, name = "餐飲")
private int restaurant;
@SmartColumn(id = 4, name = "KA")
private int ka;
@SmartColumn(id = 5, name = "流通批發(fā)")
private int wholesale;
@SmartColumn(id = 6, name = "工業(yè)加工")
private int industry;
@SmartColumn(id = 7, name = "其他")
private int other;
}
- 步驟三：綁定數(shù)據(jù)（完成）
public class MainActivity extends AppCompatActivity {
private SmartTable table;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
List<UserInfo> list = new ArrayList<>();
table = findViewById(R.id.table);
list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
list.add(new UserInfo("烏魯木齊",100, 150, 50, 240, 1100, 450, 23458));
list.add(new UserInfo("烏魯木齊",100, 150, 50, 240, 1100, 450, 23458));
list.add(new UserInfo("烏魯木齊",100, 150, 50, 240, 1100, 450, 23458));
list.add(new UserInfo("烏魯木齊",100, 150, 50, 240, 1100, 450, 23458));
list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
list.add(new UserInfo("沈陽",100, 150, 50, 240, 1100, 450, 23458));
table.setData(list);
table.getConfig().setContentStyle(new FontStyle(50, Color.BLUE));
}
}
是不是分分鐘實現(xiàn)叹哭，效果圖如下：
image.png
二、基本方式痕貌，手動創(chuàng)建行與列
- 步驟一：在布局文件中使用 SmartTable
<com.bin.david.form.core.SmartTable
android:id="@+id/table"
android:layout_width="match_parent"
android:layout_height="match_parent" />
- 步驟二：定義表格（自定義bean對象）风罩，與采用注解方式唯一的不同就是不在使用 @SmartColumn 與 @SmartColumn 進(jìn)行標(biāo)注
public class User {
public User(String city, int name, int count, int restaurant, int ka, int wholesale, int industry, int other) {
this.city = city;
this.name = name;
this.count = count;
this.restaurant = restaurant;
this.ka = ka;
this.wholesale = wholesale;
this.industry = industry;
this.other = other;
}
// name：版塊名稱，count：目標(biāo)值舵稠，restaurant：餐飲數(shù)量超升，ka：KA數(shù)量，wholesale：流通批發(fā)數(shù)量哺徊，industry：工業(yè)加工數(shù)量室琢，other：其它數(shù)量
private String city;
private int name;
private int count;
private int restaurant;
private int ka;
private int wholesale;
private int industry;
private int other;
}
- 步驟三：手動創(chuàng)建列字段
//普通列
Column<String> city = new Column<>("部門/渠道", "city");
Column<Integer> name = new Column<>("板塊", "name");
Column<Integer> count = new Column<>("目標(biāo)值", "count");
Column<Integer> restaurant = new Column<>("餐飲", "restaurant");
Column<Integer> ka = new Column<>("KA", "ka");
Column<Integer> wholesale = new Column<>("流通批發(fā)", "wholesale");
Column<Integer> industry = new Column<>("工業(yè)加工", "industry");
Column<Integer> other = new Column<>("其他", "other");
//設(shè)置該列當(dāng)字段相同時自動合并
city.setAutoMerge(true);
- 步驟四：設(shè)置單元格內(nèi)容
//設(shè)置單元格內(nèi)容
List<User> list = new ArrayList<>();
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("烏魯木齊", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("烏魯木齊", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("烏魯木齊", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("烏魯木齊", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
list.add(new User("沈陽", 100, 150, 50, 240, 1100, 450, 23458));
- 步驟五：把數(shù)據(jù)綁定到 SmartTable 上
//表格數(shù)據(jù) datas 是需要填充的數(shù)據(jù)
TableData<User> tableData = new TableData<>("表格名", list, city, name, count, restaurant, ka, wholesale, industry, other);
//設(shè)置數(shù)據(jù)
table = findViewById(R.id.table);
table.setTableData(tableData);
table.getConfig().setContentStyle(new FontStyle(50, Color.BLUE));
是不是也是分分鐘的事，效果圖是一樣的就不貼了
優(yōu)劣勢：（個人看法落追，歡迎吐槽）
- 注解方式
- 使用上簡單盈滴，幾行代碼就可以創(chuàng)建一個表格
- 不能實現(xiàn)列的動態(tài)創(chuàng)建
- 不能實現(xiàn)列的排序
- 基本方式：
- 使用上稍稍比注解方式麻煩一點
- 可以實現(xiàn)列的動態(tài)創(chuàng)建（根據(jù)服務(wù)器返回的列的數(shù)量動態(tài)創(chuàng)建表格）
- 可以實現(xiàn)點擊列，對列進(jìn)行升序以及倒序排列
注解的其他功能
- @SmartTable：表格注解轿钠，用于生成表格
可用屬性：
- name：表格名
- count：是否顯示統(tǒng)計行
- pageSize：頁數(shù)量
- currentPage：當(dāng)前頁
目測沒什么用巢钓，可能還沒找到技巧，先記錄下........
- @SmartColumn列疗垛，用于注解列
- name：列標(biāo)題
- id：列排列位置（id越小症汹，位置越靠前）
- parent：父列名稱（不設(shè)置則沒有父列）
- align：列對其方式，默認(rèn)居中
- type：設(shè)置是否查詢下一級贷腕，有 ColumnType.Own,ColumnType.Child,兩個值可以設(shè)置背镇，假設(shè) UserInfo 有個屬性是 Family family 對象，你想解析 faily 對象的屬性 monther,father 兩個屬性泽裳，則需要設(shè)置 Child芽世，并在 monther,father 下添加相對應(yīng)的注解@SmartColumn，否則只解析到 Family诡壁，默認(rèn)是 Own。
- autoMerge：設(shè)置是否自動合并荠割，假設(shè)你返回的數(shù)據(jù)格式化之后 該列附近數(shù)據(jù)有相同妹卿，則會自動合并成一個單元格旺矾，默認(rèn)不開啟合并。
- maxMergeCount：合并最大數(shù)量
- autoCount：是否開啟統(tǒng)計夺克，table 開啟顯示統(tǒng)計行箕宙，設(shè)置 autoCount 為 true，則該列可以自動統(tǒng)計铺纽，默認(rèn)為 false柬帕。
- fixed：是否固定該列， fixed 設(shè)置為 true狡门，該列滾動到最左邊時陷寝，可以自動固定住。
基本方法介紹
- Column 類的常用方法
- setAutoCount(boolean isAutoCount)：設(shè)置自動排序（默認(rèn)升序）
- isReverseSort：是否是反序排列
- setComparator：設(shè)置排序比較
- setCountFormat：統(tǒng)計格式化
- OnColumnItemClickListener：列內(nèi)容點擊事件
- setFixed：滑動到表格左邊時固定列
- setTextAlign：設(shè)置開啟自動合并
- setMaxMergeCount：設(shè)置開啟最大數(shù)量
- setDrawFormat：設(shè)置繪制樣式格式化
- setFormat：設(shè)置文字格式化
- TableData 類常用方法
- setSortColumn：設(shè)置排序列
- settitleDrawFormat：設(shè)置列標(biāo)題格式化
- setXSequenceFormat：設(shè)置頂部序列號格式化
- setYSequenceFormat：設(shè)置左邊序列號格式化
- setShowCount：設(shè)置是否顯示統(tǒng)計
- setTitleDrawFormat：設(shè)置列標(biāo)題繪制格式化
- setXSequenceFormat :設(shè)置 X 序號行文字格式化
- setYSequenceFormat :設(shè)置 Y 序號行文字格式化
- setUserCellRange(List<CellRange> userCellRange) :設(shè)置添加自定義合并規(guī)則
TableConfig 類常用方法
- setContentStyle :設(shè)置內(nèi)容文字樣式
- setYSequenceStyle :設(shè)置左邊序列文字樣式
- setXSequenceStyle :設(shè)置頂部序列文字樣式
- setColumnTitleStyle :設(shè)置列標(biāo)題文字樣式
- setTableTitleStyle :設(shè)置表格標(biāo)題文字樣式
- setCountStyle :設(shè)置統(tǒng)計行樣式
- setColumnTitleGridStyle :設(shè)置列標(biāo)題網(wǎng)格樣式
- setGridStyle :設(shè)置內(nèi)容網(wǎng)格樣式
- setVerticalPadding :設(shè)置網(wǎng)格列 padding
- setHorizontalPadding :設(shè)置網(wǎng)格行 padding
- setYSequenceBackgroundColor :設(shè)置左序列背景
- setXSequenceBackgroundColor :設(shè)置橫序行背景
- setColumnTitleBackgroundColor :設(shè)置列標(biāo)題背景
- setContentBackgroundColor :設(shè)置內(nèi)容背景
- setCountBackgroundColor :設(shè)置統(tǒng)計行背景
- setFixedYSequence :固定左側(cè)
- setFixedXSequence :固定頂部
- setFixedTitle :固定列標(biāo)題
- setFixedCountRow :固定統(tǒng)計行
- setColumnTitleVerticalPadding :列標(biāo)題上下 padding
- setColumnTitleHorizontalPadding :增加列標(biāo)題左右 padding
- setSequenceGridStyle :序列網(wǎng)格樣式
- columnTitleGridStyle :列標(biāo)題網(wǎng)格樣式
- setShowXSequence :設(shè)置是否顯示頂部序號列
- setShowYSequence :設(shè)置是否顯示左側(cè)序號列
- setShowTableTitle :設(shè)置是否顯示表格標(biāo)題
- isShowColumnTitle :設(shè)置是否顯示列標(biāo)題
- setMinTableWidth :設(shè)置表格最小寬度
SmartTable 類的常用方法
- setOnColumnClickListener :設(shè)置列標(biāo)題點擊事件
- setSortColumn :設(shè)置排序列
- setZoom(boolean zoom,float maxZoom,float minZoom) :設(shè)置是否開啟縮放
- addData(List<T> t, boolean isFoot) :添加新數(shù)據(jù)
- setSelectFormat :設(shè)置選中 Cell 樣式
- notifyDataChanged :重新計算布局
相關(guān)文章推薦：
