介绍

根据 Tangram v1.0 中 出现的问题：UI组件无法动态更新 & 加载性能低，VirtualView的具体解决方案如下：

944365-1f16d3849319bbf4

  • 通过 XML 模板实现组件的动态性
  • 通过 虚拟化技术（本质 = Canvas）开发组件，提升了组件的渲染性能
  • 不足：Image控件目前不支持本地drawable资源。
  • 不足：控件背景无法设置本地drawable资源。

VirtualView 实现流程

操作示例

1. 创建 UI 组件

2. 创建界面模板

3. 客户端加载界面

944365-3b1a6482866c99ba

VirtualView 创建界面模板

操作示例

1. 模板 XML 布局

<?xml version="1.0" encoding="utf-8"?>
<VHLayout
        flag="flag_exposure|flag_clickable"
        orientation="H"
        layoutWidth="match_parent"
        layoutHeight="wrap_content">
    <NImage
            id="1"
            src="${logoUrl}"
            layoutMarginLeft="8"
            layoutMarginRight="8"
            layoutMarginTop="8"
            layoutMarginBottom="8"
            layoutWidth="32"
            layoutHeight="32"/>
    <NText
            id="2"
            text="${title}"
            layoutGravity="v_center"
            gravity="${style.text-align}"
            textSize="${style.font-size}"
            textColor="${style.color}"
            layoutWidth="match_parent"
            layoutHeight="wrap_content"/>
</VHLayout>

2. 模板 Json 数据

{
  "style": {
    "text-align": "h_center",
    "font-size": "20",
    "color": "#FF5000"
  },
  "title": "超高性 99.9% 的用户觉得很快",
  "logoUrl": "https://gw.alicdn.com/tfs/TB1yGIdkb_I8KJjy1XaXXbsxpXa-72-72.png"
}

3. 模板编译成二进制

使用专门的工具virtualview_tools将编写好的XML界面模板编译成二进制数据，编译后的文件的后缀名是.out

4. 引入可视化楼层中

{
    "type":"virtual",
    "styles":{
        "height":"auto",
        "backgroundColor":"#FFFFFF",
        "backgroundImage":"",
        "paddingLeft":"12",
        "paddingRight":"12"
    },
    "params":{
        "event":{
            "scope":0
        },
        "virtualName":"VVTest"
    }
}

5. 模板引入后界面

七巧板布局

框架提供一系列基本单元布局，通过快速拼装就能搭建出一个具备多种布局的页面。

优势

Tangram提供了流式布局、滚动布局，瀑布流布局，固定布局等数种布局样式，布局提供样式参数供调整，布局内部也可填充任意的视图(View)，使Native开发的页面具备一定的动态性，并提供极致的性能。

特点

  • Android iOS 双平台支持，iOS 版本参考开源库 Tangram-iOS。
  • 通过 json 创建页面视图，并提供了默认的解析器。
  • 可轻松实现页面视图的回收与复用。
  • 框架提供多种默认的布局方式。
  • 通过 json 数据或代码支持自定义布局样式。
  • 高性能，基于vlayout。
  • 支持扩展功能模块。

Json 布局实现

[
  {
    "type": "container-oneColumn", ---> 描述布局类型
    "style": { ---> 描述样式
      ...
    },
    "header": { ---> 描述header
    },
    "items": [ ---> 描述组件列表
      ...
   ],
   "footer": { ---> 描述footer
   }
 },
 ...
]

七巧板 API 导图

控件介绍

文档更新时间: 2021-05-13 10:13   作者：陈冕