Tangram + Virtualview Android 初体验
Tangra
前言
Tangram：阿里开源的一套动态化构建 Native 页面的框架，相较于一些H5的动态实现，它拥有天生亲和系统交互的优势。
Virtualview：同样是阿里开源的一套组件动态化方案，可以通过自定义XML方式引用这些组件来搭建UI视图。
当Tangram遇上Virtualview后，我们就可以在不重新打包的情况下，很好的实现页面的动态修改，同时页面的交互也能拥有更好的原生体验。接下来我们通过一个简单的demo来了解下它们的使用。
Git
TangramDemo：https://gitee.com/zhengdd/TangramDemo
开发使用
一、Tangram项目创建
首先我们需要创建一个TangramDemo项目，然后在module的build中做如下引用，这些都是在tangram使用时需要的一些框架。
compile 'com.alibaba.android:tangram:2.0.5@aar'
compile 'io.reactivex.rxjava2:rxjava:2.1.12'
compile 'io.reactivex.rxjava2:rxandroid:2.0.2'
compile('com.alibaba.android:virtualview:1.3.8@aar') {
transitive true
}
compile('com.alibaba.android:vlayout:1.2.18@aar') {
changing = true
}
compile ('com.alibaba.android:ultraviewpager:1.0.7.7@aar') {
transitive = true
}然后我们需要在Application的onCreate()方法中进行初始化，其中图片加载，可以根据使用的框架不同进行修改，我这边使用的是Glide。
TangramBuilder.init(context, new IInnerImageSetter() { @Override
public <IMAGE extends ImageView> void doLoadImageUrl(@NonNull IMAGE view, @Nullable String url) {
Glide.with(getApplicationContext()).load(url).into(view);
}
}, ImageView.class);二、Tangram在Activity中的使用
因为Tangram是通过RecyclerView进行动态化布局实现的，所以我们在创建activity页面布局时在需要动态化是实现的区域使用RecyclerView控件即可
然后我们需要在activity中初始化TangramBuilder并与RecyclerView想绑定。
private RecyclerView mRecyContext; private TangramEngine engine; private TangramBuilder.InnerBuilder builder;
builder = TangramBuilder.newInnerBuilder(context);
engine = builder.build(); //绑定view
engine.bindView(mRecyContext); //关联滑动监听
mRecyContext.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy);
engine.onScrolled();
}
});同时我们可以通过注册一些辅助业务到engine中帮助我们的进行一些逻辑处理，如点击事件，数据加载等一些处理逻辑。
engine.register(SimpleClickSupport.class, new SimpleClickSupport() { @Override
public void setOptimizedMode(boolean optimizedMode) { super.setOptimizedMode(optimizedMode);
} @Override
public void onClick(View targetView, BaseCell cell, int eventType) { super.onClick(targetView, cell, eventType);
} @Override
public void onClick(View targetView, Cell cell, int eventType) { super.onClick(targetView, cell, eventType);
} @Override
public void onClick(View targetView, BaseCell cell, int eventType, Map<String, Object> params) { super.onClick(targetView, cell, eventType, params);
} @Override
public void defaultClick(View targetView, BaseCell cell, int eventType) { super.defaultClick(targetView, cell, eventType);
}
});
engine.register(CardLoadSupport.class, new CardLoadSupport());
engine.register(ExposureSupport.class, new ExposureSupport() { @Override
public void onExposure(@NonNull Card card, int offset, int position) {
}
});当然，因为我们结合Virtualview使用，也需要注册一些Virtualview相关的一些逻辑服务。
private void initVirtual() {
VafContext vafContext = engine.getService(VafContext.class); //图片加载我们可以更加框架自定义Target实现
vafContext.setImageLoaderAdapter(new IImageLoaderAdapter() { @Override
public void bindImage(String uri, final ImageBase imageBase, int reqWidth, int reqHeight) {
GlideVVSimpleTarget target = new GlideVVSimpleTarget(imageBase);
target.setSize(reqWidth, reqHeight);
BitmapTypeRequest bitmapTypeRequest = Glide.with(getApplicationContext())
.load(uri).asBitmap(); if (imageBase.getTag() != null) {
bitmapTypeRequest.transform(new CircleTransform(context)).into(target);
} else {
bitmapTypeRequest.into(target);
}
} @Override
public void getBitmap(String uri, int reqWidth, int reqHeight, final Listener lis) {
GlideVVSimpleTarget target = new GlideVVSimpleTarget(lis);
target.setSize(reqWidth, reqHeight);
Glide.with(getApplicationContext())
.load(uri).asBitmap().into(target);
}
});//注册单击事件的逻辑实现
vafContext.getEventManager().register(EventManager.TYPE_Click, new IEventProcessor() { @Override
public boolean process(EventData data) { //我们可以通过定义数据设置的值不同做不同处理
String action = data.mVB.getAction(); return true;
}
});
vafContext.getEventManager().register(EventManager.TYPE_Exposure, new IEventProcessor() { @Override
public boolean process(EventData data) { //handle here
return true;
}
});
vafContext.getEventManager().register(EventManager.TYPE_LongCLick, new IEventProcessor() { @Override
public boolean process(EventData data) { return true;
}
});
}三、数据加载绑定
最后我们就可以通过网络请求获取data.json数据后进行注册virtualview和绑定数据动态展现页面了。其中数据可以通过virtualview_tools进行编译生成，这个在后面会讲，生成后的数据格式为json格式，主要包含templates和data两个字段的数据。
其中templates为Virtualview自定义xml通过编译后获取的字符串，为数组类型，创建了几个xml则templates数据个数就为几个。
data则为展示数据的结构与内容。
结构如下：
{ "templates": [], "data": { "jsondata": [
{ "items": [
], "style": {
}, "type": "container-oneColumn"
}
]
}
}activity中数据绑定如下：
PreviewData data = (PreviewData) msg.getData().get("data"); for (int i = 0; i < data.templates.size(); i++) { String vvname = name + i; //注册布局名称，与xml文件名相同
builder.registerVirtualView(vvname); //设置ui布局数据
engine.setVirtualViewTemplate(JSONutils.getBase64(data.templates.get(i)));
}
com.google.gson.JsonArray jsonArray = data.data.getAsJsonArray("jsondata"); String json = jsonArray.toString();
JSONArray jsdata = null; try {
jsdata = new JSONArray(json); //绑定动态页面结构数据并显示
engine.setData(jsdata);
engine.refresh();
} catch (JSONException e) {
e.printStackTrace();
}
作者：午潮山下人
链接：https://www.jianshu.com/p/428ffc2c234e
随时随地看视频
