Android RecycleView + GridLayoutManager 实现一个复杂的布局

最新推荐文章于 2024-05-29 12:00:49 发布

goodness-欢

最新推荐文章于 2024-05-29 12:00:49 发布

阅读量3.5k

点赞数 2

分类专栏： Android

本文链接：https://blog.csdn.net/u013467495/article/details/108797820

版权

Android 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

要实现这么一个布局有很多种方式，这里介绍一个Recyclerview+GridLayoutManager多布局的方法来实现。

思路

1.首先要明白整体的一个布局结构，从上到下分别为：轮播图的头布局，热门主题，推荐模板，广告图，图片主题，最近热门。
所以我们可以设置几个type对应不同的布局。

    public static final int ITEM_HEADER = 1; // 头布局
    public static final int ITEM_HOT_SUBJECT = 2; // 热门主题
    public static final int ITEM_RECOMMEND = 3; // 推荐模板
    public static final int ITEM_BANNER_MIDDLE = 4; // 广告图
    public static final int ITEM_PIC_SUBJECT = 5; // 图片主题
    public static final int ITEM_LATEST_HOT = 6; // 最新热门
    public static final int ITEM_TITLE = 7; // 标题

    private void init() {
        addItemType(ITEM_HEADER, R.layout.item_grid_header); 
        addItemType(ITEM_HOT_SUBJECT, R.layout.item_grid_hot_subbject);
        addItemType(ITEM_TITLE, R.layout.item_type_title);
        addItemType(ITEM_RECOMMEND, R.layout.item_grid_recommond_moban);
        addItemType(ITEM_BANNER_MIDDLE, R.layout.item_type_banner);
        addItemType(ITEM_PIC_SUBJECT, R.layout.item_grid_pic_subject);
        addItemType(ITEM_LATEST_HOT, R.layout.item_grid_latest_hot);
    }

2.不同类型不同布局，所占用的列数不相同，要重写GridLayouManager的setSpanSizeLookup方法
有两个地方重写setSpanSizeLookup方法
// 指定item所占的列数 = return的数字
// 总列数设置的是6，如果返回6，表示希望这个item占6列，那就是占满一行了
// 总列数设置的是6，如果返回2，表示希望这个item占2列，那就是一行显示3个

2.1 在创建GridLayouManager的地方，需要注意调用顺序

    GridLayoutManager layoutManager = new GridLayoutManager(this,6);
        recycle.addItemDecoration(new HomeItemDecoration(
                        DisplayUtils.dp2px(8f),
                        DisplayUtils.dp2px(16f),
                        DisplayUtils.dp2px(16f)
                )
        );
        layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                return 0;
            }
        });
        recycle.setAdapter(adapter);
        // 必须在setAdapter之后调用才生效
        recycle.setLayoutManager(layoutManager);

2.2 在Adapter中的静态代码块

  {
        setSpanSizeLookup(new SpanSizeLookup() {
            @Override
            public int getSpanSize(GridLayoutManager gridLayoutManager, int position) {
                // 指定item所占的列数 = return的数字
                // 总列数设置的是6，如果返回6，表示希望这个item占6列， 那就是占满一行了
                // 总列数设置的是6，如果返回2，表示希望这个item占2列， 那就是一行显示3个
                int type = getItemViewType(position);
                if (type == ITEM_HEADER || type == ITEM_HOT_SUBJECT || type == ITEM_TITLE ||
                        type == ITEM_BANNER_MIDDLE || type == ITEM_PIC_SUBJECT) {
                    return 6;
                } else if (type == ITEM_RECOMMEND) {
                    return 2;
                } else if (type == ITEM_LATEST_HOT) {
                    return 3;
                }
                return 0;

            }
        });
    }

3.组装数据
根据返回的json数据自己去组装成一个大的List集合
在这里插入图片描述

public class GridTestActivity extends AppCompatActivity {



