阅读 349

Android | Tangram动态页面之路(六)数据分离

经过前五篇系列文章,对Tangramvlayout也有了初步认识,这篇文章开始将结合业务场景使用,探索框架能力能对业务带来的支持,因为调研本身是一个需要不断踩坑的过程,所以大纲也做了微调,后续会根据实际使用过程发现的问题和解决方案进行更新。

  1. 需求背景
  2. Tangram和vlayout介绍
  3. Tangram的使用
  4. vlayout原理
  5. Tangram原理
  6. json模板和数据分离
  7. 待定

本文将对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,首先想到的方法是,动态来合并数据,也就是按如下思路,

进行数据准备,

  1. 模板地址:net_shopping_home.json
  2. 聚合数据接口:tangram/shopping/home
  3. 瀑布流数据接口:玩安卓 - 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

本文使用 mdnice 排版