This series of articles focuses on the Tmall team's open source Tangram How to use the framework and why, since Tangram's underlying layer is based on vlayout This series will be outlined below:

1. Demand Background
2. Introduction to Tangram and vlayout
3. Use of Tangram
4. vlayout principle
5. Tangram principle
6. Tangram secondary packaging

This article introduces the simple use of Tangram.

Demo Code

Basic Use

Introduce dependencies:

    //tangram related: tangram uses the latest version before 3.0, others use the latest version directly
    implementation 'com.alibaba.android:tangram:2.2.5@aar'
    //tangram underlying support: vlayout
    implementation 'com.alibaba.android:vlayout:1.2.36@aar'
    //tangram virtual view (more flexible view, opening separately later)
    implementation('com.alibaba.android:virtualview:1.4.6@aar') {
        transitive true
    }
    //tangram supports banner paging
    implementation 'com.alibaba.android:ultraviewpager:1.0.7.8@aar'
    //rxjava is required inside tangram
    implementation 'io.reactivex.rxjava2:rxjava:2.1.12'
    implementation 'io.reactivex.rxjava2:rxandroid:2.0.2'

Initialization is mainly about passing context in and setting the picture loading capability, where we use Glide,

public class MyApp extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        TangramBuilder.init(this, new IInnerImageSetter() {
            @Override
            public <IMAGE extends ImageView> void doLoadImageUrl(@NonNull IMAGE view, @Nullable String url) {
                Glide.with(view.getContext()).load(url).
                        error(R.mipmap.ic_launcher).
                        into(view);
            }
        }, NetImageView.class);
    }
}

Used in activity,

//MainActivity.java
void onCreate(Bundle savedInstanceState) {
    //Create builder to configure parameters
    TangramBuilder.InnerBuilder builder = TangramBuilder.newInnerBuilder(this);
    //Register your own cell
    builder.registerCell(ImageTextView.class.getSimpleName(), ImageTextView.class);
    builder.registerCell(SingleImageView.class.getSimpleName(), SingleImageView.class);

    //Create Engine
    mEngine = builder.build();
    //Bind RecyclerView
    mEngine.bindView(mBinding.rvList);

    mBinding.rvList.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);
            //Triggers engine's onScroll in a scroll event, and internally triggers cards that need to be loaded asynchronously to load data ahead of time
            mEngine.onScrolled();
        }
    });

    //Set data to trigger rendering
    String file = FileUtil.getAssertsFile(this, "main.json");
    try {
        mEngine.setData(new JSONArray(file));
    } catch (JSONException e) {
        e.printStackTrace();
    }
}

As mentioned in the previous introductory article, Tangram has built-in some layout method Card, which basically meets our needs, so we just need to customize our own specific View, which is also Cell. At the top, we manually register two Cells, ImageTextView and SingleImageView. Let's start with ImageTextView, which is a LinearLayout with an icon on the top and a text on the bottom and needs to implement ITangramVThe iewLifeCycle interface executes its own logic in the corresponding callback.

public class ImageTextView extends LinearLayout implements ITangramViewLifeCycle {
    private NetImageView mImgIcon;
    private TextView mTvTitle;

    public ImageTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOrientation(VERTICAL);
        setGravity(Gravity.CENTER);
        inflate(getContext(), R.layout.cell_image_text, this);
        mImgIcon = findViewById(R.id.img_icon);
        mTvTitle = findViewById(R.id.tv_title);
    }

    @Override
    public void cellInited(BaseCell cell) {
    }

    @Override
    public void postBindView(BaseCell cell) {
        mImgIcon.load(cell.optStringParam("imgUrl"));
        mTvTitle.setText(cell.optStringParam("title"));
    }

    @Override
    public void postUnBindView(BaseCell cell) {
    }
}

Its layout file cell_Image_Text.xmlAs follows,

<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.holiday.tangram.view.NetImageView
        android:id="@+id/img_icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:scaleType="centerCrop"
        tools:background="@color/colorAccent" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:ellipsize="end"
        android:maxLines="1"
        tools:text="@string/app_name" />
</merge>

Cell s are ready. Here's the json template, starting with a four-column layout container-fourColumn.

{
    "type": "container-fourColumn",
    "items": [
        {
            "imgUrl": "https://tva1.sinaimg.cn/large/007S8ZIlgy1geqp9zhftrj303r03r3yl.jpg",
            "title": "Heading 1",
            "type": "ImageTextView"
        },
        {
            "imgUrl": "https://tva1.sinaimg.cn/large/007S8ZIlgy1geqp9zhftrj303r03r3yl.jpg",
            "title": "Heading 2",
            "type": "ImageTextView"
        },
        {
            "imgUrl": "https://tva1.sinaimg.cn/large/007S8ZIlgy1geqp9zhftrj303r03r3yl.jpg",
            "title": "Heading 3",
            "type": "ImageTextView"
        },
        {
            "imgUrl": "https://tva1.sinaimg.cn/large/007S8ZIlgy1geqp9zhftrj303r03r3yl.jpg",
            "title": "Heading 4",
            "type": "ImageTextView"
        }
    ]
}