    private RecyclerView recycle;
    private MyGridAdapter adapter;
    private List<HomeListInfo> data = new ArrayList<>();


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid_test);
        initViews();
        initRecycle();
        initData();
    }

    private void initData() {
        String json = "{\"code\":0,\"message\":\"success\",\"data\":{\"banner\":[{\"id\":\"1154369160805871617\",\"adName\":\"相册MV\",\"picUrl\":\"https://static.jidiandian.cn/upload/20190906/5631c654da4c4e33b8aeb6c8ce29ce06.png\"},{\"id\":\"1154369160805871617\",\"adName\":\"相册MV\",\"picUrl\":\"https://static.jidiandian.cn/upload/20190906/5631c654da4c4e33b8aeb6c8ce29ce06.png\"}],\"minorIconList\":[{\"id\":\"1154369160805871617\",\"adName\":\"相册MV\",\"adTitle\":\"相册MV\",\"type\":35,\"adPage\":1,\"picUrl\":\"https://static.jidiandian.cn/upload/20190821/02770fb7c31349b4827f1dec29c08820.png\",\"picUrls\":\"[\\\"https://static.jidiandian.cn/upload/20190821/c9d7f80312ec43008a8e1b880aca3ee9.png\\\"]\",\"picUrlList\":[\"https://static.jidiandian.cn/upload/20190821/c9d7f80312ec43008a8e1b880aca3ee9.png\"],\"picWidth\":0,\"picHeight\":0,\"redirectType\":19,\"platform\":255,\"minCversion\":3300,\"maxCversion\":0,\"userType\":255,\"startTime\":1564058177000,\"endTime\":1595606400000,\"sort\":4,\"adLabel\":0,\"updateTime\":1566571860000,\"adStyle\":0,\"multiUrl\":false,\"labelText\":\"\"},{\"id\":\"1154368487905292290\",\"adName\":\"视频剪辑\",\"adTitle\":\"视频剪辑\",\"type\":35,\"adPage\":1,\"picUrl\":\"https://static.jidiandian.cn/upload/20190805/765653e6da01431797f31a5a8ccb2f46.png\",\"picUrls\":\"[\\\"https://static.jidiandian.cn/upload/20190805/c7508698ed844084a532ead82ce73ca5.png\\\"]\",\"picUrlList\":[\"https://static.jidiandian.cn/upload/20190805/c7508698ed844084a532ead82ce73ca5.png\"],\"picWidth\":0,\"picHeight\":0,\"redirectType\":13,\"platform\":255,\"minCversion\":3300,\"maxCversion\":0,\"userType\":255,\"startTime\":1564058011000,\"endTime\":1595606400000,\"sort\":3,\"adLabel\":0,\"updateTime\":1566571869000,\"adStyle\":0,\"multiUrl\":false,\"labelText\":\"\"},{\"id\":\"1154369632820260866\",\"adName\":\"魔法拍摄\",\"adTitle\":\"魔法拍摄\",\"type\":35,\"adPage\":1,\"picUrl\":\"https://static.jidiandian.cn/upload/20190805/ce6be6156f224e77a5a8e2c0de3277e9.png\",\"picUrls\":\"[\\\"https://static.jidiandian.cn/upload/20190805/eb950755435c4ea7bedaf6babf305eec.png\\\"]\",\"picUrlList\":[\"https://static.jidiandian.cn/upload/20190805/eb950755435c4ea7bedaf6babf305eec.png\"],\"picWidth\":0,\"picHeight\":0,\"redirectType\":14,\"platform\":255,\"minCversion\":3300,\"maxCversion\":0,\"userType\":255,\"startTime\":1564058293000,\"endTime\":1595606400000,\"sort\":2,\"adLabel\":0,\"updateTime\":1565012337000,\"adStyle\":0,\"multiUrl\":false,\"labelText\":\"\"},{\"id\":\"1164912036207788033\",\"adName\":\"卡点神器\",\"adTitle\":\"卡点神器\",\"type\":35,\"adPage\":1,\"picUrl\":\"https://static.jidiandian.cn/upload/20190823/5001982e199e4256a830bae9a6bcfe95.png\",\"picUrls\":\"[\\\"https://static.jidiandian.cn/upload/20190823/e8c58cf2ab4d437fbb124a2c36a3b34d.png\\\"]\",\"picUrlList\":[\"https://static.jidiandian.cn/upload/20190823/e8c58cf2ab4d437fbb124a2c36a3b34d.png\"],\"picWidth\":0,\"picHeight\":0,\"redirectType\":24,\"platform\":255,\"minCversion\":3500,\"maxCversion\":10000,\"userType\":255,\"startTime\":1566571548000,\"endTime\":1598112000000,\"sort\":1,\"adLabel\":0,\"updateTime\":1567148031000,\"adStyle\":0,\"multiUrl\":false,\"labelType\":0,\"labelText\":\"new\"}],\"gridVideos\":[{\"classifyId\":\"1167479953059442690\",\"classifyName\":\"推荐模版\",\"classifyType\":2,\"iconUrl\":null,\"showMore\":1,\"topicUrl\":\"https://static.jidiandian.cn/upload/20190831/a2dde25eec8340968ce860128347ef14.png\",\"topicColor\":null,\"name\":\"推荐模版\",\"describe\":\"小编真心推荐\",\"count\":5785231,\"videoTemplates\":[{\"id\":\"1171616518291779586\",\"idCode\":\"198591\",\"name\":\"野狼Disco\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190911/e695bc71ecf54e7f9cdf19dec6c9151e.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190911/bdb97febec6543d7b1314cf33962589a.JPG\",\"lockType\":0,\"visitCount\":1504758,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"150.4w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190911/bdb97febec6543d7b1314cf33962589a.JPG\",\"templateLockType\":0},{\"id\":\"1168781880838037505\",\"idCode\":\"568658\",\"name\":\"花好月圆\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190903/c81e9f537ffe40f594fdcf88d5110f3b.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190903/75a7d43b98114b12b244c4fbd4611644.jpg\",\"lockType\":0,\"visitCount\":3542353,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568097708000,\"visitCountStr\":\"354.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190903/75a7d43b98114b12b244c4fbd4611644.jpg\",\"templateLockType\":0},{\"id\":\"1169920418111430657\",\"idCode\":\"515033\",\"name\":\"遇见卡点\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190906/450eaf82c1274d2297de5d3664761a10.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190906/fbd4581e56744555be38533e2b09b2e5.JPG\",\"lockType\":0,\"visitCount\":1989144,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"198.9w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190906/fbd4581e56744555be38533e2b09b2e5.JPG\",\"templateLockType\":0},{\"id\":\"1169906120316297218\",\"idCode\":\"009417\",\"name\":\"嫦娥奔月\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190906/8d602ce74af746dead22b8fe08ba3676.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190906/c5f6f5914de34dfab0af1b9cd2bea006.jpg\",\"tag\":\"VIP\",\"lockType\":2,\"visitCount\":2322099,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568097742000,\"visitCountStr\":\"232.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190906/c5f6f5914de34dfab0af1b9cd2bea006.jpg\",\"templateLockType\":2},{\"id\":\"1171709595664707586\",\"idCode\":\"982320\",\"name\":\"虫虫Disco\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190911/6a9955a7943f4a91a7f0ed917bd9ddf2.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190911/130b362cb83a4ec8a38eb0cb95c66511.jpg\",\"lockType\":0,\"visitCount\":1913446,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"191.3w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190911/130b362cb83a4ec8a38eb0cb95c66511.jpg\",\"templateLockType\":0},{\"id\":\"1170988108339089410\",\"idCode\":\"581244\",\"name\":\"贴纸特效\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190909/17c1244f222f48e1b1d8457555550a35.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190909/5cb36704431e419e967299018690718c.jpg\",\"lockType\":0,\"visitCount\":661811,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"66.1w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190909/5cb36704431e419e967299018690718c.jpg\",\"templateLockType\":0}],\"ads\":[]}],\"squareVideos\":[{\"classifyId\":\"1167479953059442690\",\"classifyName\":\"热门主题 \uD83D\uDC2E\",\"name\":\"热门主题 \uD83D\uDC2E\",\"describe\":\"小编真心推荐\",\"videoTemplates\":[{\"id\":\"1169453639455178753\",\"idCode\":\"198591\",\"name\":\"Drops比心\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190911/e695bc71ecf54e7f9cdf19dec6c9151e.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190905/51b20ecc147644c48e4c021ff2d0e92c.jpg\",\"lockType\":0,\"visitCount\":1504758,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"150.4w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190905/51b20ecc147644c48e4c021ff2d0e92c.jpg\",\"templateLockType\":0},{\"id\":\"1164377849139015682\",\"idCode\":\"568658\",\"name\":\"三维空间\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190903/c81e9f537ffe40f594fdcf88d5110f3b.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190822/781795edb509411b9af1a8e9119db74e.jpg\",\"lockType\":0,\"visitCount\":3542353,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568097708000,\"visitCountStr\":\"354.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190822/781795edb509411b9af1a8e9119db74e.jpg\",\"templateLockType\":0},{\"id\":\"1169920418111430657\",\"idCode\":\"515033\",\"name\":\"遇见卡点\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190906/450eaf82c1274d2297de5d3664761a10.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190906/fbd4581e56744555be38533e2b09b2e5.JPG\",\"lockType\":0,\"visitCount\":1989144,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"198.9w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190906/fbd4581e56744555be38533e2b09b2e5.JPG\",\"templateLockType\":0},{\"id\":\"1169906120316297218\",\"idCode\":\"009417\",\"name\":\"嫦娥奔月\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190906/8d602ce74af746dead22b8fe08ba3676.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190906/c5f6f5914de34dfab0af1b9cd2bea006.jpg\",\"tag\":\"VIP\",\"lockType\":2,\"visitCount\":2322099,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568097742000,\"visitCountStr\":\"232.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190906/c5f6f5914de34dfab0af1b9cd2bea006.jpg\",\"templateLockType\":2},{\"id\":\"1171709595664707586\",\"idCode\":\"982320\",\"name\":\"虫虫Disco\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190911/6a9955a7943f4a91a7f0ed917bd9ddf2.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190911/130b362cb83a4ec8a38eb0cb95c66511.jpg\",\"lockType\":0,\"visitCount\":1913446,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"191.3w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190911/130b362cb83a4ec8a38eb0cb95c66511.jpg\",\"templateLockType\":0},{\"id\":\"1170988108339089410\",\"idCode\":\"581244\",\"name\":\"贴纸特效\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190909/17c1244f222f48e1b1d8457555550a35.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190909/5cb36704431e419e967299018690718c.jpg\",\"lockType\":0,\"visitCount\":661811,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"66.1w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190909/5cb36704431e419e967299018690718c.jpg\",\"templateLockType\":0}]}],\"rectangleVideos\":[{\"classifyId\":\"1167479953059442690\",\"classifyName\":\"图片主题 \uD83D\uDC2E\",\"name\":\"图片主题\",\"describe\":\"小编真心推荐\",\"videoTemplates\":[{\"id\":\"1169453639455178753\",\"idCode\":\"198591\",\"name\":\"Drops比心\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190911/e695bc71ecf54e7f9cdf19dec6c9151e.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190905/51b20ecc147644c48e4c021ff2d0e92c.jpg\",\"lockType\":0,\"visitCount\":1504758,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"150.4w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190905/51b20ecc147644c48e4c021ff2d0e92c.jpg\",\"templateLockType\":0},{\"id\":\"1164377849139015682\",\"idCode\":\"568658\",\"name\":\"三维空间\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190903/c81e9f537ffe40f594fdcf88d5110f3b.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190822/781795edb509411b9af1a8e9119db74e.jpg\",\"lockType\":0,\"visitCount\":3542353,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568097708000,\"visitCountStr\":\"354.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190822/781795edb509411b9af1a8e9119db74e.jpg\",\"templateLockType\":0},{\"id\":\"1169920418111430657\",\"idCode\":\"515033\",\"name\":\"遇见卡点\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190906/450eaf82c1274d2297de5d3664761a10.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190906/fbd4581e56744555be38533e2b09b2e5.JPG\",\"lockType\":0,\"visitCount\":1989144,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"198.9w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190906/fbd4581e56744555be38533e2b09b2e5.JPG\",\"templateLockType\":0},{\"id\":\"1169906120316297218\",\"idCode\":\"009417\",\"name\":\"嫦娥奔月\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190906/8d602ce74af746dead22b8fe08ba3676.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190906/c5f6f5914de34dfab0af1b9cd2bea006.jpg\",\"tag\":\"VIP\",\"lockType\":2,\"visitCount\":2322099,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568097742000,\"visitCountStr\":\"232.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190906/c5f6f5914de34dfab0af1b9cd2bea006.jpg\",\"templateLockType\":2},{\"id\":\"1171709595664707586\",\"idCode\":\"982320\",\"name\":\"虫虫Disco\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190911/6a9955a7943f4a91a7f0ed917bd9ddf2.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190911/130b362cb83a4ec8a38eb0cb95c66511.jpg\",\"lockType\":0,\"visitCount\":1913446,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"191.3w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190911/130b362cb83a4ec8a38eb0cb95c66511.jpg\",\"templateLockType\":0},{\"id\":\"1170988108339089410\",\"idCode\":\"581244\",\"name\":\"贴纸特效\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190909/17c1244f222f48e1b1d8457555550a35.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190909/5cb36704431e419e967299018690718c.jpg\",\"lockType\":0,\"visitCount\":661811,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"66.1w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190909/5cb36704431e419e967299018690718c.jpg\",\"templateLockType\":0}]}],\"banner_middle\":[{\"id\":\"1154369160805871617\",\"adName\":\"相册MV\",\"picUrl\":\"https://static.jidiandian.cn/upload/20190822/8c64af3416394301bb80fb2a5818c0aa.png\"}],\"videoTemplates\":[{\"id\":\"1171616518291779586\",\"idCode\":\"198591\",\"name\":\"野狼Disco\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190911/e695bc71ecf54e7f9cdf19dec6c9151e.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190911/bdb97febec6543d7b1314cf33962589a.JPG\",\"lockType\":0,\"visitCount\":1504758,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"150.4w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190911/bdb97febec6543d7b1314cf33962589a.JPG\",\"templateLockType\":0},{\"id\":\"1168781880838037505\",\"idCode\":\"568658\",\"name\":\"花好月圆\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190903/c81e9f537ffe40f594fdcf88d5110f3b.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190903/75a7d43b98114b12b244c4fbd4611644.jpg\",\"lockType\":0,\"visitCount\":3542353,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568097708000,\"visitCountStr\":\"354.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190903/75a7d43b98114b12b244c4fbd4611644.jpg\",\"templateLockType\":0},{\"id\":\"1169920418111430657\",\"idCode\":\"515033\",\"name\":\"遇见卡点\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190906/450eaf82c1274d2297de5d3664761a10.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190906/fbd4581e56744555be38533e2b09b2e5.JPG\",\"lockType\":0,\"visitCount\":1989144,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"198.9w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190906/fbd4581e56744555be38533e2b09b2e5.JPG\",\"templateLockType\":0},{\"id\":\"1169906120316297218\",\"idCode\":\"009417\",\"name\":\"嫦娥奔月\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190906/8d602ce74af746dead22b8fe08ba3676.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190906/c5f6f5914de34dfab0af1b9cd2bea006.jpg\",\"tag\":\"VIP\",\"lockType\":2,\"visitCount\":2322099,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568097742000,\"visitCountStr\":\"232.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190906/c5f6f5914de34dfab0af1b9cd2bea006.jpg\",\"templateLockType\":2},{\"id\":\"1171709595664707586\",\"idCode\":\"982320\",\"name\":\"虫虫Disco\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190911/6a9955a7943f4a91a7f0ed917bd9ddf2.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190911/130b362cb83a4ec8a38eb0cb95c66511.jpg\",\"lockType\":0,\"visitCount\":1913446,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"191.3w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190911/130b362cb83a4ec8a38eb0cb95c66511.jpg\",\"templateLockType\":0},{\"id\":\"1169067408057634818\",\"idCode\":\"849329\",\"name\":\"千里共婵娟\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190904/3fc34b9258274211bd46a9fbf8b6d634.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190904/65dd108b3b9f4f6093e8ef3d675745e7.jpg\",\"lockType\":0,\"visitCount\":2296591,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568017742000,\"visitCountStr\":\"229.6w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190904/65dd108b3b9f4f6093e8ef3d675745e7.jpg\",\"templateLockType\":0},{\"id\":\"1171626949366444033\",\"idCode\":\"992430\",\"name\":\"玉兔送祝福\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190911/08b7bfa954484909b0ea9a1dc707e8a8.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190911/e733755c2f1d4d45b9959997083b7127.jpg\",\"lockType\":0,\"visitCount\":2596303,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"259.6w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190911/e733755c2f1d4d45b9959997083b7127.jpg\",\"templateLockType\":0},{\"id\":\"1169182517979480066\",\"idCode\":\"185222\",\"name\":\"教师节快乐\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190904/9b81a7c5e6d64660ac9c4ee566fca628.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190904/e69c5d64e82f4393ba884e5b4697fe14.jpg\",\"lockType\":0,\"visitCount\":1571993,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567826547000,\"visitCountStr\":\"157.1w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190904/e69c5d64e82f4393ba884e5b4697fe14.jpg\",\"templateLockType\":0},{\"id\":\"1169891921234108417\",\"idCode\":\"398818\",\"name\":\"满天星河\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190906/d43b16dcc7254baa9669b84475672b2a.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190906/7ac4149bb56a4341b7382eccef6d69f7.png\",\"lockType\":0,\"visitCount\":4487885,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567916364000,\"visitCountStr\":\"448.7w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190906/7ac4149bb56a4341b7382eccef6d69f7.png\",\"templateLockType\":0},{\"id\":\"1169453639455178753\",\"idCode\":\"802373\",\"name\":\"Drops比心\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190905/87a433d72b424378901eb36bfceb2a19.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190905/51b20ecc147644c48e4c021ff2d0e92c.jpg\",\"lockType\":0,\"visitCount\":3236775,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567754394000,\"visitCountStr\":\"323.6w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190905/51b20ecc147644c48e4c021ff2d0e92c.jpg\",\"templateLockType\":0},{\"id\":\"1168845022272098305\",\"idCode\":\"109679\",\"name\":\"跑调快闪\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190903/3f2267552a6e492490fac3f34ca06a5d.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190903/6c8d870818524301ba242c8bd4ebfcfe.jpg\",\"lockType\":0,\"visitCount\":3656124,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567590003000,\"visitCountStr\":\"365.6w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190903/6c8d870818524301ba242c8bd4ebfcfe.jpg\",\"templateLockType\":0},{\"id\":\"1168767250459762690\",\"idCode\":\"377418\",\"name\":\"百因必有果\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190903/57f5921f52d84778b69f8128d7c97fc0.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190903/5b31d169883041078d2710e430bd1713.jpg\",\"lockType\":0,\"visitCount\":5774646,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567505576000,\"visitCountStr\":\"577.4w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190903/5b31d169883041078d2710e430bd1713.jpg\",\"templateLockType\":0},{\"id\":\"1168457718823067650\",\"idCode\":\"944140\",\"name\":\"呼吸快闪\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190902/1af08e18cdb942619fc1e4bdeaee87b9.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190902/eac7c0a7ea1e4b8f8738c263fc91e4bd.jpg\",\"lockType\":0,\"visitCount\":3302022,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567428885000,\"visitCountStr\":\"330.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190902/eac7c0a7ea1e4b8f8738c263fc91e4bd.jpg\",\"templateLockType\":0},{\"id\":\"1168461897700417537\",\"idCode\":\"708562\",\"name\":\"终于等到你\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190902/f1fde23412504cc596af4c076ddffb21.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190902/04a6e5650637481896ad2d765412b7a0.jpg\",\"tag\":\"VIP\",\"lockType\":2,\"visitCount\":2794809,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567428885000,\"visitCountStr\":\"279.4w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190902/04a6e5650637481896ad2d765412b7a0.jpg\",\"templateLockType\":2},{\"id\":\"1167333233004863490\",\"idCode\":\"504813\",\"name\":\"开学倒计时\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190830/dd678736098d40789c597089243bd3b2.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190903/15002ca54fad42628ba73b23977baac2.jpg\",\"lockType\":0,\"visitCount\":2566791,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567148905000,\"visitCountStr\":\"256.6w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190903/15002ca54fad42628ba73b23977baac2.jpg\",\"templateLockType\":0},{\"id\":\"1164377849139015682\",\"idCode\":\"318300\",\"name\":\"三维空间\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190822/03622bffeff94438bb3fc5d15218c728.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190822/781795edb509411b9af1a8e9119db74e.jpg\",\"tag\":\"\",\"lockType\":0,\"visitCount\":4154993,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"415.4w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190822/781795edb509411b9af1a8e9119db74e.jpg\",\"templateLockType\":0},{\"id\":\"1166342469521129474\",\"idCode\":\"948442\",\"name\":\"color卡点\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190827/881b7987c11f4a7093035b4aa65cdc40.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190827/0370e32b992047d5b505c8dcd1c6d4fd.jpg\",\"tag\":\"\",\"lockType\":0,\"visitCount\":7281270,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"728.1w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190827/0370e32b992047d5b505c8dcd1c6d4fd.jpg\",\"templateLockType\":0},{\"id\":\"1165830586078736385\",\"idCode\":\"839739\",\"name\":\"吓我一跳\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190826/986ce59e240442b28c8e79ada916a572.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190826/5dbaa505fab04b4ead7b1f57c6d220dd.JPG\",\"tag\":\"\",\"lockType\":0,\"visitCount\":10702016,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"1070.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190826/5dbaa505fab04b4ead7b1f57c6d220dd.JPG\",\"templateLockType\":0},{\"id\":\"1165095641530118146\",\"idCode\":\"997394\",\"name\":\"杂志风快闪\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190824/a0f41bd98259456baf484b1317b4d924.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190824/283644d51e8c4df58aef1a2c450294b9.png\",\"tag\":\"\",\"lockType\":0,\"visitCount\":3026894,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"302.6w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190824/283644d51e8c4df58aef1a2c450294b9.png\",\"templateLockType\":0},{\"id\":\"1165813564032823297\",\"idCode\":\"218185\",\"name\":\"出现又离开\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190826/79c3e5a611514fa3acd3996e9fea1343.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190826/76ddcb6b8f464e9f9af4376cd9fcbbf4.png\",\"tag\":\"\",\"lockType\":0,\"visitCount\":4964634,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"496.4w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190826/76ddcb6b8f464e9f9af4376cd9fcbbf4.png\",\"templateLockType\":0},{\"id\":\"1166348330297606145\",\"idCode\":\"037387\",\"name\":\"独角兽卡点\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190827/9d12f52179f6485c85968c24e9b94878.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190827/dd0fa271399548158574d1f74d09c2b2.jpg\",\"tag\":\"\",\"lockType\":0,\"visitCount\":6165127,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"616.5w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190827/dd0fa271399548158574d1f74d09c2b2.jpg\",\"templateLockType\":0},{\"id\":\"1165807837402771458\",\"idCode\":\"954233\",\"name\":\"Lutra快闪\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190826/34e756e370064dceb46e10d3bde3a0b3.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190826/e041f12d543a49619430eabcb61211f4.png\",\"tag\":\"\",\"lockType\":0,\"visitCount\":1484164,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"148.4w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190826/e041f12d543a49619430eabcb61211f4.png\",\"templateLockType\":0},{\"id\":\"1165824560193482754\",\"idCode\":\"461361\",\"name\":\"五年怎么过的\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190826/91f52e894e4c488eab74cc6a56cafafe.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190826/1966dada051d4a8bb2e5b5e29241717b.png\",\"tag\":\"\",\"lockType\":0,\"visitCount\":9005636,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"900.5w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190826/1966dada051d4a8bb2e5b5e29241717b.png\",\"templateLockType\":0},{\"id\":\"1165089586595115010\",\"idCode\":\"429365\",\"name\":\"月亮之上\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190824/a98328663c8c49f8a3a57800bee265fd.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190824/07a61f962faa474ea8ba2aedbccf3393.png\",\"tag\":\"\",\"lockType\":0,\"visitCount\":3735364,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"373.5w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190824/07a61f962faa474ea8ba2aedbccf3393.png\",\"templateLockType\":0},{\"id\":\"1143354155721695234\",\"idCode\":\"039760\",\"name\":\"我的秘密\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190625/b628e8afc2d44e6095e5783868a0fc26.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190625/5e5f502be2164d0685829f87c49b7208.jpg\",\"lockType\":0,\"visitCount\":7395153,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1561431848000,\"visitCountStr\":\"739.5w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"templateLockType\":0},{\"id\":\"1165869372720427010\",\"idCode\":\"839870\",\"name\":\"走火入魔\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190826/7dc6d75103ef4f20b2f96cb7d8cb2306.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190826/2a4a065c8114480ab35b55b77548e370.png\",\"tag\":\"\",\"lockType\":0,\"visitCount\":3859159,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"385.9w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190826/2a4a065c8114480ab35b55b77548e370.png\",\"templateLockType\":0},{\"id\":\"1166588643196944386\",\"idCode\":\"774080\",\"name\":\"攀登\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190828/afb6c98d8c4042d2b5a9e2331e01c186.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190828/2f03f660fe6940ec892528957ae3d750.jpg\",\"tag\":\"\",\"lockType\":0,\"visitCount\":3192535,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"319.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190828/2f03f660fe6940ec892528957ae3d750.jpg\",\"templateLockType\":0},{\"id\":\"1166341264619225089\",\"idCode\":\"813102\",\"name\":\"我想出去玩\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190827/c9523c750a3d42faa8b54cc3a1f77ac2.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190827/3fed20a4fba240bfbdc6ae026dc70058.jpg\",\"tag\":\"\",\"lockType\":0,\"visitCount\":3693147,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"369.3w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190827/3fed20a4fba240bfbdc6ae026dc70058.jpg\",\"templateLockType\":0},{\"id\":\"1143349130488324098\",\"idCode\":\"799791\",\"name\":\"三屏蝴蝶溶图\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190625/3a155bb565424e3891bd066576148cf1.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190625/61eec5187c124cc5ab949a3425d6cc1a.jpg\",\"tag\":\"VIP\",\"lockType\":2,\"visitCount\":3922908,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1561430650000,\"visitCountStr\":\"392.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"templateLockType\":2},{\"id\":\"1144089913919164417\",\"idCode\":\"409944\",\"name\":\"天青色等烟雨\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190627/2870a736e8ae4e74999ce8615a998457.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190627/3a9685bfb0e241ab83ab1023677ca3b0.jpg\",\"tag\":\"VIP\",\"lockType\":2,\"visitCount\":5806615,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"580.6w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"\",\"templateLockType\":2},{\"id\":\"1144090279096242178\",\"idCode\":\"403648\",\"name\":\"情深深雨蒙蒙\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190627/ec3d815f2e8c4e4a9e143b7792a72351.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190826/8704381920b34e11bf216a798647ef62.jpg\",\"tag\":\"VIP\",\"lockType\":2,\"visitCount\":2664672,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"266.4w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190826/8704381920b34e11bf216a798647ef62.jpg\",\"templateLockType\":2},{\"id\":\"1151051685083230210\",\"idCode\":\"847465\",\"name\":\"黑胶唱片播放器\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190716/97c37909c35e4fc1aa8620a5f52b3687.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190716/f7a6f3b400be4369893df481065c4358.png\",\"tag\":\"VIP\",\"lockType\":2,\"visitCount\":902443,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"90.2w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"\",\"templateLockType\":2},{\"id\":\"1165820386751950850\",\"idCode\":\"373988\",\"name\":\"我太难了\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190826/554e871f78604496b5f82eb3603f658a.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190826/0c52cad8402348328ec6d7e13f2489c3.JPG\",\"tag\":\"VIP\",\"lockType\":2,\"visitCount\":4744120,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"474.4w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190826/0c52cad8402348328ec6d7e13f2489c3.JPG\",\"templateLockType\":2},{\"id\":\"1140558278825267201\",\"idCode\":\"978237\",\"name\":\"咳咳，了解升级版\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190617/061e698070f545469dbc4d405cc5e16b.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190617/d3fa1cb9e88d4335a7fa5305b021c18c.jpg\",\"lockType\":0,\"visitCount\":1460385,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1560765259000,\"visitCountStr\":\"146w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"templateLockType\":0},{\"id\":\"1171364762290941953\",\"idCode\":\"930719\",\"name\":\"浪漫夜晚悬挂相册\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190910/6b7efbf5a00a4cfa89085fd0cdb4375a.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190911/a5a5700e82eb4d6f8ad951d5cdd0b749.jpg\",\"lockType\":0,\"visitCount\":223807,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"22.3w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190911/a5a5700e82eb4d6f8ad951d5cdd0b749.jpg\",\"templateLockType\":0},{\"id\":\"1171300555910475777\",\"idCode\":\"792592\",\"name\":\"我的秘密枪神卡点\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190910/2be660af9805433bb9fc20a6d2b1f8e5.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190910/619ec12e7f0542fba1a57998b60fb7b2.jpg\",\"lockType\":0,\"visitCount\":621526,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"62.1w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190910/619ec12e7f0542fba1a57998b60fb7b2.jpg\",\"templateLockType\":0},{\"id\":\"1170988108339089410\",\"idCode\":\"581244\",\"name\":\"贴纸特效\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190909/17c1244f222f48e1b1d8457555550a35.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190909/5cb36704431e419e967299018690718c.jpg\",\"lockType\":0,\"visitCount\":661811,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1568195949000,\"visitCountStr\":\"66.1w\",\"fixed\":0,\"latest\":true,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190909/5cb36704431e419e967299018690718c.jpg\",\"templateLockType\":0},{\"id\":\"1165818418335723522\",\"idCode\":\"066595\",\"name\":\"说爱你手指舞\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190826/b4afbdffdcd24fbca119f4b634c8a016.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190826/ce1bbff0df444b72b1ab9c91829ca773.png\",\"tag\":\"\",\"lockType\":0,\"visitCount\":6083080,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"608.3w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"https://static.jidiandian.cn/upload/20190826/ce1bbff0df444b72b1ab9c91829ca773.png\",\"templateLockType\":0},{\"id\":\"1140565460128026626\",\"idCode\":\"601147\",\"name\":\"甜蜜短信来袭\",\"videoUrl\":\"https://static.jidiandian.cn/upload/20190617/4d9b2bc6c8bc421ba71228fd2b427a92.mp4\",\"coverUrl\":\"https://static.jidiandian.cn/upload/20190617/ffc6009c122a499d92e30d4fa0ead153.png\",\"tag\":\"\",\"lockType\":0,\"visitCount\":27190586,\"templateType\":1,\"gifWidth\":544,\"gifHeight\":960,\"onlineTime\":1567128546000,\"visitCountStr\":\"2719w\",\"fixed\":0,\"latest\":false,\"itemType\":1,\"squareCoverUrl\":\"\",\"templateLockType\":0}]}}";
        HomeResponse response = new Gson().fromJson(json,HomeResponse.class);
        packageLocalData(response);
        adapter = new MyGridAdapter(data);
        adapter.bindToRecyclerView(recycle);
    }

    private void packageLocalData(HomeResponse response) {
        packageHeader(response);
        packageHotSubject(response);
        packageRecommend(response);
        packageBanner(response);
        packagePicSubject(response);
        packageLatestHot(response);
    }

    private void packageLatestHot(HomeResponse response) {
        packageTitle("最近热门");
        List<HomeResponse.DataBean.VideosBean.VideoTemplatesBean> videoTemplates = response.getData()
                .getVideoTemplates();
        for (int i = 0 ; i < videoTemplates.size(); i++){
            HomeListInfo latestInfo = new HomeListInfo();
            latestInfo.setCurrType(MyGridAdapter.ITEM_LATEST_HOT);
            latestInfo.setListIndex(i);
            latestInfo.setVideoTemplatesBean(videoTemplates.get(i));
            data.add(latestInfo);
        }
    }

    private void packagePicSubject(HomeResponse response) {
        List<HomeResponse.DataBean.VideosBean> rectangleVideos = response.getData().getRectangleVideos();
        for (HomeResponse.DataBean.VideosBean bean: rectangleVideos) {
            packageTitle(bean.getName());
            HomeListInfo picSubjectInfo = new HomeListInfo();
            picSubjectInfo.setCurrType(MyGridAdapter.ITEM_PIC_SUBJECT);
            picSubjectInfo.setRectangleVideos(bean.getVideoTemplates());
            data.add(picSubjectInfo);
        }
    }

    private void packageBanner(HomeResponse response) {
        HomeListInfo bannerInfo = new HomeListInfo();
        bannerInfo.setCurrType(MyGridAdapter.ITEM_BANNER_MIDDLE);
        bannerInfo.setMiddleBanner(response.getData().getBanner_middle());
        data.add(bannerInfo);
    }

    private void packageRecommend(HomeResponse response) {
        List<HomeResponse.DataBean.VideosBean> gridVideos = response.getData().getGridVideos();
        for (HomeResponse.DataBean.VideosBean bean: gridVideos) {
            packageTitle(bean.getName());
            for (int i = 0; i < bean.getVideoTemplates().size(); i++){
                HomeListInfo listInfo = new HomeListInfo();
                listInfo.setCurrType(MyGridAdapter.ITEM_RECOMMEND);
                listInfo.setListIndex(i);
                listInfo.setVideoTemplatesBean(bean.getVideoTemplates().get(i));
                data.add(listInfo);
            }
        }
    }

    private void packageTitle(String name) {
        HomeListInfo titleInfo = new HomeListInfo();
        titleInfo.setCurrType(MyGridAdapter.ITEM_TITLE);
        titleInfo.setTitle(name);
        data.add(titleInfo);

    }

    private void packageHotSubject(HomeResponse response) {
        HomeListInfo hotSubjectInfo = new HomeListInfo();
        List<HomeResponse.DataBean.VideosBean> squareVideos  = response.getData().getSquareVideos();
        for (HomeResponse.DataBean.VideosBean bean:squareVideos) {
            packageTitle(bean.getName());
            hotSubjectInfo.setSquareVideos(bean.getVideoTemplates());
        }
        hotSubjectInfo.setCurrType(MyGridAdapter.ITEM_HOT_SUBJECT);
        data.add(hotSubjectInfo);

    }

    private void packageHeader(HomeResponse response) {
        HomeListInfo headerInfo = new HomeListInfo();
        headerInfo.setMinorIconList(response.getData().getMinorIconList());
        headerInfo.setHeardBanner(response.getData().getBanner());
        headerInfo.setCurrType(MyGridAdapter.ITEM_HEADER);
        data.add(headerInfo);
    }

    private void initRecycle() {
        GridLayoutManager layoutManager = new GridLayoutManager(this,6);
        recycle.addItemDecoration(new HomeItemDecoration(
                        DisplayUtils.dp2px(8f),
                        DisplayUtils.dp2px(16f),
                        DisplayUtils.dp2px(16f)
                )
        );
        recycle.setLayoutManager(layoutManager);

    }

    private void initViews() {
       recycle = findViewById(R.id.recycle_main);
    }



}

