为什么是《闲鱼》
因为闲鱼首页纵享丝滑,内容很丰富,滑动很流畅
Tangram 资料
github 官网
tangram 实现原理是recyclerView+不同的Card 布局,每个card 有固定的格式:
{
"type": "container-oneColumn", ---> 描述布局类型
"style": { ---> 描述样式
...
},
"header": { ---> 描述header
},
"items": [ ---> 描述组件列表
...
],
"footer": { ---> 描述footer
}
},
要实现的页面
最终实现的效果
card5的部分和闲鱼不一样,用了viewpager 实现了左右滑动
实现过程
首页拆解
拆成五个部分,card2 使用系统自带的样式,其他的全部自定义,每个card 都有三个部分 View bean model,举两个栗子card2 和card1:
card1
json数据
{
"type": "container-oneColumn",
"style": {
"background-color": "#fd9ac9"
},
"items": [
{
"url": "https://gw.alicdn.com/tfs/TB1Qiy8mKT2gK0jSZFvXXXnFXXa-1125-330.png",
"height": "330",
"width": "1125",
"type": "1001",
"event": {
"jumpType": "H5",
"targetUrl": "https://market.m.taobao.com/apps/abs/10/451/4b9a17?wh_weex=true&psId=2334096"
}
}
]
}
card1 View
public class Card1001 extends FrameLayout {
public ImageView mImageView;
public Card1001(@NonNull Context context) {
super(context);
init();
}
public Card1001(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public Card1001(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public Card1001(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
View.inflate(getContext(), R.layout.card_1001,this);
mImageView = findViewById(R.id.img);
}
public void setImageUrl(String url) {
Glide.with(this).load(url).into(mImageView);
}
}
card1 bean
由于只有一个图片 可以省略了
card model
public class Card1001Cell extends BaseCell {
String imgUrl;
@Override
public void parseWith(@NonNull JSONObject data, @NonNull MVHelper resolver) {
imgUrl = data.optString("url");
}
@Override
public void bindView(@NonNull Card1001 view) {
// view.setImageUrl(imgUrl);
doLoadImageUrl(view.mImageView,imgUrl);
view.setOnClickListener(this);
}
@Override
public void unbindView(@NonNull Card1001 view) {
super.unbindView(view);
}
}
card2
json数据
{
"type": "container-fiveColumn",
"style": {
"background-image": "https://gw.alicdn.com/tfs/TB1XU1XmBr0gK0jSZFnXXbRRXXa-1125-300.png",
"margin": [
"12",
"12",
"12",
"12"
],
"bgColor": "#00FAFAFA"
},
"items": [
{
"type": "2001",
"clickParam": {
"args": {
"spm": "a2170.7897990.6782615.9644",
"trackName": "Channel1",
"abtag": "homeBigFish",
"channelCode": "PHONE"
},
"eventId": "2101",
"page": "Page_xyHome",
"arg1": "Button-Channel1"
},
"imgUrlList": "https://gw.alicdn.com/tfs/TB1eSRHMgHqK1RjSZFkXXX.WFXa-126-126.png",
"titleColor": "#595959",
"superscript": "",
"bgImgUrl": "",
"title": "二手手机",
"event": {
"jumpType": "H5",
"targetUrl": "https://market.m.taobao.com/app/idleFish-F2e/app-channels/channelHome?wh_weex=true&channelCode=phone"
}
},
{
"type": "2001",
"clickParam": {
"args": {
"abtag": "homeBigFish",
"spm": "a2170.7897990.6782615.9646",
"trackName": "Channel3"
},
"eventId": "2101",
"page": "Page_xyHome",
"arg1": "Button-Channel3"
},
"imgUrlList": "https://gw.alicdn.com/tfs/TB1SZNhXlGE3KVjSZFhXXckaFXa-126-126.png",
"titleColor": "#666666",
"superscript": "",
"bgImgUrl": "http://gw.alicdn.com/mt/TB1l1mpSFXXXXaVXVXXXXXXXXXX-112-96.png",
"title": "游戏交易",
"event": {
"jumpType": "H5",
"targetUrl": "https://market.m.taobao.com/markets/idletrade/game?wh_weex=true"
}
},
{
"type": "2001",
"clickParam": {
"args": {
"abtag": "homeBigFIsh",
"spm": "a2170.7897990.6782615.9654",
"trackName": "Channel12"
},
"eventId": "2101",
"page": "Page_xyHome",
"arg1": "Button-Channel12"
},
"imgUrlList": "https://gw.alicdn.com/tfs/TB1KOHibRGw3KVjSZFwXXbQ2FXa-126-126.png",
"titleColor": "#666666",
"superscript": "",
"bgImgUrl": "",
"title": "二手图书",
"event": {
"jumpType": "H5",
"targetUrl": "https://market.m.taobao.com/markets/idletrade/xybook?wh_weex=true"
}
},
{
"type": "2001",
"clickParam": {
"args": {
"spm": "a2170.7897990.6782615.9649",
"trackName": "Channel6",
"abtag": "homeBigFish",
"channelCode": "CLOTHING"
},
"eventId": "2101",
"page": "Page_xyHome",
"arg1": "Button-Channel6"
},
"imgUrlList": "https://gw.alicdn.com/tfs/TB1NLHqk.z1gK0jSZLeXXb9kVXa-126-126.png",
"titleColor": "#595959",
"superscript": "https://gw.alicdn.com/tfs/TB1N_BLmxz1gK0jSZSgXXavwpXa-48-28.png",
"bgImgUrl": "",
"title": "闲鱼潮",
"event": {
"jumpType": "H5",
"targetUrl": "https://xianyu.yohobuy.com/xianyu/index?isNeedRefresh=false&SRC_ID=1"
}
},
{
"type": "2001",
"clickParam": {
"args": {
"spm": "a2170.7897990.6782615.9640",
"trackName": "Channel10",
"abtag": "homeBigFish",
"channelCode": "Button-Category"
},
"eventId": "2101",
"page": "Page_xyHome",
"arg1": "Button-Channel10"
},
"imgUrlList": "https://gw.alicdn.com/tfs/TB1BfNgXouF3KVjSZK9XXbVtXXa-126-126.png",
"titleColor": "#595959",
"title": "全部分类",
"event": {
"jumpType": "native",
"targetUrl": "fleamarket://categorypage"
},
"bgImgUrl": ""
}
]
}
card2 View
public class Card2001 extends LinearLayout {
public ImageView mImageView, tag;
public CommonTextView name;
public Card2001(@NonNull Context context) {
super(context);
init();
}
public Card2001(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public Card2001(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public Card2001(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
setOrientation(VERTICAL);
setGravity(Gravity.CENTER);
LayoutInflater.from(getContext()).inflate(R.layout.card_2001,this,true);
// View.inflate(getContext(), R.layout.card_2001, this);
mImageView = findViewById(R.id.item_icon);
tag = findViewById(R.id.item_tag);
name = findViewById(R.id.item_name);
}
public void setImageUrl(String url) {
Glide.with(this).load(url).into(mImageView);
}
public void setName(String itemName) {
name.setText(itemName);
}
}
card2 bean
比较简单可以略
card2 model
public class Card2001Cell extends BaseCell {
String name;
String imgUrl,imgTag;
@Override
public void parseWith(@NonNull JSONObject data, @NonNull MVHelper resolver) {
name = data.optString("title");
imgUrl = data.optString("imgUrlList");
imgTag = data.optString("superscript");
}
@Override
public void postBindView(@NonNull Card2001 view) {
view.setName(name);
doLoadImageUrl(view.mImageView,imgUrl);
setTagImageUrl(view,imgTag);
view.setOnClickListener(this);
}
public void setTagImageUrl(Card2001 view ,String url) {
if (StringUtil.isEmpty(url)){
view.tag.setVisibility(INVISIBLE);
}else{
view .tag.setVisibility(VISIBLE);
doLoadImageUrl(view.tag,url);
}
}
}
注册到布局管理
builder.registerCell("1001", Card1001Cell.class, Card1001.class);
builder.registerCell("2001", Card2001Cell.class, Card2001.class);
builder.registerCell("3001", Card3001Cell.class, Card3001.class);
builder.registerCell("4001", Card4001Cell.class, Card4001.class);
builder.registerCell("5001", Card5001Cell.class, Card5001.class);
card5的实现稍微复杂点,可以参考之前的例子,用在这里刚好可以实现,card5 的json数据只有顶部的tabs,viewpager 包裹的RecyclerView 数据从另外的接口获取,写法和之前RecyclerView 的item写法差不多,只不过绑定数据在Card5001Cell的bindView()方法中。
代码如图
所有card 数据
card.json
[
{
"type": "container-oneColumn",
"style": {
"background-color": "#fd9ac9"
},
"items": [
{
"url": "https://gw.alicdn.com/tfs/TB1Qiy8mKT2gK0jSZFvXXXnFXXa-1125-330.png",
"height": "330",
"width": "1125",
"type": "1001",
"event": {
"jumpType": "H5",
"targetUrl": "https://market.m.taobao.com/apps/abs/10/451/4b9a17?wh_weex=true&psId=2334096"
}
}
]
},
{
"type": "container-fiveColumn",
"style": {
"background-image": "https://gw.alicdn.com/tfs/TB1XU1XmBr0gK0jSZFnXXbRRXXa-1125-300.png",
"margin": [
"12",
"12",
"12",
"12"
],
"bgColor": "#00FAFAFA"
},
"items": [
{
"type": "2001",
"clickParam": {
"args": {
"spm": "a2170.7897990.6782615.9644",
"trackName": "Channel1",
"abtag": "homeBigFish",
"channelCode": "PHONE"
},
"eventId": "2101",
"page": "Page_xyHome",
"arg1": "Button-Channel1"
},
"imgUrlList": "https://gw.alicdn.com/tfs/TB1eSRHMgHqK1RjSZFkXXX.WFXa-126-126.png",
"titleColor": "#595959",
"superscript": "",
"bgImgUrl": "",
"title": "二手手机",
"event": {
"jumpType": "H5",
"targetUrl": "https://market.m.taobao.com/app/idleFish-F2e/app-channels/channelHome?wh_weex=true&channelCode=phone"
}
},
{
"type": "2001",
"clickParam": {
"args": {
"abtag": "homeBigFish",
"spm": "a2170.7897990.6782615.9646",
"trackName": "Channel3"
},
"eventId": "2101",
"page": "Page_xyHome",
"arg1": "Button-Channel3"
},
"imgUrlList": "https://gw.alicdn.com/tfs/TB1SZNhXlGE3KVjSZFhXXckaFXa-126-126.png",
"titleColor": "#666666",
"superscript": "",
"bgImgUrl": "http://gw.alicdn.com/mt/TB1l1mpSFXXXXaVXVXXXXXXXXXX-112-96.png",
"title": "游戏交易",
"event": {
"jumpType": "H5",
"targetUrl": "https://market.m.taobao.com/markets/idletrade/game?wh_weex=true"
}
},
{
"type": "2001",
"clickParam": {
"args": {
"abtag": "homeBigFIsh",
"spm": "a2170.7897990.6782615.9654",
"trackName": "Channel12"
},
"eventId": "2101",
"page": "Page_xyHome",
"arg1": "Button-Channel12"
},
"imgUrlList": "https://gw.alicdn.com/tfs/TB1KOHibRGw3KVjSZFwXXbQ2FXa-126-126.png",
"titleColor": "#666666",
"superscript": "",
"bgImgUrl": "",
"title": "二手图书",
"event": {
"jumpType": "H5",
"targetUrl": "https://market.m.taobao.com/markets/idletrade/xybook?wh_weex=true"
}
},
{
"type": "2001",
"clickParam": {
"args": {
"spm": "a2170.7897990.6782615.9649",
"trackName": "Channel6",
"abtag": "homeBigFish",
"channelCode": "CLOTHING"
},
"eventId": "2101",
"page": "Page_xyHome",
"arg1": "Button-Channel6"
},
"imgUrlList": "https://gw.alicdn.com/tfs/TB1NLHqk.z1gK0jSZLeXXb9kVXa-126-126.png",
"titleColor": "#595959",
"superscript": "https://gw.alicdn.com/tfs/TB1N_BLmxz1gK0jSZSgXXavwpXa-48-28.png",
"bgImgUrl": "",
"title": "闲鱼潮",
"event": {
"jumpType": "H5",
"targetUrl": "https://xianyu.yohobuy.com/xianyu/index?isNeedRefresh=false&SRC_ID=1"
}
},
{
"type": "2001",
"clickParam": {
"args": {
"spm": "a2170.7897990.6782615.9640",
"trackName": "Channel10",
"abtag": "homeBigFish",
"channelCode": "Button-Category"
},
"eventId": "2101",
"page": "Page_xyHome",
"arg1": "Button-Channel10"
},
"imgUrlList": "https://gw.alicdn.com/tfs/TB1BfNgXouF3KVjSZK9XXbVtXXa-126-126.png",
"titleColor": "#595959",
"title": "全部分类",
"event": {
"jumpType": "native",
"targetUrl": "fleamarket://categorypage"
},
"bgImgUrl": ""
}
]
},
{
"type": "container-oneColumn",
"style": {
"background-image": "https://gw.alicdn.com/tfs/TB1XU1XmBr0gK0jSZFnXXbRRXXa-1125-300.png",
"bgColor": "#ffffff",
"margin": [
8,
12,
8,
12
]
},
"items": [
{
"style": {
"padding": [
8,
12,
8,
12
]
},
"type": "3001",
"listItems": [
{
"subTitleColor": "",
"imgUrlList": [
"http://gw.alicdn.com/mt/TB1EKsCrsj_B1NjSZFHXXaDWpXa-120-120.png"
],
"titleColor": "",
"subTitle": "14.9万人在线",
"superscript": "",
"bgImgUrl": "http://gw.alicdn.com/mt/TB1E2AgwYSYBuNjSspfXXcZCpXa-335-180.png",
"name": "逛同城",
"titleTagUrl": "",
"title": "逛同城",
"targetUrl": "https://market.m.taobao.com/app/idleFish-F2e/local-city/pages/index?wh_weex=true"
},
{
"subTitleColor": "#888888",
"imgUrlList": [
"https://img.alicdn.com/tfs/TB1LSnVmuL2gK0jSZFmXXc7iXXa-120-120.png"
],
"picInfos": [
{
"imgUrl": "http://gw.alicdn.com/mt/TB1HMxwwXmWBuNjSspdXXbugXXa-96-180.png",
"tagBkgColor": "",
"tagPosx": "",
"tagColor": "",
"tagPosy": "",
"width": "160",
"tag": "",
"height": "180"
}
],
"titleColor": "",
"subTitle": "新奇好玩都在这",
"superscript": "https://gw.alicdn.com/tfs/TB13_wDbpY7gK0jSZKzXXaikpXa-56-28.jpg",
"bgImgUrl": "https://gw.alicdn.com/tfs/TB1Vop2bSf2gK0jSZFPXXXsopXa-56-28.png",
"name": "超值租",
"titleTagUrl": "",
"title": "租借",
"targetUrl": "https://market.m.taobao.com/apps/abs/10/368/649985?wh_weex=true&psId=2296046"
},
{
"subTitleColor": "#888888",
"imgUrlList": [
"https://gw.alicdn.com/tfs/TB170BpgYvpK1RjSZFqXXcXUVXa-160-160.png"
],
"picInfos": [
{
"imgUrl": "http://gw.alicdn.com/mt/TB1Z9wWrBsmBKNjSZFsXXaXSVXa-120-120.png",
"tagBkgColor": "",
"tagPosx": "left",
"tagColor": "",
"tagPosy": "down",
"width": "160",
"tagUrl": "http://gw.alicdn.com/mt/TB188zLwY5YBuNjSspoXXbeNFXa-96-28.png",
"height": "160"
}
],
"superscript": "",
"bgImgUrl": "",
"title": "租房",
"titleColor": "",
"subTitle": "真实房东",
"name": "闲鱼租房",
"titleTagUrl": "",
"titleIcon": "http://gw.alicdn.com/mt/TB1DBVOwaSWBuNjSsrbXXa0mVXa-72-72.png",
"targetUrl": "https://market.m.taobao.com/app/idleFish-F2e/idlefish-renting/home?wh_weex=true"
},
{
"subTitleColor": "#888888",
"imgUrlList": [
"https://gw.alicdn.com/tfs/TB1LGTve.D1gK0jSZFGXXbd3FXa-200-200.png"
],
"titleColor": "",
"subTitle": "签到换好礼",
"superscript": "https://gw.alicdn.com/tfs/TB13L1qdG61gK0jSZFlXXXDKFXa-56-28.png",
"bgImgUrl": "https://gw.alicdn.com/bao/uploaded/TB1I0LGw7yWBuNjy0FpXXassXXa-336-180.png",
"name": "闲鱼币",
"titleTagUrl": "https://gw.alicdn.com/tfs/TB13L1qdG61gK0jSZFlXXXDKFXa-56-28.png",
"title": "闲鱼币",
"targetUrl": "https://market.m.taobao.com/app/idleFish-F2e/idlefish-xycoin/pages/index?wh_weex=true&needLogin=true"
}
],
"communityEntranceInfo": {
"logoHeight": "16",
"logoWidth": "66",
"trackParams": {
"spm": "a2170.7897990.6791238.1",
"trackCtrlName": "Community"
},
"items": [
{
"trackParams": {
"spm": "a2170.7897990.6791234.2",
"trackName": "CommunityCarousel"
},
"title": "汪东城:搜索汪东城有惊喜",
"targetUrl": "http://market.m.taobao.com/apps/abs/10/451/g4t34?wh_weex=true&psId=2084067&hideNavBar=true&banner_index=0",
"imageUrl": "https://gw.alicdn.com/tfs/TB1Tk4agrr1gK0jSZR0XXbP8XXa-240-143.png"
},
{
"trackParams": {
"spm": "a2170.7897990.6791234.3",
"trackName": "CommunityCarousel"
},
"title": "周艳泓:爱心公益项目",
"targetUrl": "http://market.m.taobao.com/apps/abs/10/451/g4t34?wh_weex=true&psId=2084067&hideNavBar=true&banner_index=0",
"imageUrl": "https://gw.alicdn.com/tfs/TB1lgGYiFY7gK0jSZKzXXaikpXa-240-143.png"
},
{
"trackParams": {
"spm": "a2170.7897990.6791234.3",
"trackName": "CommunityCarousel"
},
"title": "李晨nic:球鞋大放送速关注",
"targetUrl": "http://market.m.taobao.com/apps/abs/10/451/g4t34?wh_weex=true&psId=2084067&hideNavBar=true&banner_index=0",
"imageUrl": "https://gw.alicdn.com/tfs/TB1PQ31dHj1gK0jSZFOXXc7GpXa-240-143.png"
},
{
"trackParams": {
"spm": "a2170.7897990.6791234.3",
"trackName": "CommunityCarousel"
},
"title": "张俪:衣橱上新速抢",
"targetUrl": "http://market.m.taobao.com/apps/abs/10/451/g4t34?wh_weex=true&psId=2084067&hideNavBar=true&banner_index=0",
"imageUrl": "https://gw.alicdn.com/tfs/TB146gUdG67gK0jSZFHXXa9jVXa-240-143.png"
},
{
"trackParams": {
"spm": "a2170.7897990.6791234.3",
"trackName": "CommunityCarousel"
},
"title": "野食小哥:留言抢小哥同款锅",
"targetUrl": "https://market.m.taobao.com/apps/abs/10/451/73ecd7?wh_weex=true&psId=2224077",
"imageUrl": "https://gw.alicdn.com/tfs/TB1sT_qmUT1gK0jSZFhXXaAtVXa-240-143.png"
}
],
"targetUrl": "http://market.m.taobao.com/apps/abs/10/451/g4t34?wh_weex=true&psId=2084067&hideNavBar=true",
"logoUrl": "https://gw.alicdn.com/tfs/TB12V5TCpzqK1RjSZSgXXcpAVXa-195-48.png"
}
}
]
},
{
"type": "container-oneColumn",
"style": {
"background-image": "https://gw.alicdn.com/tfs/TB1XU1XmBr0gK0jSZFnXXbRRXXa-1125-300.png",
"margin": [
10,
12,
0,
12
]
},
"items": [
{
"type": "4001",
"title": "卖闲置能换钱",
"entrances": [
{
"openURL": "https://market.m.taobao.com/apps/abs/10/451/903c80?wh_weex=true&psId=2324121",
"iconURL": "https://gw.alicdn.com/tfs/TB1UPw7gVY7gK0jSZKzXXaikpXa-98-98.png",
"titleColor": "#FF9B07",
"title": "手机寄卖",
"subtitle": "高价竞拍 48小时必卖"
},
{
"openURL": "http://market.m.taobao.com/app/idleFish-F2e/widle-taobao-vue/GoodResell?wh_weex=true",
"iconURL": "https://gw.alicdn.com/tfs/TB1ukF0CSzqK1RjSZFpXXakSXXa-98-98.png",
"titleColor": "#FF5000",
"title": "淘宝转卖",
"subtitle": "网购宝贝一键发布"
},
{
"openURL": "https://market.m.taobao.com/markets/idletrade/recycle-v2?wh_weex=true",
"titleColor": "#FA3428",
"recycleAll": {
"openURL": "https://market.m.taobao.com/markets/idletrade/recycle-v2?wh_weex=true",
"title": "57类上门回收"
},
"subtitle": "先收钱 再寄货",
"iconURL": "https://gw.alicdn.com/tfs/TB1BFp7CIfpK1RjSZFOXXa6nFXa-98-98.png",
"title": "信用回收",
"recycleList": [
{
"openURL": "https://market.m.taobao.com/markets/idletrade/recycle-v2?wh_weex=true&index=2",
"iconURL": "https://gw.alicdn.com/tfs/TB1FKHumNv1gK0jSZFFXXb0sXXa-97-96.png",
"title": "手机回收"
},
{
"openURL": "https://market.m.taobao.com/markets/idletrade/recycle-v2?wh_weex=true&index=3",
"iconURL": "https://gw.alicdn.com/tfs/TB1nSbnlsfpK1RjSZFOXXa6nFXa-144-144.png",
"title": "旧衣回收"
},
{
"openURL": "https://market.m.taobao.com/markets/idletrade/bookrecycle_copy12?wh_weex=true",
"iconURL": "https://img.alicdn.com/tfs/TB1hXTiiNnaK1RjSZFBXXcW7VXa-144-144.png",
"title": "卡券回收"
}
]
}
]
}
]
},
{
"type": "container-oneColumn",
"style": {
"sticky": "start"
},
"items": [
{
"type": "5001",
"style": {
"background-image": "https://gw.alicdn.com/tfs/TB1XU1XmBr0gK0jSZFnXXbRRXXa-1125-300.png"
},
"list": [
{
"container": "flow",
"name": "关注"
},
{
"container": "flow",
"name": "新鲜"
},
{
"container": "flow",
"name": "附近"
},
{
"container": "flow",
"name": "手机"
},
{
"container": "flow",
"name": "数码"
},
{
"container": "flow",
"name": "租房"
},
{
"container": "flow",
"name": "服装"
},
{
"container": "flow",
"name": "居家"
},
{
"container": "flow",
"name": "美妆"
},
{
"container": "flow",
"name": "运动"
},
{
"container": "flow",
"name": "家电"
},
{
"container": "flow",
"name": "玩具乐器"
},
{
"container": "flow",
"name": "短租"
}
],
"tabTop": "false",
"dtn": "新鲜"
}
]
}
]
问题和感悟
这种card背景都是带圆弧的,tangram style 有背景图和背景色,就算你加载个带圆弧的背景图,遇到card2 这种还有个背景图的card 都要自己处理,如果能够用自带的style 解决背景问题使用起来还是很方便的。
加载圆弧背景图的方法:
public class CardBgCardSupport extends CardSupport {
@Override
public void onBindBackgroundView(View layoutView, Card card) {
JSONObject extras = card.extras;
// Log.e("aaa","MyCardLoadSupport extras == "+extras);
// layoutView.setPadding(20,20,20,20);
// layoutView.setBackground(layoutView.getResources().getDrawable(R.drawable.card1001_bg));
layoutView.setBackground(layoutView.getResources().getDrawable(R.drawable.bg_shape));
// layoutView.setBackgroundColor(layoutView.getResources().getColor(R.color.colorPrimaryDark));
}
}
mEngine.register(CardSupport.class,new CardBgCardSupport());