alibaba / tangram-android

Tangram is a modular UI solution for building native page dynamically including Tangram for Android, Tangram for iOS and even backend CMS. This project provides the sdk on Android.

Attention. This project is not maintained any more !!!

Tangram for Android

中文文档

Projects of Tangram

Android

• Tangram-Android
• Virtualview-Android
• vlayout
• UltraViewPager

iOS

• Tangram-iOS
• Virtualview-iOS
• LazyScrollView

Tangram is a modular UI solution for building native page dynamically including Tangram for Android, Tangram for iOS and even backend CMS. This project provides the sdk on Android which is based on vlayout and UltraViewPager.

Features

Warning please not use class under tangram3 package! Tangram 3.0 is developing, we add tangram3 package and reserve tangram package for compatible. Tangram3 is on beta and use on official app is not recommend.

• Two platform support (iOS & Android, See Tangram-iOS in Github for iOS Version)
• Fast Generate View by JSON Data , provide default parser.
• Easily control the reuseability of views
• Provide multiple Built-in layouts
• Custom layout style (by JSON Data or code)
• High performance (Base on vlayout)
• Extendable API

demo

Basic Concepts

• Card, a group of cells, is responsible for layouting child cells.
• Cell, smallest business UI element, like an item in RecyclerView.

Default cards

• Flow Card（like grid）
• Linear Card
• Fix Card
• Scroll Fix Card
• Sticky Card
• One drag N Card
• Page Scroll Card
• Water Flow Card
• Dragable Card

Get started

See details at Tutorial.

Tangram Documents

See complete documents here.

Contributing

Before you open an issue or create a pull request, please read Contributing Guide first.

LICENSE

Tangram is available under the MIT license.

WeChatGroup

Search tangram_ or scan the QR code above to be invited in WeChat.

tangram-android's Issues

Tangram V2.0 具体说明时候发布呢？

您好，非常感谢开源Android和ios客户端整体解决方案，非常赞，看到你们说明里面有写到，打算2.0重构。请问具体什么时候发布呢？或者给一个snapshot包呢？
个人比较担心2.0与1.0差异比较多。所以希望直接上手2.0.
另外发现Android 和 ios 项目最近三个月都没有提交代码了的。
还有，发现开源之后，issue里面提的问题还是很多的，但欣慰的是，你们解决非常迅速。
再次感谢。
希望给予时间安排答复。

Tangram V2.0 计划推出时间有吗？

Tangram V2.0 计划推出时间有吗？

loadmore 如何实现在列表底部显示加载loading？

分页加载，是否可以在底部显示一个cell呢？

1.比如加载失败后，‘点击重试’
2. 或者网络比较慢，请求还没有回来，底部显示'loading.'

看了下，demo中，有在json里面配置

{
"type": "1",
"load": "com.tmall.request.load.more",
"loadType": 1,
"items": [
]
}
然后代码里面通过 AsyncPageLoader 去加载数据。但是界面上并没有显示'loading'的这个cell，因为它其实是一个‘card’，items为空，所以没有显示在界面上，等数据加载完，直接显示了新增的数据。

如果我需要实现正常的分页加载效果，如何处理比较好呢？
谢谢。

问题：在Style去值时，进行干预吗

请问，我能在Style去值时，进行干预吗

有关下拉刷新兼容的的问题

 在使用中发现对github上很多的第三方刷新控件兼容不够好。第三方的下拉时触发不了刷新的操作,只能通过代码触发,目前发现可用的是SwipeRefreshLayout或者自定义SwipeRefreshLayout的一些能够使用。

吸顶布局为啥有外边距，明明设为0了啊

{
"type": 20,
"style": {
"sticky": "start",
"offset": 20,
"margin": [
0,
0,
0,
0
],
"padding": [
0,
0,
0,
0
]
},
"items": [
{
"type": 8,
"msg": "sticky"
}
]
},

如果某个组件有红点，需要刷新这个组件

有方法指定这个组件用户无感知的刷新吗，还是要全部刷新一遍

