After the first five series of articles, I have had a preliminary understanding of Tangram and Vlayout. This article will combine the application of the framework with business scenarios to explore the support that the framework can bring to the business. Because the research itself is a process that needs to step on the pit constantly, so the outline has been fine-tuned. Problems and solutions found during actual use will be updated later.

  1. Demand background
  2. Tangram and Vlayout are introduced
  3. The use of the Tangram
  4. Vlayout principle
  5. Tangram principle
  6. Json template and data separation
  7. To be determined

This article will separate Tangram’s JSON template from the data.

Author Demo code, content see demo2 package.

Data separation

As mentioned in the previous article, it is not possible to bind data to templates in real business, which would make templates bloated. Instead, we use templates to describe the page structure and data source, not the data itself, so we need to strip the data out.

Operation effect:


Data mock from Android (looks a bit messy, later there will be time to build a small service, close to business),


Focusing on the page structure, the remote template adjusted the Card order, changed the layout from 4 columns to 5 columns, and changed the text color and waterfall stream Item background color.

And then look at that page and implement 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(a) {  return "shopping_home";// Return to business domain: mall home page  }   @Override  protected RecyclerView createRecyclerView(a) {  return mBinding.rvList;/ / return RecyclerView  }   @Override  protected boolean needRefreshAndLoadMore(a) {  return true;// Enable the drop-down refresh and load more  } } Copy the code

With very little code, you simply inherit the Tangram-capable TangramActivity and return the objects it needs.

Dynamically merge data

Referring to the official Demo, the first method that comes to mind is to merge data dynamically, which is the following idea,


Data preparation,

  1. Template address: net_shopping_home.json
  2. Aggregated data interface: tangram/shopping/home
  3. Waterfall data interface: Play Android-article /list/0/json

The template below (deleted) describes the page structure and data source,

{
// Aggregate data interface, of course, the actual business does not need to write the full path, such as tangram/shopping/home    "requestMakeup":"http://rest.apizza.net/mock/3f233eed2d9be716a5f48fccb9c719f2/tangram/shopping/home".// Waterfall data interface    "requestList":"https://www.wanandroid.com/article/list/%s/json".// The template name "templateName":"net_shopping_home".// The page structure template "template": [ {  "type":"container-fiveColumn"// Five column layout "load":"makeup:category"// The data source is the category field of the aggregation interface "itemType":"ImageTextView"// The specific view cell is ImageTextView "style": { "textColor":"#6699ff", // Extend field, text color "padding": [ 9. 9. 0. 9  ]  }  },  {  "type":"container-waterfall"// Waterfall flow layout "itemType":"GoodsItemView"// The specific view cell is GoodsItemView "load":"xxx"// No need to write, as long as the requestList is configured, by default, the last Crad takes the waterfall stream data "style": { "column":2// Display two columns "hGap":"4", / / clearance "vGap":"4". "margin": [ 9. 9. 0. 9 ]. "itemBgColor":"#1F1F1F"// Extend field, item background color "textColor":"#ffffff"// Extend field, text color }  }  ] } Copy the code

The aggregated data are as follows (deleted),

{
    "errorCode":0.    "errorMsg":"".    "data": {        "banner":[// round-robin graph data {  "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":[// Waterfall stream header data {  "title":"Guess you like it."  }  ]  } } Copy the code

With everything in place, start implementing TangramActivity, focusing on the main implementation.

Merge the aggregate data into the Template field of the template object,

//TangramActivity.java
void mergeMakeupDataToTemplate(JSONObject data, JSONArray template) throws JSONException {
    // Iterate over each card (layout) and populate the data with the field items
    for (int i = 0; i < template.length(); i++) {
        JSONObject card = template.getJSONObject(i);
 // If there is a load field in card, and the field value is MAKEUP:, it means that the data source of card is aggregation data  if (card.has("load") && card.getString("load").startsWith("makeup:")) {  String load = card.getString("load");  JSONArray cells = data.getJSONArray(load.substring(load.indexOf(":") + 1));  // Write the itemType of the template configuration to the data source  for (int cellIdx = 0; cellIdx < cells.length(); cellIdx++) {  cells.getJSONObject(cellIdx).put("type", card.getString("itemType"));  }  card.put("items", cells);  }  } } Copy the code

Parsing the waterfall stream data,

//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"));  // Since we are using the android data structure, here we add some parameters manually for demonstration purposes  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(); } Copy the code

The complete code is visible in tangramactivity.java.

Problem to be solved

  • Partial refresh problem, no solution for now. Tangram does not support partial refreshes, but it can be tricky to handle. For example, after loading waterfall stream data,card.notifyDataChangeIs the essence ofnotifyDataSetChanged.
  • Optimize to non-inheritanceTangramActivityThe implementation. Having a business Activity inheritance implementation is never flexible enough; try wrapping the core engineTangramEngine.


This article is formatted using MDNICE