Tangram与VirtualView

VirtualView

Tangram中已经实现了页面布局的动态化,我们可以通过配置json文件自由的布局;但还有一个局限性,json中使用的卡片或者组件的type,必须是注册OK的(也就是在客户端已经实现好的)才能使用;如果想要在原来的版本中新增一个type类型的组件,这是没有办法做到的,还是只能通过升级客户端来实现。
于是,VirtualView出现了。

基布局描术文件是一个xml文件,并附带一个json数据文件:
描述布局文件示例:(其中的相关数据来源都可以从数据json文件中使用表达式获取)

 <RatioLayout
orientation="H"
layoutWidth="match_parent"
layoutHeight="wrap_content"
background="#f8f8f8">
<VHLayout
layoutRatio="1"
orientation="V"
layoutWidth="0"
layoutHeight="match_parent"
background="#f8f8f8">
<VImage
layoutWidth="match_parent"
layoutHeight="120.5"
scaleType="fit_xy"
src="${picture_2}"/>
<VLine
layoutWidth="match_parent"
layoutHeight="0.5"
paintWidth="0.5"
orientation="H"
color="#e8ecef" />
<VImage
layoutWidth="match_parent"
layoutHeight="60"
scaleType="fit_xy"
src="${picture_5}"/>
</VHLayout>
<VLine
layoutWidth="0.5"
layoutHeight="match_parent"
paintWidth="0.5"
orientation="V"
color="#e8ecef" />
<VHLayout
layoutRatio="1"
orientation="V"
layoutWidth="0"
layoutHeight="match_parent"
background="#f8f8f8">
<VImage
layoutWidth="match_parent"
layoutHeight="60"
scaleType="fit_xy"
src="${picture_3}"/>
<VLine
layoutWidth="match_parent"
layoutHeight="0.5"
paintWidth="0.5"
orientation="H"
color="#e8ecef" />
<VImage
layoutWidth="match_parent"
layoutHeight="60"
scaleType="fit_xy"
src="${picture_4}"/>
<VLine
layoutWidth="match_parent"
layoutHeight="0.5"
paintWidth="0.5"
orientation="H"
color="#e8ecef" />
<VImage
layoutWidth="match_parent"
layoutHeight="60"
scaleType="fit_xy"
src="${picture_6}"/>
</VHLayout>
</RatioLayout>

数据json文件示例:

{
"picture_2": "http://xxxx/images/59afb155c769f.png",
"picture_3": "http://xxxx/images/59afb303042ca.png",
"picture_4": "http://xxxx/images/59afb303042cb.png",
"picture_5": "http://xxxx/images/59afb36cf1eb8.png",
"picture_6": "http://xxxx/images/59afb303042cd.png"
}

xml文件需要经过编绎生成目标文件才可加载使用,如果用于项目中一般下发的都是经过编绎后的文件,也可以在客户端实时编绎。

一个xml就是一个组件,Tangram通过加载这个xml文件即可使用该xml文件所描术的组件,从而实现了动态新增组件类型的功能。

坚持原创技术分享,您的支持将鼓励我继续创作!