標(biāo)簽（空格分隔）： 阿里 virtualview tangram
前言
在進(jìn)入VirtualView之前茂卦，我們首先來了解下Tangram這個(gè)同樣是阿里出品男杈、用于快速實(shí)現(xiàn)組合布局的框架模型悯蝉。
Tangram
移動(dòng)端原生App最大的弱點(diǎn)就是不能像Web端那樣即改即用寒亥，需要等下一個(gè)版本發(fā)布之后才能看到效果仅颇。所以衍生出來許許多多的動(dòng)態(tài)化方案受神，如RN等剖膳；但在動(dòng)態(tài)化與性能方面又不是那么完美魏颓。所以Tangram方案由此誕生。
背景：技術(shù)是用于滿足需求業(yè)務(wù)的解決方案吱晒，現(xiàn)有的需求業(yè)務(wù)被其分為了三類：基礎(chǔ)業(yè)務(wù)甸饱、常規(guī)業(yè)務(wù)與臨時(shí)性業(yè)務(wù)
| 業(yè)務(wù)類型 | 定義 | 功能例子 | 性能要求 | 現(xiàn)有解決方案 |
|---|---|---|---|---|
| 基礎(chǔ)業(yè)務(wù) | 產(chǎn)品最基礎(chǔ)的功能需求 | 注冊(cè)、登陸 | 需求穩(wěn)定，對(duì)穩(wěn)定性及性能要求最高 | 原生Native |
| 常規(guī)業(yè)務(wù) | 產(chǎn)品較為常規(guī)的功能需求 | 首頁 | 需求變化少叹话，對(duì)穩(wěn)定性及性能要求較高 | RN |
| 臨時(shí)性業(yè)務(wù) | 產(chǎn)品臨時(shí)性的功能需求 | 活動(dòng)頁 | 需求變化大偷遗，對(duì)穩(wěn)定性及性能要求低 | WebView+HTML |
對(duì)于臨時(shí)性業(yè)務(wù)，使用WebView+HTML開發(fā)已然足夠驼壶，隨著WebView性能的提升和Mobile開發(fā)框架與開發(fā)技能日趨成熟氏豌，現(xiàn)階段HTML體現(xiàn)出的劣勢(shì)終將蕩然無存。
對(duì)于基礎(chǔ)業(yè)務(wù)热凹，其穩(wěn)定性及性能要求非常高泵喘，而需求變化少，所以采用原生開發(fā)是最好的選擇般妙。
Tangram是主要針對(duì)的是常規(guī)業(yè)務(wù)(對(duì)動(dòng)態(tài)化有著要求纪铺，也對(duì)性能有要求)的解決方案。其基本理念是粗粒度組件化+靈活布局容器碟渺，關(guān)注的重點(diǎn)是面向業(yè)務(wù)霹陡，多終端一致性和高性能。
Tangram優(yōu)點(diǎn)：高性能（頁面渲染效率&組件回收復(fù)用止状，跨父節(jié)點(diǎn)組件的高效回收與復(fù)用）；面向業(yè)務(wù)（組件業(yè)務(wù)化攒霹，動(dòng)態(tài)化怯疤，通過布局+組件的形式搭建整個(gè)頁面，而不是從基本的UI元素搭建頁面）催束；擴(kuò)展性好（自定義組件可以注入）集峦；多終端一致性（一個(gè)json描述的布局可以同時(shí)在iOS端與Android端使用，且表現(xiàn)一致）抠刺。
組件->卡片->頁面
集成過程：
- 初始化Tangram
//全局只需要初始化一次塔淤，提供一個(gè)通用的圖片加載器（如Picasso）以及一個(gè)應(yīng)用內(nèi)通用的ImageView類型
TangramBuilder.init(context, new IInnerImageSetter() {
@Override
public <IMAGE extends ImageView> void doLoadImageUrl(IMAGE view, String url) {
//假設(shè)你使用 Picasso 加載圖片
Picasso.with(context).load(url).into(view);
}
}, ImageView.class);
- 注冊(cè)自定義卡片與組件
//TangramBuilder中已經(jīng)預(yù)先注冊(cè)了許多組件及卡片，可直接使用速妖；此處只需要注冊(cè)自定義的組件及卡片即可
builder = TangramBuilder.newInnerBuilder(this);
builder.registerCell("自定義名字1", 自定義組件1.class);
builder.registerCell("自定義名字2", 自定義組件2.class);
builder.registerCard("自定義名字3", 自定義卡片3.class);
builder.registerCell(數(shù)字, 自定義組件4.class);
builder.registerVirtualView("VirtualView名字");//Tangram對(duì)VirtualView的支持
- 生成TangramEngine實(shí)例
engine = builder.build();
engine.setVirtualViewTemplate(VirtualView模版編繹后的字節(jié)碼);
- 綁定業(yè)務(wù)support類到engine
engine.addSimpleClickSupport(new XXClickSupport()); //添加點(diǎn)擊事件支持
engine.addCardLoadSupport(new XXCardLoadSupport()); //添加加載更多支持
engine.addExposureSupport(new XXExposureSuport()); //添加曝光事件支持
- 綁定recyclerView高蜂，監(jiān)聽Scroll事件
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
engine.onScrolled();
}
});
- 加載數(shù)據(jù)并傳遞給engine
String jsonString = getJsonStringFromFile(jsonFilePath);
JSONArray data = null;
try {
data = new JSONArray(jsonString);
engine.setData(data);
} catch (JSONException e) {
e.printStackTrace();
}
一個(gè)Json數(shù)據(jù)示例：
[
{
"type": "container-scroll", //預(yù)定義卡片類型-類似ScrollView
"style": { //該卡片的一些樣式及屬性
"pageWidth": 200,
"pageHeight": 100,
"indicatorMargin": "5",
"infinite": "true"
},
"items": [ //該卡片內(nèi)的一些組件
{
"type": 1, // 第一個(gè)組件的類型，必須是已經(jīng)注冊(cè)過的罕容；未被注冊(cè)過的將會(huì)被忽略
"msg": "info1", // 該對(duì)應(yīng)組件的相關(guān)數(shù)據(jù)等
"style": {}
},
{
"type": 1,
"msg": "info2",
"style": {}
}
]
},
{
"type": "10", // 第二個(gè)卡片的類型
"style": {
"indicatorMargin": "5",
"infinite": "true"
},
"items": [
{
"type": 1,
"msg": "info1",
"style": {}
},
{
"type": 1,
"msg": "info2",
"style": {}
}
]
}
]
VirtualView
Tangram中已經(jīng)實(shí)現(xiàn)了頁面布局的動(dòng)態(tài)化备恤，我們可以通過配置json文件自由的布局；但還有一個(gè)局限性锦秒，json中使用的卡片或者組件的type露泊，必須是注冊(cè)O(shè)K的（也就是在客戶端已經(jīng)實(shí)現(xiàn)好的）才能使用；如果想要在原來的版本中新增一個(gè)type類型的組件旅择，這是沒有辦法做到的惭笑，還是只能通過升級(jí)客戶端來實(shí)現(xiàn)。
于是，VirtualView出現(xiàn)了沉噩。
VirtualView的特點(diǎn)：
基布局描術(shù)文件是一個(gè)xml文件捺宗，并附帶一個(gè)json數(shù)據(jù)文件:
描述布局文件示例：（其中的相關(guān)數(shù)據(jù)來源都可以從數(shù)據(jù)json文件中使用表達(dá)式獲取）
<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>
數(shù)據(jù)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文件需要經(jīng)過編繹生成目標(biāo)文件才可加載使用屁擅，如果用于項(xiàng)目中一般下發(fā)的都是經(jīng)過編繹后的文件偿凭，也可以在客戶端實(shí)時(shí)編繹。
一個(gè)xml就是一個(gè)組件派歌，Tangram通過加載這個(gè)xml文件即可使用該xml文件所描術(shù)的組件弯囊，從而實(shí)現(xiàn)了動(dòng)態(tài)新增組件類型的功能。
參考文獻(xiàn)：
參考地址：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
