android listview数据动态加载_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;@Overrideprotected void onCreate(Bundle savedInstanceState) {mBinding = DataBindingUtil.setContentView(this, R.layout.activity_shopping_home);super.onCreate(savedInstanceState);}@Overrideprotected String createBizDomain() {return "shopping_home";//返回业务域：商城首页}@Overrideprotected RecyclerView createRecyclerView() {return mBinding.rvList;//返回RecyclerView}@Overrideprotected 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.javavoid mergeMakeupDataToTemplate(JSONObject data, JSONArray template) throws JSONException {//遍历每一个卡片（布局），把数据填充进字段itemsfor (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.javavoid 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。