具体混淆怎么处理的规则配置

大神，混淆有影响啊，具体混淆怎么处理的

应用在android tv上

发现应用在android tv或者box上, 横向显示的时候.
不好做获取焦点时突出显示的效果.

横向滚动布局布局Bug

"type": "10",
"pageRatio": 0.33,
items<3(即横向item的view不足一屏)时向右滑动会闪屏，求解决方式

按照文档接入引用出错

使用compile 'com.tmall.android:tangram:1.0.0@aar'时提示 Failed to resolve: com.tmall.android:tangram:1.0.0

apply plugin: 'com.android.application'

android {
compileSdkVersion 25
buildToolsVersion "25.0.2"
defaultConfig {
applicationId "think.tangramdemo"
minSdkVersion 14
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha9'
testCompile 'junit:junit:4.12'
compile 'com.tmall.android:tangram:1.0.0@aar'
}
以上是build.gradle中的配置

文档给的，卡片格式字段不够完全啊

好多字段都没有，组件style也一样，哪里能有解释或者请作者完善下

可以做成rn组件么

能在Fragment中加载吗?我在fragment中没有加载出来

OOM

当无限加载的时候，内存占用会一直增加，试着不加载图片，内存不就会那么夸张了的，否则一直滑动，一直涨，最后会crash掉。

关于配置的json

我配置了一个json，我想根据业务逻辑显示我需要显示的组件，忽略我不需要的组件，但我json是配置上去的，具体怎么办呢

demo中data.json中的type都是什么意思。

摘取一段：
1.最外层有type字段，items里面有type字段，这两个type都描述什么的？
2.type字段后面都是数组，有的int有的是string，有什么区别？
{
"id": "banner1",
"type": 1,
"style": {
"aspectRatio": 3.223
},
"items": [
{
"bizId":"item1",
"type": 110,
"msg": "info1"
},
{
"bizId":"item2",
"type": 110,
"msg": "info2"
}
]
},
{
"type": "10",
"style": {
"indicatorImg1": "https://gw.alicdn.com/tps/TB16RaxLpXXXXbIXFXXXXXXXXXX-14-14.png",
"indicatorImg2": "https://gw.alicdn.com/tps/TB1m79uLpXXXXXUXVXXXXXXXXXX-18-16.png",
"indicatorGravity": "center",
"indicatorPosition": "outside",
"indicatorMargin": 10,
"indicatorGap": 2,
"scrollMarginLeft": 20,
"scrollMarginRight": 20,
"hGap": 12,
"pageRatio": 0.5,
"bgColor": "#ffffff"
},
"items": [
{
"type": 1,
"msg": "info1",
"style": {
}
},
{
"type": 1,
"msg": "info2",
"style": {
}
},
{
"type": 1,
"msg": "info3",
"style": {
}
},
{
"type": 1,
"msg": "info4",
"style": {
}
},
{
"type": 1,
"msg": "info5",
"style": {
}
},
{
"type": 1,
"msg": "info6",
"style": {
}
}
]
}

页面快速滑动时有重影

我的首页是类似购物的首页,上面有许多图片,但是我在快速滑动的时候就会出现图片上的重影问题,
我现在不知道哪里出现了问题?,希望您能看一下

怎么让卡片里面的一个组件消失

怎么操作数据，组件？

能介绍的更加详细吗

// built-in mCells
registry.registerCell(TYPE_EXTENDED_VIEW, Card.PlaceholderCell.class,
SimpleEmptyView.class);
registry.registerCell(TYPE_EMPTY_VIEW, BaseCell.class, SimpleEmptyView.class);
registry.registerCell(TYPE_CAROUSEL_CELL, BannerView.class);
registry.registerCell(TYPE_SINGLE_COLUMN_ENTITY, GridEntityCardView.class);
registry.registerCell(TYPE_DOUBLE_COLUMN_ENTITY, GridEntityCardView.class);
registry.registerCell(TYPE_TRIPLE_COLUMN_ENTITY, GridEntityCardView.class);
registry.registerCell(TYPE_FOUR_COLUMN_ENTITY, GridEntityCardView.class);
registry.registerCell(TYPE_FIVE_COLUMN_ENTITY, GridEntityCardView.class);
registry.registerCell(TYPE_CAROUSEL_ENTITY, BannerView.class);

    registry.registerCell(TYPE_LINEAR_SCROLL_CELL, LinearScrollView.class);

    // built-in cards
    registry.registerCard(TYPE_CAROUSEL, BannerCard.class);
    registry.registerCard(TYPE_SINGLE_COLUMN, SingleColumnCard.class);
    registry.registerCard(TYPE_DOUBLE_COLUMN, DoubleColumnCard.class);
    registry.registerCard(TYPE_TRIPLE_COLUMN, TripleColumnCard.class);
    registry.registerCard(TYPE_FOUR_COLUMN, FourColumnCard.class);
    registry.registerCard(TYPE_ONE_PLUS_N, OnePlusNCard.class);
    registry.registerCard(TYPE_FLOAT, FloatCard.class);
    registry.registerCard(TYPE_PIN_BOTTOM, PinBottomCard.class);
    registry.registerCard(TYPE_FIVE_COLUMN, FiveColumnCard.class);
    registry.registerCard(TYPE_STICKY, StickyCard.class);
    registry.registerCard(TYPE_STICKY_START, StickyCard.class);
    registry.registerCard(TYPE_STICKY_END, StickyEndCard.class);
    registry.registerCard(TYPE_PIN_TOP, PinTopCard.class);
    registry.registerCard(TYPE_STAGGER, StaggeredCard.class);

    registry.registerCard(TYPE_FUSION_TABS, FusionCard.class);
    registry.registerCard(TYPE_FLOW, FlowCard.class);
    registry.registerCard(TYPE_SCROLL_FIX, ScrollFixCard.class);

    registry.registerCard(TYPE_LINEAR_SCROLL, LinearScrollCard.class);
    registry.registerCard(TYPE_SCROLL_FIX_BANNER, FixLinearScrollCard.class);

    // extend cards
    registry.registerCard(TYPE_FIX, FixCard.class);
    registry.registerCard(TYPE_GRID, GridCard.class);
    registry.registerCard(TYPE_LINEAR, LinearCard.class);
    registry.registerCard(TYPE_X_COLUMN, ColumnCard.class);

IndexOutOfBoundsException

type为5和异步分页加载更多在相邻的JsonObejct出现数组越界。
重现步骤：demo中的data.json添加的type为5

{
  "type": 5,
  "style": {
  },
  "items": [
    {
      "type": 1
    },
    {
      "type": 1
    }
  ]
},
{
  "type": "1",
  "load": "com.tmall.request.load.more",
  "loadType": 1,
  "items": [
  ]
}

轮播/横向滚动布局，其中横向滚动布局在Android中失效

pageWidth 页面宽度，配置了此参数，轮播布局的滚动会变为线性,不配置的话，就是一页一页的滚动 String/Number "100"

在Android中配置了该属性，无效，还是普通的Banner效果

BannerCard BannerView具体怎么用啊

BannerCard BannerView具体怎么用啊 ，写的太简单了

关于部分卡片（组件）会划出recyclerView的问题

如果在布局文件中，在RecyclerView上方空出一段区域，那么在滑动过程中，如TYPE_FOUR_COLUMN卡片中有多个组件（12个），那么快速滑动，可能会出现上方空出来的区域，也会显示划出的组件中的图片。

个人定位问题：在滑动过程中，组件中的相关的View已经释放掉了，但是图片未释放掉。
求助：碰到这种问题，应该怎么处理，因为在相关项目中，在RecyclerView上方存在相关Indicator，而在相关的json数据中用到相关的TYPE_FOUR_COLUMN的卡片，会出现这种情况。

卡顿

请教一下大神，滑动的时候卡顿怎么解决

内置的Type10 banner有bug

• 在手动滑动大概5遍左右，轮播会卡顿重置。

• #在复用时，下一个banner的autoScroll设置为0，也会自动轮播。

• 求加急解决 ，Android端#

是不是不更新啦?

Tangram CMS有开源么？

你还，请问Tangram后台有开源么？给运营人员用的配置后台~

有关自动加载更多会触发下标越界的问题

需求:我需要分页加载列表布局,分页加载的json
{
"type": "1",
"load": "com.tmall.request.load.more",
"loadType": 1,
"items": [
]
}
然后在分页的监听里面做网络加载分页数据。
在实际中操作发现不能在分页加载的items的JsonArray中添加默认的数据类似
"items": [
{
"type": 1
},
{
"type": 1
}
]
这样的数据,添加后运行完分页的回调监听之后就直接崩溃了

FATAL EXCEPTION: main
Process: com.tmall.wireless.tangram.example, PID: 21751
java.lang.IndexOutOfBoundsException: Inconsistency detected. Invalid view holder adapter positionViewHolder{3c5fc95d position=58 id=-1, oldPos=50, pLpos:50 scrap [attachedScrap] tmpDetached no parent}
at android.support.v7.widget.RecyclerView$Recycler.validateViewHolderForOffsetPosition(RecyclerView.java:4251)
at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:4382)
at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:4363)
at com.alibaba.android.vlayout.ExposeLinearLayoutManagerEx$LayoutState.next(ExposeLinearLayoutManagerEx.java:1607)
at com.alibaba.android.vlayout.VirtualLayoutManager$LayoutStateWrapper.next(VirtualLayoutManager.java:978)
at com.alibaba.android.vlayout.layout.GridLayoutHelper.layoutViews(GridLayoutHelper.java:317)
at com.alibaba.android.vlayout.layout.BaseLayoutHelper.doLayout(BaseLayoutHelper.java:260)
at com.alibaba.android.vlayout.VirtualLayoutManager.layoutChunk(VirtualLayoutManager.java:574)
at com.alibaba.android.vlayout.ExposeLinearLayoutManagerEx.fill(ExposeLinearLayoutManagerEx.java:1140)
at com.alibaba.android.vlayout.ExposeLinearLayoutManagerEx.onLayoutChildren(ExposeLinearLayoutManagerEx.java:358)
at com.alibaba.android.vlayout.VirtualLayoutManager.onLayoutChildren(VirtualLayoutManager.java:398)
at android.support.v7.widget.RecyclerView.dispatchLayout(RecyclerView.java:2864)
at android.support.v7.widget.RecyclerView.onLayout(RecyclerView.java:3071)
at android.view.View.layout(View.java:15734)
at android.view.ViewGroup.layout(ViewGroup.java:5196)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:579)
at android.widget.FrameLayout.onLayout(FrameLayout.java:514)
at android.view.View.layout(View.java:15734)
at android.view.ViewGroup.layout(ViewGroup.java:5196)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:579)
at android.widget.FrameLayout.onLayout(FrameLayout.java:514)
at android.view.View.layout(View.java:15734)
at android.view.ViewGroup.layout(ViewGroup.java:5196)
at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1703)
at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1557)
at android.widget.LinearLayout.onLayout(LinearLayout.java:1466)
at android.view.View.layout(View.java:15734)
at android.view.ViewGroup.layout(ViewGroup.java:5196)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:579)
at android.widget.FrameLayout.onLayout(FrameLayout.java:514)
at android.view.View.layout(View.java:15734)
at android.view.ViewGroup.layout(ViewGroup.java:5196)
at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:2151)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1875)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1092)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6050)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:805)
at android.view.Choreographer.doCallbacks(Choreographer.java:618)
at android.view.Choreographer.doFrame(Choreographer.java:588)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:791)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:135)
at android.app.ActivityThread.main(ActivityThread.java:5418)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1037)
at @com.android.internal.os.ZygoteInit.main(ZygoteInit.java:832)

