经过前五篇系列文章,对Tangram和vlayout也有了初步认识,这篇文章开始将结合业务场景
使用,探索框架能力能对业务带来的支持,因为调研本身是一个需要不断踩坑的过程,所以大纲也做了微调,后续会根据实际使用过程发现的问题和解决方案进行更新。
- 需求背景
- Tangram和vlayout介绍
- Tangram的使用
- vlayout原理
- Tangram原理
- json模板和数据分离
- 待定
本文将对Tangram
的json模板和数据进行分离。
笔者Demo代码,内容见demo2
包。
数据分离
前面的文章提到过,在实际业务中不太可能把数据绑定在模板里,这样模板会很臃肿,我们要做的是,用模板描述页面结构和数据源
,而非数据本身,因此需要将数据剥离出来。
运行效果:
数据mock自玩安卓(看着有点乱,后续有时间搭个小服务,向业务贴近),
重点看页面结构即可,远程模板调整了Card
顺序、4列布局改成5列、改了文本颜色和瀑布流item背景色。
然后来看该页面实现ShoppingHomeAct
,
1 | public class ShoppingHomeAct extends TangramActivity { |
代码很少,只需继承具备Tangram
能力的TangramActivity
,返回其需要的对象即可。
动态合并数据
参考官方Demo,首先想到的方法是,动态来合并数据,也就是按如下思路,
进行数据准备,
- 模板地址:net_shopping_home.json
- 聚合数据接口:tangram/shopping/home
- 瀑布流数据接口:玩安卓 - article/list/0/json
模板如下(有删减),描述了页面结构和数据源,
1 | { |
聚合数据如下(有删减),
1 | { |
一切准备就绪,开始实现TangramActivity
,关注主要实现即可。
把聚合数据合并进模板对象的template字段,
1 | //TangramActivity.java |
解析瀑布流数据,
1 | //TangramActivity.java |
完整代码可见TangramActivity.java。
待解决问题
- 局部刷新问题,暂时无解。之前有小伙伴提到过tangram不支持局部刷新,然后实践了一下,处理起来确实挺棘手,如加载瀑布流数据后,
card.notifyDataChange
的本质还是notifyDataSetChanged
。 - 优化成非继承
TangramActivity
实现。让业务Activity继承实现始终不够灵活,尝试包装一下核心引擎TangramEngine
。