今天开始更新【重拾安卓】系列文章。php
因业务须要又要作一个 Android 原生的项目,记录下时隔几年以后再开发安卓的那些事。讲的不会太基础,基本上是自定义View封装,复杂功能的实现等等,有须要的小伙伴能够关注~前端
安卓对表格的支持不是太友好,前端很快能实现的简单表格,安卓写的话要费很大精力。java
拿到需求以后,稍微复杂点的功能在 github 上搜一下有没有好用的第三方框架,无疑是最节省时间的。表格还真有几个不错的框架,star 最多的是 smartTable ,的确很强大,只需设置数据就能自动生成表格。android
但考虑各类因素仍是决定本身撸一个表格,一是后端返回的数据结构还没定,二是需求并非太复杂,只是个简单表格,三是找找手感~git
最终效果:github
实现目标:json
实现原理:后端
两层 RecyclerView
嵌套,最外层是垂直方向的 RecyclerView
,每一行是一个 item
。每行又包含一个内层 RecyclerView
,每行的每一个单元格是内层 RecyclerView
的 item
。数据结构
为了方便重用,咱们把这个课表封装成自定义 View,并对外暴露一个方法设置数据。app
Android 自定义 View 有三种方式:组合、扩展、重写。咱们这里用的是组合的方式,即把已有的控件组合起来造成符合需求的自定义控件。
新建一个 Java 类 StudentWorkTableView
并继承 LinearLayout
,实现它的构造方法,就建立了一个自定义 View。
为何继承 LinearLayout
?其实继承其余的 RelativeLayout
、ConstraintLayout
均可以,通常是你的 xml 最外层用的是什么布局,就继承什么。
构造方法要实现三个,由于不一样的建立方式走的构造方法不同,因此都要求实现。
构造方法小技巧:把前两个参数少的构造方法里的 super 改为 this,并填充默认值变成三个参数,就会都调用三个参数的构造方法了,业务逻辑只需写在最后一个构造方法里便可。
这个 View 很简单,先在构造方法里绑定 xml 布局,再执行初始化方法初始数据,而后在 onLayout
中计算每一个单元格的宽度,最后对外暴露一个方法设置数据。自定义 View 基本都是这个套路。
注意这里用到了第三方框架 ButterKnife
,简化了 findViewById
,不熟悉的同窗能够查查相关资料。
代码注释写的比较详细,就很少说了直接看代码。
public class StudentWorkTableView extends LinearLayout {
@BindView(R.id.recycler_view_week_table)
RecyclerView recyclerView;
private Context mContext;
private List<TableListModel> mList;
private int mCellWidth;
private StudentWorkTableAdapter mTableAdapter;
public StudentWorkTableView(Context context) {
this(context, null, 0);
}
public StudentWorkTableView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public StudentWorkTableView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
View view = View.inflate(context, R.layout.view_student_work_table, this);
ButterKnife.bind(view, this);
mContext = context;
}
/** * 对外暴露的方法,设置表格的数据 * * @param list */
public void setData(List<TableListModel> list) {
mList = list;
init();
}
/** * 初始化方法 */
private void init() {
LinearLayoutManager lm = new LinearLayoutManager(mContext, LinearLayoutManager.VERTICAL, false);
recyclerView.setLayoutManager(lm);
recyclerView.setItemAnimator(new DefaultItemAnimator());
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
// onLayout 时 View 的宽高已经肯定了,能够拿到比较准确的值
int width = getWidth();
// 计算每列即每一个单元格的宽度。用 View 总宽度除以列数就获得了每一个单元格的宽度
mCellWidth = width / mList.get(0).getTableList().size();
if (mTableAdapter == null) {
//把单元格宽度传给 Adapter,在 Adapter 中对单元格重设宽度
mTableAdapter = new StudentWorkTableAdapter(mContext, mCellWidth, R.layout.item_student_work_table_view, mList);
recyclerView.setAdapter(mTableAdapter);
}
}
}
复制代码
对应的布局文件 view_student_work_table.xml
:
布局很简单,只有一个 RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView android:id="@+id/recycler_view_week_table" android:layout_width="match_parent" android:layout_height="match_parent"/>
</LinearLayout>
复制代码
这个适配器是控制每行的显示。
Adapter 用到了吊炸天的 BaseRecyclerViewAdapterHelper
,节省了不少代码。只需在 convert()
方法里找到view 并设置数据 便可。
public class StudentWorkTableAdapter extends BaseQuickAdapter<TableListModel, BaseViewHolder> {
private Context mContext;
private int mCellWidth;
private StudentWorkTableCellAdapter mCellAdapter;
public StudentWorkTableAdapter(Context context, int cellWidth, int layoutResId, @Nullable List<TableListModel> data) {
super(layoutResId, data);
mContext = context;
mCellWidth = cellWidth;
}
@Override
protected void convert(BaseViewHolder helper, TableListModel item) {
RecyclerView recyclerView = helper.getView(R.id.content_recycler_view);
//注意这个RecyclerView要用横向的布局,以展现每一列
LinearLayoutManager lm = new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(lm);
//设置adapter
mCellAdapter = new StudentWorkTableCellAdapter(mContext, mCellWidth, R.layout.item_student_work_cell, item.getTableList());
recyclerView.setAdapter(mCellAdapter);
}
}
复制代码
外层的 item 布局文件里也只有一个 RecyclerView,外层 RecyclerView 用来展现行,内层 RecyclerView 用来展现列。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView android:id="@+id/content_recycler_view" android:layout_width="match_parent" android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
复制代码
这个适配器是控制每一个单元格。表头跟其余行的样式不同,因此须要在数据上作个区分,这里简单的把表头的数据 id 都设为 111
了。判断若是是表头则改变背景样式。
public class StudentWorkTableCellAdapter extends BaseQuickAdapter<TableTitleModel, BaseViewHolder> {
private float mCellWidth;
private TextView tvTitle;
private Context mContext;
public StudentWorkTableCellAdapter(Context context, float cellWidth, int layoutResId, @Nullable List<TableTitleModel> data) {
super(layoutResId, data);
mCellWidth = cellWidth;
mContext = context;
}
@Override
protected void convert(BaseViewHolder helper, TableTitleModel item) {
tvTitle = helper.getView(R.id.tv_item_cell_table);
tvTitle.setText(item.getName());
ViewGroup.LayoutParams layoutParams = tvTitle.getLayoutParams();
layoutParams.width = (int)mCellWidth;
if (item.getId().equals("111")){
//根据标记判断是表头仍是普通单元格,若是是表头就改变背景色
tvTitle.setBackground(mContext.getResources().getDrawable(R.drawable.rect_table_title));
}
}
}
复制代码
这是每一个单元格的布局文件,不管多复杂的布局均可以作,这里只放一个 TextView 演示。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" xmlns:tools="http://schemas.android.com/tools" >
<TextView android:id="@+id/tv_item_cell_table" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="第一节" android:textSize="14sp" android:textColor="@color/text_normal" android:gravity="center" android:padding="10dp" android:background="@drawable/rect_table_cell" />
</android.support.constraint.ConstraintLayout>
复制代码
普通单元格的背景样式
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#fff"/>
<stroke android:color="#E0E0E0" android:width="0.5dp"/>
</shape>
复制代码
表头的背景样式
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#f1f2f3" />
<stroke android:width="0.5dp" android:color="#E0E0E0" />
</shape>
复制代码
样式文件放在 src/main/res/drawable
目录下。
以上就是表格自定义 View 的实现和封装。
封装完以后就是使用啦,在须要使用的页面的 xml 布局文件中引入封装好的自定义 View 便可
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="20dp" android:orientation="vertical" >
<com.solo.presentation.view.StudentWorkTableView android:id="@+id/work_table_view" android:layout_width="match_parent" android:layout_height="wrap_content"/>
</LinearLayout>
复制代码
在代码中经过 id 找到 StudentWorkTableView
,而后设置数据
@BindView(R.id.work_table_view)
StudentWorkTableView workTableView;
private List<TableListModel> tableListModels;
private void initWorkTableView() {
//从 assets 的 json 文件中读取数据
String json = AssetsUtils.getJson("work_table_data.json", getActivity());
Gson gson = new Gson();
tableListModels = gson.fromJson(json, new TypeToken<List<TableListModel>>(){}.getType());
//设置数据给 TableView
workTableView.setData(tableListModels);
}
复制代码
数据是经过读取本地的 json 文件模拟的假数据,正常状况下应该请求接口获取数据的。获取到数据以后调用 workTableView.setData(tableListModels);
把数据设置进自定义 View 就能够啦。
附上 TableListModel
对象,get()、set() 方法省略
public class TableListModel {
private List<TableTitleModel> tableList;
}
复制代码
TableTitleModel
对象,get()、set() 方法省略
public class TableTitleModel {
private String id;
private String name;
}
复制代码
如何获取本地 json 文件的数据呢?
src/main/assets
,跟 java
和 res
平级。读取 json 封装成了个工具类 AssetsUtils
/** * 读取 assets 文件夹中的文件工具类 */
public class AssetsUtils {
/** * 获取assets中的json * @param fileName * @param context * @return */
public static String getJson(String fileName, Context context){
StringBuilder stringBuilder = new StringBuilder();
try {
InputStream is = context.getAssets().open(fileName);
BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(is));
String line;
while ((line=bufferedReader.readLine()) != null){
stringBuilder.append(line);
}
} catch (IOException e) {
e.printStackTrace();
}
return stringBuilder.toString();
}
}
复制代码
附上 json 文件
[
{
"tableList": [
{
"id": "111",
"name": "星期一"
},
{
"id": "111",
"name": "星期二"
},
{
"id": "111",
"name": "星期三"
},
{
"id": "111",
"name": "星期四"
},
{
"id": "111",
"name": "星期五"
},
{
"id": "111",
"name": "星期六"
},
{
"id": "111",
"name": "星期日"
}
]
},
{
"tableList": [
{
"id": "11",
"name": "小紫"
},
{
"id": "12",
"name": "小明"
},
{
"id": "13",
"name": "小红"
},
{
"id": "14",
"name": "小绿"
},
{
"id": "15",
"name": "小黄"
},
{
"id": "14",
"name": "张三"
},
{
"id": "15",
"name": "李四"
}
]
},
{
"tableList": [
{
"id": "11",
"name": "小紫"
},
{
"id": "12",
"name": "小明"
},
{
"id": "13",
"name": "小红"
},
{
"id": "14",
"name": "小绿"
},
{
"id": "15",
"name": "小黄"
},
{
"id": "14",
"name": "张三"
},
{
"id": "15",
"name": "李四"
}
]
},
{
"tableList": [
{
"id": "11",
"name": "小紫"
},
{
"id": "12",
"name": "小明"
},
{
"id": "13",
"name": "小红"
},
{
"id": "14",
"name": "小绿"
},
{
"id": "15",
"name": "小黄"
},
{
"id": "14",
"name": "张三"
},
{
"id": "15",
"name": "李四"
}
]
},
{
"tableList": [
{
"id": "11",
"name": "小紫"
},
{
"id": "12",
"name": "小明"
},
{
"id": "13",
"name": "小红"
},
{
"id": "14",
"name": "小绿"
},
{
"id": "15",
"name": "小黄"
},
{
"id": "14",
"name": "张三"
},
{
"id": "15",
"name": "李四"
}
]
},
{
"tableList": [
{
"id": "11",
"name": "小紫"
},
{
"id": "12",
"name": "小明"
},
{
"id": "13",
"name": "小红"
},
{
"id": "14",
"name": "小绿"
},
{
"id": "15",
"name": "小黄"
},
{
"id": "14",
"name": "张三"
},
{
"id": "15",
"name": "李四"
}
]
}
]
复制代码
简单的表格不过瘾?再撸一个有合并单元格的复杂表头表格吧,效果图以下:
这基本能覆盖大部分场景了,依然是纯手撸,不用其余框架,敬请期待~