瀑布流布局的网格和列表布局的切换

我现在想把瀑布流的网格和列表进行切换,请问有什么思路吗?

StickyCard与StaggeredCard滑动冲突

在使用中StickyCard如果在StaggeredCard上面,在页面滑动时会闪。
我现在的处理方法是:在两个布局中间加一个SingleColumnCard布局,
高度设置的很小,这样能间接的解决。

Android :吸顶布局里面的offset属性没有用

我在库里面的StickyCard类里面发现
StickyLayoutHelper里面的helper.setOffset(); 这个方法没有调用.
Style类中也没有定义offset的属性和赋值.
我尝试着仿照bgColor属性写法,重新给offset定义和赋值,发现运行起来offset是生效的。

BannerCard问题

同一页面,有一个轮播图(自动滚动的),有一个横向滑动的布局，横向布局也会自动滚动,求解

刷新问题：replaceData方法替换卡片数据是只替换卡片，还是包含了卡片和卡片里的组件

public void replaceData(int position, @nullable T data) 替换卡片数据是只替换卡片，还是包含了卡片和卡片里的组件

margin 卡片的外间距，顺序是上右下左

这种单位是什么，像素吗，还是dp

自定义view逻辑处理

public class TestView extends FrameLayout implements ITangramViewLifeCycle {
private TextView textView;
private BaseCell cell;

这种自定义view,在 @OverRide
public void postBindView(BaseCell cell) {处理逻辑时，activity的上下文从哪传进来啊

关于混淆的问题

请问除了在proguard-rules.pro中添加以下语句，还应该添加哪些来保证运行时不会报错呢
-keep class com.tmall.** { *;} -keep class me.everything.** { *;} -dontwarn com.tmall.**

怎么在defaultClick方法中控制组件里面的控件?

  场景:组件内有一个TextView或者ImageView,我在点击这个组件怎么在defaultClick方法中控制TextView或者ImageView的属性?

轮播BannerCard数据不满一屏，向右滑动会快速闪动。

这个框架是阿里天猫开源的吗

我们用它，没有版权问题把

关于局部刷新的问题

比如我一开始加载了一份完整的json配置，中间几个组件因为逻辑我调接口，获取了新的图片路径和数据，我想更新这几个组件的图片和点击事件，能更新吗，大神，求解

支持glide加载图片吗，还有gif

按文档配置，编译报错

配了这个compile 'com.alibaba.android:tangram:1.0.0@aar'
报Failed resolution of: Lcom/alibaba/android/vlayout/VirtualLayoutManager错误，
是还要配置
compile('com.alibaba.android:vlayout:1.0.3@aar')
这个吗?

2.0版本是又推后了吗

大神，求助，滑动冲突问题

PtrClassicFrameLayout 外面加了这个下拉刷新的，发现有滑动冲突，求教你们怎么解决的，天猫用的也是这个吗 ，原生的RecyclerView是没冲突的

忍不住了，有个疑问，望能解惑。关于 BaseCell 中数据操作的。

在 BaseCell 类中的 bindView() 方法里，有很多条数据需要展示，而这些数据都在一个 BaseCell 中的JSONObject 类型的变量中存储。

数据过多，使用 optJsonObjectParam() 等等一系列方法，去一个个取数据，写起来真的挺麻烦的。

我是否能够在 bindView() 中去这样操作 new Gson().fromJson() ?

怕这样写会造成性能差，但是 optXXX() 很多数据时，真的很烦人。

Tangram在下拉刷新场景中如何使用？

如何清空数据、清空界面、刷新数据、刷新界面

Tangram 图片加载框架优先使用Picasso，与Glide不兼容【Bug】

详细问题描述写在vLayout里了issues87，

解决方案是：在Tangram里使用Picasso，不要使用Glide

怎样加一个header啊？demo里面都没有header的

组件相关问题

1.请问组件开发规范的文档在哪里，点击链接跳转地址不对呢。
2.如果组件里面控件的size，margin修改了，要两端不用发版动态变化，怎么做？