4.在Adapter中根据不同的itemType进行逻辑处理

public class MyGridAdapter extends BaseMultiItemQuickAdapter<HomeListInfo, BaseViewHolder> {


    public static final int ITEM_HEADER = 1; // 头布局
    public static final int ITEM_HOT_SUBJECT = 2; // 热门主题
    public static final int ITEM_RECOMMEND = 3; // 推荐模板
    public static final int ITEM_BANNER_MIDDLE = 4; // 广告图
    public static final int ITEM_PIC_SUBJECT = 5; // 图片主题
    public static final int ITEM_LATEST_HOT = 6; // 最新热门
    public static final int ITEM_TITLE = 7; // 标题


    private int contentStyleWidth1 = (DisplayUtils.getScreenWidth() - DisplayUtils.dp2px(40f)) / 2;
    private int contentStyleWidth2 = (DisplayUtils.getScreenWidth() - DisplayUtils.dp2px(48f)) / 3;

    /**
     * Same as QuickAdapter#QuickAdapter(Context,int) but with
     * some initialization data.
     *
     * @param data A new list is created out of this one to avoid mutable list
     */
    public MyGridAdapter(List<HomeListInfo> data) {
        super(data);
        init();
    }

    private void init() {
        addItemType(ITEM_HEADER, R.layout.item_grid_header);
        addItemType(ITEM_HOT_SUBJECT, R.layout.item_grid_hot_subbject);
        addItemType(ITEM_TITLE, R.layout.item_type_title);
        addItemType(ITEM_RECOMMEND, R.layout.item_grid_recommond_moban);
        addItemType(ITEM_BANNER_MIDDLE, R.layout.item_type_banner);
        addItemType(ITEM_PIC_SUBJECT, R.layout.item_grid_pic_subject);
        addItemType(ITEM_LATEST_HOT, R.layout.item_grid_latest_hot);

    }

