Tangram与VirtualView初探

标签(空格分隔): 阿里 virtualview tangram


前言

在进入VirtualView之前,我们首先来了解下Tangram这个同样是阿里出品、用于快速实现组合布局的框架模型。

Tangram

移动端原生App最大的弱点就是不能像Web端那样即改即用,需要等下一个版本发布之后才能看到效果。所以衍生出来许许多多的动态化方案,如RN等;但在动态化与性能方面又不是那么完美。所以Tangram方案由此诞生。

背景:技术是用于满足需求业务的解决方案,现有的需求业务被其分为了三类:基础业务常规业务临时性业务

业务类型 定义 功能例子 性能要求 现有解决方案
基础业务 产品最基础的功能需求 注册、登陆 需求稳定,对稳定性及性能要求最高 原生Native
常规业务 产品较为常规的功能需求 首页 需求变化少,对稳定性及性能要求较高 RN
临时性业务 产品临时性的功能需求 活动页 需求变化大,对稳定性及性能要求低 WebView+HTML

对于临时性业务,使用WebView+HTML开发已然足够,随着WebView性能的提升和Mobile开发框架与开发技能日趋成熟,现阶段HTML体现出的劣势终将荡然无存。
对于基础业务,其稳定性及性能要求非常高,而需求变化少,所以采用原生开发是最好的选择。

Tangram是主要针对的是常规业务(对动态化有着要求,也对性能有要求)的解决方案。其基本理念是粗粒度组件化+灵活布局容器,关注的重点是面向业务,多终端一致性和高性能

Tangram优点:高性能(页面渲染效率&组件回收复用,跨父节点组件的高效回收与复用);面向业务(组件业务化,动态化,通过布局+组件的形式搭建整个页面,而不是从基本的UI元素搭建页面);扩展性好(自定义组件可以注入);多终端一致性(一个json描述的布局可以同时在iOS端与Android端使用,且表现一致)。

组件->卡片->页面

集成过程:

  • 初始化Tangram
//全局只需要初始化一次,提供一个通用的图片加载器(如Picasso)以及一个应用内通用的ImageView类型
TangramBuilder.init(context, new IInnerImageSetter() {
    @Override
    public <IMAGE extends ImageView> void doLoadImageUrl(IMAGE view, String url) {
        //假设你使用 Picasso 加载图片
        Picasso.with(context).load(url).into(view);
    }
}, ImageView.class);
  • 注册自定义卡片与组件
//TangramBuilder中已经预先注册了许多组件及卡片,可直接使用;此处只需要注册自定义的组件及卡片即可
builder = TangramBuilder.newInnerBuilder(this);
builder.registerCell("自定义名字1", 自定义组件1.class);
builder.registerCell("自定义名字2", 自定义组件2.class);
builder.registerCard("自定义名字3", 自定义卡片3.class);
builder.registerCell(数字, 自定义组件4.class);
builder.registerVirtualView("VirtualView名字");//Tangram对VirtualView的支持
  • 生成TangramEngine实例
engine = builder.build();
engine.setVirtualViewTemplate(VirtualView模版编绎后的字节码);
  • 绑定业务support类到engine
engine.addSimpleClickSupport(new XXClickSupport()); //添加点击事件支持
engine.addCardLoadSupport(new XXCardLoadSupport()); //添加加载更多支持
engine.addExposureSupport(new XXExposureSuport());  //添加曝光事件支持
  • 绑定recyclerView,监听Scroll事件
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        engine.onScrolled();
    }
});
  • 加载数据并传递给engine
String jsonString = getJsonStringFromFile(jsonFilePath);
JSONArray data = null;
try {
    data = new JSONArray(jsonString);
    engine.setData(data);
} catch (JSONException e) {
    e.printStackTrace();
}

一个Json数据示例:

[
  {
    "type": "container-scroll",  //预定义卡片类型-类似ScrollView
    "style": {  //该卡片的一些样式及属性
      "pageWidth": 200,
      "pageHeight": 100,
      "indicatorMargin": "5",
      "infinite": "true"
    },
    "items": [  //该卡片内的一些组件
      {
        "type": 1, // 第一个组件的类型,必须是已经注册过的;未被注册过的将会被忽略
        "msg": "info1", // 该对应组件的相关数据等
        "style": {}
      },
      {
        "type": 1,
        "msg": "info2",
        "style": {}
      }
    ]
  },
  {
    "type": "10",  // 第二个卡片的类型
    "style": {
      "indicatorMargin": "5",
      "infinite": "true"
    },
    "items": [
      {
        "type": 1,
        "msg": "info1",
        "style": {}
      },
      {
        "type": 1,
        "msg": "info2",
        "style": {}
      }
    ]
  }
]

VirtualView

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

VirtualView简介
VirtualView简介

VirtualView的特点:


VirtualView特点
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文件所描术的组件,从而实现了动态新增组件类型的功能。

参考文献:
参考地址:http://blog.csdn.net/carson_ho/article/details/79358486
Tangram:http://blog.csdn.net/carson_ho/article/details/72123380
VirtualView:http://pingguohe.net/2018/01/09/a-taste-of-virtualview-android.html
http://tangram.pingguohe.net/docs/basic-concept/history

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容