Tangram Android

Tangram is a framework for dynamically building Native pages. It allows developers to create page views using JSON data and provides mechanisms for view recycling and reuse. The Android SDK is built upon vlayout and UltraViewPager to ensure high performance.

Warning: This project is no longer maintained.

Important Usage Note: Do not use classes under the tangram3 package for production apps. Tangram 3.0 is under active development and its interfaces change frequently. Stick to the original tangram packages for stability.

Tangram's architecture is based on two primary concepts:

• Card (卡片): A collection of components within the same block, responsible for the layout of those components.
• Component (组件): The smallest unit of business logic, analogous to an item in a RecyclerView.

To enable Tangram functionality, bind the engine to your RecyclerView and ensure you call engine.onScrolled() within the RecyclerView.OnScrollListener to trigger asynchronous data preloading.

// Bind to view
engine.bindView(recyclerView);

// Listen to scroll to trigger preloading
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
	@Override
	public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
		super.onScrolled(recyclerView, dx, dy);
		engine.onScrolled();
	}
});

In your Activity, create a TangramBuilder.InnerBuilder instance. This builder comes pre-registered with all supported components, cards, and a default IAdapterBuilder for RecyclerView binding.

TangramBuilder.InnerBuilder builder = TangramBuilder.newInnerBuilder(TangramActivity.this);

Create a TangramBuilder.InnerBuilder instance within your Activity's onCreate() method. This initializes default cards, cells, and the default IAdapterBuilder for the RecyclerView adapter.

TangramBuilder.InnerBuilder builder = TangramBuilder.newInnerBuilder(TangramActivity.this);

To integrate Tangram with a RecyclerView, bind the view using engine.bindView(recyclerView). You must also listen to scroll events and call engine.onScrolled() to trigger asynchronous data preloading for cards outside the visible screen.

// Bind the view
engine.bindView(recyclerView);

// Listen to scroll events
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
	@Override
	public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
		super.onScrolled(recyclerView, dx, dy);
		// Trigger engine's onScrolled to preload data
		engine.onScrolled();
	}
});

To use Tangram, add the library and its required RxJava dependencies to your project. Note that Tangram requires rxjava and rxandroid to be explicitly included.

// gradle
compile 'com.alibaba.android:tangram:2.0.5@aar'

// Tangram requires rxjava dependencies
compile 'io.reactivex.rxjava2:rxjava:2.1.12'
compile '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>
  <type>aar</type>
</dependency>
<dependency>
  <groupId>io.reactivex.rxjava2</groupId>
  <artifactId>rxandroid</artifactId>
  <version>2.0.2</version>
  <type>aar</type>
</dependency>

Add the Tangram AAR and its required RxJava dependencies to your project. Note that Tangram requires rxjava and rxandroid to function.

// gradle
compile 'com.alibaba.android:tangram:2.0.5@aar'

// we added rxjava in latest version, so need compile rxjava
compile 'io.reactivex.rxjava2:rxjava:2.1.12'
compile '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>
  <type>aar</type>
</dependency>
<dependency>
  <groupId>io.reactivex.rxjava2</groupId>
  <artifactId>rxandroid</artifactId>
  <version>2.0.2</version>
  <type>aar</type>
</dependency>

Use TangramBuilder.init to set up the global configuration. You must provide an implementation of IInnerImageSetter to handle image loading (e.g., using Picasso or Glide) and specify the base ImageView class to be used.

TangramBuilder.init(context, new IInnerImageSetter() {
	@Override
	public <IMAGE extends ImageView> void doLoadImageUrl(@NonNull IMAGE view,
                    @Nullable String url) {
		//here assume you use Picasso to load image
		Picasso.with(context).load(url).into(view);
	}
}, ImageView.class);

Initialize the Tangram environment once globally in your application. You must provide a universal image loader via IInnerImageSetter and specify the default ImageView type used by your application.

TangramBuilder.init(context, new IInnerImageSetter() {
	@Override
	public <IMAGE extends ImageView> void doLoadImageUrl(@NonNull IMAGE view,
                    @Nullable String url) {
		// Example using Picasso
		Picasso.with(context).load(url).into(view);
	}
}, ImageView.class);

Build the TangramEngine from the builder and register support modules (like click, load, or exposure support) to handle business logic.

// Create engine
TangramEngine engine = builder.build();

// Register support modules
engine.register(SimpleClickSupport.class, new XXClickSupport());
engine.register(CardLoadSupport.class, new XXCardLoadSupport());
engine.register(ExposureSupport.class, new XXExposureSuport());