    {
        setSpanSizeLookup(new SpanSizeLookup() {
            @Override
            public int getSpanSize(GridLayoutManager gridLayoutManager, int position) {
                // 指定item所占的列数 = return的数字
                // 总列数设置的是6，如果返回6，表示希望这个item占6列， 那就是占满一行了
                // 总列数设置的是6，如果返回2，表示希望这个item占2列， 那就是一行显示3个
                int type = getItemViewType(position);
                if (type == ITEM_HEADER || type == ITEM_HOT_SUBJECT || type == ITEM_TITLE ||
                        type == ITEM_BANNER_MIDDLE || type == ITEM_PIC_SUBJECT) {
                    return 6;
                } else if (type == ITEM_RECOMMEND) {
                    return 2;
                } else if (type == ITEM_LATEST_HOT) {
                    return 3;
                }
                return 0;

            }
        });
    }

    @Override
    protected void convert(BaseViewHolder helper, HomeListInfo item) {
        switch (item.getItemType()) {
            case ITEM_TITLE:
                helper.setText(R.id.tv_title, item.getTitle());

                break;

            case ITEM_HEADER:
                XBanner bannerView = helper.getView(R.id.xbanner);
                bannerView.setBannerData(item.getHeardBanner());
                bannerView.loadImage(new XBanner.XBannerAdapter() {
                    @SuppressLint("CheckResult")
                    @Override
                    public void loadBanner(XBanner banner, Object model, View view, int position) {
                        Glide.with(mContext).
                                load(item.getHeardBanner().get(position).getPicUrl())
                                .apply(ImageOptionUtils.getRoundOptions(DisplayUtils.dp2px(8f)))
                                .into((ImageView) view);
                    }
                });


                RecyclerView rv_head_list = helper.getView(R.id.rv_head_list);
                // 为了防止复用的问题产生的距离偏差，需要判断Recyclerview的adapter
                if (rv_head_list.getAdapter() == null || !(rv_head_list.getAdapter() instanceof HomeHeaderIconAdapter)) {
                    rv_head_list.addItemDecoration(new HomeSortItemDecoration(0, DisplayUtils.dp2px(8f), DisplayUtils.dp2px(8f)));
                    rv_head_list.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false));
                    HomeHeaderIconAdapter iconAdapter = new HomeHeaderIconAdapter(R.layout.item_icon, item.getMinorIconList());
                    iconAdapter.bindToRecyclerView(rv_head_list);

                } else {
                    ((HomeHeaderIconAdapter) rv_head_list.getAdapter()).setNewData(item.getMinorIconList());
                }

