Android Tangram实战--实现《闲鱼》首页

作者: R_雨泽 | 来源:发表于2019-11-18 21:23 被阅读0次

为什么是《闲鱼》

因为闲鱼首页纵享丝滑，内容很丰富，滑动很流畅

Tangram 资料

github 官网
tangram 实现原理是recyclerView+不同的Card 布局，每个card 有固定的格式:


{
    "type": "container-oneColumn", ---> 描述布局类型
    "style": { ---> 描述样式
      ...
    },
    "header": { ---> 描述header
    },
    "items": [ ---> 描述组件列表
      ...
   ],
   "footer": { ---> 描述footer
   }
 },

要实现的页面

1574072186(1).jpg

最终实现的效果

card5的部分和闲鱼不一样，用了viewpager 实现了左右滑动

gifhome_320x640_13s.gif

实现过程

首页拆解

xianyu.jpg

拆成五个部分，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<Card1001>   {
    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<Card2001> {
    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()方法中。
代码如图

1574081093(1).jpg

所有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": "新鲜"
      }

    ]
  }

]

问题和感悟

my.jpg

1574082493(1).jpg

这种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());

Android Tangram实战--实现《闲鱼》首页

为什么是《闲鱼》

Tangram 资料

要实现的页面

最终实现的效果

实现过程

首页拆解

问题和感悟

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android应用开发那些事

Android

常用收藏

Android自定义view那些事

Android Tangram实战--实现《闲鱼》 首页

为什么是《闲鱼》

Tangram 资料

要实现的页面

最终实现的效果

实现过程

首页拆解

问题和感悟

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android应用开发那些事

Android

常用收藏

Android自定义view那些事

Android Tangram实战--实现《闲鱼》首页