Tangram-Android 使用教程：从零开始构建灵活高效的UI界面
前言
Tangram-Android 是一个功能强大的Android UI开发框架，它通过灵活的组件化设计，帮助开发者快速构建复杂多变的页面布局。本文将详细介绍如何从零开始使用Tangram-Android框架，包括环境配置、初始化流程、自定义组件注册以及数据绑定等核心功能。
环境准备
添加依赖
首先需要在项目中添加Tangram-Android的依赖。Tangram最新版本已经集成了RxJava，因此需要同时添加RxJava和RxAndroid的依赖。
Gradle方式：
implementation 'com.alibaba.android:tangram:2.0.5@aar'
implementation 'io.reactivex.rxjava2:rxjava:2.1.12'
implementation 'io.reactivex.rxjava2:rxandroid:2.0.2'
Maven方式：
<dependency>
<groupId>com.alibaba.android</groupId>
<artifactId>tangram</artifactId>
<version>2.0.5</version>
<type>aar</type>
</dependency>
<dependency>
<groupId>io.reactivex.rxjava2</groupId>
<artifactId>rxjava</artifactId>
<version>2.1.12</version>
</dependency>
<dependency>
<groupId>io.reactivex.rxjava2</groupId>
<artifactId>rxandroid</artifactId>
<version>2.0.2</version>
</dependency>
初始化Tangram框架
全局初始化
在Application中或首次使用前，需要对Tangram进行全局初始化。初始化时需要提供一个通用的图片加载器实现，以及自定义的ImageView类（如果应用中有自定义的ImageView）。
TangramBuilder.init(context, new IInnerImageSetter() {
@Override
public <IMAGE extends ImageView> void doLoadImageUrl(@NonNull IMAGE view,
@Nullable String url) {
// 这里以Picasso为例展示图片加载实现
Picasso.with(context).load(url).into(view);
}
}, ImageView.class);
构建TangramBuilder
在Activity的onCreate()方法中，需要创建TangramBuilder实例：
TangramBuilder.InnerBuilder builder = TangramBuilder.newInnerBuilder(TangramActivity.this);
创建builder对象后，框架会自动注册默认支持的卡片和单元格类型，并创建一个默认的IAdapterBuilder用于生成RecyclerView所需的Adapter。
注册自定义组件
Tangram框架提供了默认的卡片类型，但单元格通常需要开发者自定义。注册自定义单元格有三种方式：
1. 简单注册方式
builder.registerCell(1, TestView.class);
这种方式将类型为1的单元格绑定到TestView类，使用框架提供的BaseCell作为数据模型。
2. 自定义模型类注册方式
builder.registerCell(1, TestCell.class, TestView.class);
这种方式不仅指定了视图类，还指定了自定义的数据模型类TestCell，该类必须继承自BaseCell。
3. 完整注册方式
builder.registerCell(1, TestCell.class,
new ViewHolderCreator<>(R.layout.item_holder, TestViewHolder.class, TestView.class));
这种方式提供了最大的灵活性，可以自定义布局文件、ViewHolder和视图类。
创建TangramEngine实例
完成组件注册后，可以构建TangramEngine实例：
TangramEngine engine = builder.build();
注册支持模块
Tangram提供了一些内置的支持模块来增强功能：
engine.register(SimpleClickSupport.class, new XXClickSupport());
engine.register(CardLoadSupport.class, new XXCardLoadSupport());
engine.register(ExposureSupport.class, new XXExposureSuport());
这些模块分别处理点击事件、卡片异步加载和曝光统计等功能。
绑定RecyclerView
将TangramEngine与RecyclerView绑定：
setContentView(R.layout.main_activity);
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.main_view);
engine.bindView(recyclerView);
处理滚动事件
为了支持预加载等功能，需要监听RecyclerView的滚动事件：
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
engine.onScrolled();
}
});
可选配置
设置浮动视图偏移
如果有顶部或底部固定栏，需要设置偏移量防止浮动视图重叠：
engine.getLayoutManager().setFixOffset(0, 40, 0, 0);
设置预加载数量
调整预加载的卡片数量（默认为5）：
engine.setPreLoadNumber(3);
加载并绑定数据
最后，将业务数据绑定到引擎。通常数据来自网络请求，这里演示从本地asset读取：
String json = new String(getAssertsFile(this, "data.json"));
JSONArray data = null;
try {
data = new JSONArray(json);
engine.setData(data);
} catch (JSONException e) {
e.printStackTrace();
}
总结
通过以上步骤，我们已经完成了Tangram-Android框架的完整集成流程。Tangram的强大之处在于其灵活的组件化设计，开发者可以通过组合不同的卡片和单元格类型，快速构建出复杂多变的页面布局，同时保持代码的清晰和可维护性。在实际项目中，可以根据业务需求进一步扩展自定义组件和支持模块，充分发挥Tangram的潜力。