                break;


            case ITEM_HOT_SUBJECT:
                RecyclerView recycle_hot_subject = helper.getView(R.id.recycle_hot_subject);
                // 为了防止复用的问题产生的距离偏差，需要判断Recyclerview的adapter
                if (recycle_hot_subject.getAdapter() == null || !(recycle_hot_subject.getAdapter() instanceof HomeHotSubjectAdapter)) {
                    recycle_hot_subject.addItemDecoration(new HomeSortItemDecoration(DisplayUtils.dp2px(8f), DisplayUtils.dp2px(16f), DisplayUtils.dp2px(16f)));
                    recycle_hot_subject.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false));
                    HomeHotSubjectAdapter homeHotSubjectAdapter = new HomeHotSubjectAdapter(R.layout.item_content_2, item.getSquareVideos());
                    homeHotSubjectAdapter.bindToRecyclerView(recycle_hot_subject);

                } else {
                    ((HomeHotSubjectAdapter) recycle_hot_subject.getAdapter()).setNewData(item.getSquareVideos());
                }


                break;

            case ITEM_RECOMMEND: // 相当于一个普通GridLayout中的item,只是width不同，列数不同
                ViewGroup.LayoutParams layoutParams = helper.getView(R.id.iv_cover).getLayoutParams();
                layoutParams.width = contentStyleWidth2;
                helper.getView(R.id.iv_cover).setLayoutParams(layoutParams);

                helper.setText(R.id.tv_title, item.getVideoTemplatesBean().getName());
                Glide.with(mContext).
                        load(item.getVideoTemplatesBean().getCoverUrl())
                        .apply(ImageOptionUtils.getRoundOptions(DisplayUtils.dp2px(8f)))
                        .into((ImageView) helper.getView(R.id.iv_cover));


            case ITEM_LATEST_HOT: // 相当于一个普通GridLayout中的item,只是width不同，列数不同
                ImageView imageView = helper.getView(R.id.iv_cover_latest);
                if (imageView != null){
                    ViewGroup.LayoutParams latestParams = imageView.getLayoutParams();
                    latestParams.width = contentStyleWidth1;
                    helper.getView(R.id.iv_cover_latest).setLayoutParams(latestParams);
                    helper.setText(R.id.tv_title_latest, item.getVideoTemplatesBean().getName());
                    Glide.with(mContext).
                            load(item.getVideoTemplatesBean().getCoverUrl())
                            .apply(ImageOptionUtils.getRoundOptions(DisplayUtils.dp2px(8f)))
                            .into((ImageView) helper.getView(R.id.iv_cover_latest));
                }

                break;

            case ITEM_BANNER_MIDDLE:
                XBanner middleBanner = helper.getView(R.id.xbanner);
                middleBanner.setBannerData(item.getMiddleBanner());
                middleBanner.loadImage(new XBanner.XBannerAdapter() {
                    @SuppressLint("CheckResult")
                    @Override
                    public void loadBanner(XBanner banner, Object model, View view, int position) {
                        Glide.with(mContext).
                                load(item.getMiddleBanner().get(position).getPicUrl())
                                .apply(ImageOptionUtils.getRoundOptions(DisplayUtils.dp2px(8f)))
                                .into((ImageView) view);
                    }
                });

                break;

            case ITEM_PIC_SUBJECT:
                RecyclerView recycle_pic_subject = helper.getView(R.id.recycle_pic_subject);
                if (recycle_pic_subject.getAdapter() == null) {
                    recycle_pic_subject.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false));
                    recycle_pic_subject.addItemDecoration(new HomeSortItemDecoration(DisplayUtils.dp2px(8f),
                            DisplayUtils.dp2px(16f), DisplayUtils.dp2px(16f)));
                    HomePicSubjectAdapter homePicSubjectAdapter = new HomePicSubjectAdapter(R.layout.item_content_1, item.getRectangleVideos());
                    homePicSubjectAdapter.bindToRecyclerView(recycle_pic_subject);

                } else {
                    ((HomePicSubjectAdapter) recycle_pic_subject.getAdapter()).setNewData(item.getRectangleVideos());
                }

                break;
        }


    }
}

参考Demo

https://github.com/laishujie/HomeDemo

goodness-欢

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
Android RecycleView + GridLayoutManager 实现一个复杂的布局

效果图要实现这么一个布局有很多种方式，这里介绍一个Recyclerview+GridLayoutManager多布局的方法来实现。思路1.首先要明白整体的一个布局结构，从上到下分别为：轮播图的头布局，热门主题，推荐模板，广告图，图片主题，最近热门。所以我们可以设置几个type对应不同的布局。 public static final int ITEM_HEADER = 1; // 头布局 public static final int ITEM_HOT_SUBJECT = 2; //
复制链接

扫一扫

专栏目录