Run as follows:

Next, let's look at another custom Cell. SingleImageView is simple, it's a single picture.

public class SingleImageView extends NetImageView implements ITangramViewLifeCycle {

    public SingleImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setScaleType(ScaleType.CENTER_CROP);
    }

    @Override
    public void cellInited(BaseCell cell) {
    }

    @Override
    public void postBindView(BaseCell cell) {
        load(cell.optStringParam("imgUrl"));
    }

    @Override
    public void postUnBindView(BaseCell cell) {
    }
}

Then a 1-drag n layout container-onePlusN,

{
    "type": "container-onePlusN",
    "style": {
        "aspectRatio": "1.778",
        "margin": "[10,0,0,0]"
    },
    "items": [
        {
            "imgUrl": "https://wanandroid.com/blogimgs/942a5c62-ca87-4e7c-a93d-41ff59a15ba4.png",
            "type": "SingleImageView"
        },
        {
            "imgUrl": "https://www.wanandroid.com/blogimgs/62c1bd68-b5f3-4a3c-a649-7ca8c7dfabe6.png",
            "type": "SingleImageView"
        },
        {
            "imgUrl": "https://www.wanandroid.com/blogimgs/50c115c2-cf6c-4802-aa7b-a4334de444cd.png",
            "type": "SingleImageView"
        },
        {
            "imgUrl": "https://www.wanandroid.com/blogimgs/90c6cc12-742e-4c9f-b318-b912f163b8d0.png",
            "type": "SingleImageView"
        }
    ]
}

Pictures taken from Play Android The banner diagram of the

Because there are 4 pieces of data, the effect shown is 1 drag 3.

Then come to container-banner, whose Cell still uses SingleImageView.

{
    "type": "container-banner",
    "style": {
        "margin": "[0,0,10,0]",
        "pageWidth": 200,
        "pageHeight": 100,
        "indicatorMargin": "5",
        "infinite": "true",
        "indicatorImg2": "https://img.alicdn.com/tps/TB1XRNFNXXXXXXKXXXXXXXXXXXX-32-4.png",
        "indicatorImg1": "https://img.alicdn.com/tps/TB16i4qNXXXXXbBXFXXXXXXXXXX-32-4.png",
        "scrollMarginLeft": "10",
        "indicatorGap": "2",
        "indicatorHeight": "1.5",
        "itemRatio": "2.654",
        "scrollMarginRight": "10",
        "indicatorGravity": "center",
        "hGap": "20"
    },
    "items": [
        {
            "imgUrl": "https://wanandroid.com/blogimgs/942a5c62-ca87-4e7c-a93d-41ff59a15ba4.png",
            "type": "SingleImageView"
        },
        {
            "imgUrl": "https://www.wanandroid.com/blogimgs/62c1bd68-b5f3-4a3c-a649-7ca8c7dfabe6.png",
            "type": "SingleImageView"
        },
        {
            "imgUrl": "https://www.wanandroid.com/blogimgs/50c115c2-cf6c-4802-aa7b-a4334de444cd.png",
            "type": "SingleImageView"
        },
        {
            "imgUrl": "https://www.wanandroid.com/blogimgs/90c6cc12-742e-4c9f-b318-b912f163b8d0.png",
            "type": "SingleImageView"
        }
    ]
}

You can see that there are still many parameters to configure, and the documentation can see that Here , run as follows,

The overall effect is as follows:

Built-in support support support

Tangram has built-in support support, such as handling clicks on SimpleClickSupport, loading CardLoadSupport with card data, exposureLogic ExposureSupport s, etc. It can be registered through TangramEngine's add method as follows:

//MainActivity.java
mEngine.addSimpleClickSupport(new MyClickSupport());

Then look at MyClickSupport,

public class MyClickSupport extends SimpleClickSupport {
    public MyClickSupport() {
        setOptimizedMode(true);
    }

    @Override
    public void defaultClick(View targetView, BaseCell cell, int eventType) {
        super.defaultClick(targetView, cell, eventType);
        QrToast.show(cell.stringType);
    }
}

We can set the click event on the view in our own ell, or we can give the click event to support for global processing. If you want to use support to handle the click event, you need to add this line of code in Cell.

//SingleImageView.java
@Override
public void cellInited(BaseCell cell) {
    setOnClickListener(cell);
}

For example, the shop front page, most of the modules are Click to jump the page, the behavior is relatively simple, do not need each Cell to do click events, SimpleClickSupport can be very good support, take out the page short chain in defaultClick to jump, such as,

public class MyClickSupport extends SimpleClickSupport {
    public MyClickSupport() {
        setOptimizedMode(true);
    }

    @Override
    public void defaultClick(View targetView, BaseCell cell, int eventType) {
        super.defaultClick(targetView, cell, eventType);
        //Take out the short chain of the page and jump.Short chains can be either h5 or native ly processed internally by Router
        PageRouter.to(cell.optStringParam("link"));
    }
}

It's easy to use with wood!Okay, the use of Tangram is described here. After that, we will analyze the principles, implement template and data separation, etc. Please look forward to ~

Reference Article

• GitHub-Tangram uses documentation
• Tangram website