Android | Tangram动态页面之路(六)数据分离
时间:2022-07-23
本文章向大家介绍Android | Tangram动态页面之路(六)数据分离,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
经过前五篇系列文章,对Tangram和vlayout也有了初步认识,这篇文章开始将结合业务场景
使用,探索框架能力能对业务带来的支持,因为调研本身是一个需要不断踩坑的过程,所以大纲也做了微调,后续会根据实际使用过程发现的问题和解决方案进行更新。
- 需求背景
- Tangram和vlayout介绍
- Tangram的使用
- vlayout原理
- Tangram原理
- json模板和数据分离
- 待定
本文将对Tangram
的json模板和数据进行分离。
笔者Demo代码,内容见demo2
包。
数据分离
前面的文章提到过,在实际业务中不太可能把数据绑定在模板里,这样模板会很臃肿,我们要做的是,用模板描述页面结构和数据源
,而非数据本身,因此需要将数据剥离出来。
运行效果:
数据mock自玩安卓(看着有点乱,后续有时间搭个小服务,向业务贴近),
重点看页面结构即可,远程模板调整了Card
顺序、4列布局改成5列、改了文本颜色和瀑布流item背景色。
然后来看该页面实现ShoppingHomeAct
,
public class ShoppingHomeAct extends TangramActivity {
ActivityShoppingHomeBinding mBinding;
@Override
protected void onCreate(Bundle savedInstanceState) {
mBinding = DataBindingUtil.setContentView(this, R.layout.activity_shopping_home);
super.onCreate(savedInstanceState);
}
@Override
protected String createBizDomain() {
return "shopping_home";//返回业务域:商城首页
}
@Override
protected RecyclerView createRecyclerView() {
return mBinding.rvList;//返回RecyclerView
}
@Override
protected boolean needRefreshAndLoadMore() {
return true;//开启下拉刷新和加载更多
}
}
代码很少,只需继承具备Tangram
能力的TangramActivity
,返回其需要的对象即可。
动态合并数据
参考官方Demo,首先想到的方法是,动态来合并数据,也就是按如下思路,
进行数据准备,
- 模板地址:net_shopping_home.json
- 聚合数据接口:tangram/shopping/home
- 瀑布流数据接口:玩安卓 - article/list/0/json
模板如下(有删减),描述了页面结构和数据源,
{
//聚合数据接口,当然实际业务中不需要写完整路径,如tangram/shopping/home
"requestMakeup":"http://rest.apizza.net/mock/3f233eed2d9be716a5f48fccb9c719f2/tangram/shopping/home",
//瀑布流数据接口
"requestList":"https://www.wanandroid.com/article/list/%s/json",
//模板名字
"templateName":"net_shopping_home",
//页面结构template
"template":[
{
"type":"container-fiveColumn", //五列布局
"load":"makeup:category", //数据源是聚合接口的category字段
"itemType":"ImageTextView", //具体视图cell是上图下文ImageTextView
"style":{
"textColor":"#6699ff", //扩展字段,文本颜色
"padding":[
9,
9,
0,
9
]
}
},
{
"type":"container-waterfall", //瀑布流布局
"itemType":"GoodsItemView", //具体视图cell是商品样式GoodsItemView
"load":"xxx", //不用写,只要配置了requestList,默认最后一个Crad取瀑布流数据
"style":{
"column":2, //展示两列
"hGap":"4", //间隙
"vGap":"4",
"margin":[
9,
9,
0,
9
],
"itemBgColor":"#1F1F1F", //扩展字段,item背景颜色
"textColor":"#ffffff" //扩展字段,文本颜色
}
}
]
}
聚合数据如下(有删减),
{
"errorCode":0,
"errorMsg":"",
"data":{
"banner":[ //轮播图数据
{
"imgUrl":"https://wanandroid.com/blogimgs/942a5c62-ca87-4e7c-a93d-41ff59a15ba4.png",
"link":"https://www.wanandroid.com/navi"
},
{
"imgUrl":"https://www.wanandroid.com/blogimgs/62c1bd68-b5f3-4a3c-a649-7ca8c7dfabe6.png",
"link":"https://www.wanandroid.com/blog/show/2"
},
{
"imgUrl":"https://www.wanandroid.com/blogimgs/50c115c2-cf6c-4802-aa7b-a4334de444cd.png",
"link":"https://flutter.cn/"
}
],
"bottomTitle":[ //瀑布流标题数据
{
"title":"猜你喜欢"
}
]
}
}
一切准备就绪,开始实现TangramActivity
,关注主要实现即可。
把聚合数据合并进模板对象的template字段,
//TangramActivity.java
void mergeMakeupDataToTemplate(JSONObject data, JSONArray template) throws JSONException {
//遍历每一个卡片(布局),把数据填充进字段items
for (int i = 0; i < template.length(); i++) {
JSONObject card = template.getJSONObject(i);
//如果card有load字段,并且字段值是makeup:开头,表示card的数据源为聚合数据
if (card.has("load") && card.getString("load").startsWith("makeup:")) {
String load = card.getString("load");
JSONArray cells = data.getJSONArray(load.substring(load.indexOf(":") + 1));
//把模板配置的itemType即具体视图cell写进数据源
for (int cellIdx = 0; cellIdx < cells.length(); cellIdx++) {
cells.getJSONObject(cellIdx).put("type", card.getString("itemType"));
}
card.put("items", cells);
}
}
}
解析瀑布流数据,
//TangramActivity.java
void parseListData(List<ArticleBean.DataBean.Article> list, @NonNull Card card) {
JSONArray cells = new JSONArray();
try {
for (int i = 0; i < list.size(); i++) {
JSONObject obj = new JSONObject(MyApp.gson.toJson(list.get(i)));
obj.put("type", card.optStringParam("itemType"));
//由于使用了玩安卓的数据结构,这里手动添加一些参数用于演示
obj.put("imgUrl", DataUtil.getImgByIdx(i + mListDataPage * list.size()));
cells.put(obj);
}
} catch (JSONException e) {
e.printStackTrace();
}
List<BaseCell> cs = mEngine.parseComponent(cells);
card.addCells(cs);
card.notifyDataChange();
finishLoad();
}
完整代码可见TangramActivity.java。
待解决问题
- 局部刷新问题,暂时无解。之前有小伙伴提到过tangram不支持局部刷新,然后实践了一下,处理起来确实挺棘手,如加载瀑布流数据后,
card.notifyDataChange
的本质还是notifyDataSetChanged
。 - 优化成非继承
TangramActivity
实现。让业务Activity继承实现始终不够灵活,尝试包装一下核心引擎TangramEngine
。
- Spring Boot读取配置的几种方式
- 如何用TensorFlow构建RNN?这里有一份极简的教程
- (1024程序员节快乐)阿里祭出大器,Java代码检查插件
- Java多线程神器:join使用及原理
- SpringCloud配置中心内容加密
- Spring Boot日志集成
- MongoDB系列7:MongoDB存储引擎
- MongoDB系列6:MongoDB索引的介绍
- 文本数据处理的终极指南-[NLP入门]
- 神经网络思想建立LR模型(DL公开课第二周答案)
- 如何用卷积神经网络从歌曲中提取纯人声?这里有教程+代码
- 排序算法对比、总结(Python代码)
- 记一道未能答出的算法面试题
- 关于numpy mean函数的axis参数
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释