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

最新推荐文章于 2024-08-12 09:01:07 发布
最新推荐文章于 2024-08-12 09:01:07 发布
阅读量3.6k 收藏 14
点赞数 2
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013467495/article/details/108797820
版权

效果图

在这里插入图片描述

要实现这么一个布局有很多种方式，这里介绍一个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-欢
关注
专栏目录
android gridlayout 边框,RecyclerView通过GridLayoutManager实现多样式布局
weixin_42468413的博客
05-26 1672
一、开篇距离上次写文章已经有段时间了，说实话真不知道最近在忙些什么，现在沉下心来把最近项目中遇到的问题记录下来便于以后遇到中使用吧！废话不多说，先看一下效果图Paste_Image.png二、需求解析1、先说下项目需求，不管是好评还是差评下边的Tag标签有不同的展示类型，有的字数多的会单独占一行处理(这边其实也可以扩充，比如说两三个字的可以一行显示三个Tag标签)，第一眼看到这个需求准备使用网上的...
一个简单的 Recycleview + GridLayoutManager 显示图片的例子
金戈铁马
10-21 727
显示效果 Recycleview XML 布局文件 （该文件内容有省略） <android.support.v7.widget.RecyclerView android:id="@+id/recycleview" android:paddingLeft="18dp" android:paddingRight="18dp" android:layout_width="match.
分布式网格布局管理器：SpannedGridLayoutManager
最新发布
gitblog_00265的博客
08-12 371
分布式网格布局管理器：SpannedGridLayoutManager SpannedGridLayoutManagerAndroid RecyclerView.LayoutManager that resizes and reorders views based on SpanSize项目地址:https://gitcode.com/gh_mirrors/sp/SpannedGridLayou...
RecyclerView通过GridLayoutManager实现多样式布局的示例
01-05
一、开篇 距离上次写文章已经有段时间了，说实话真不知道最近在忙些什么，现在沉下心来把最近项目中遇到的问题记录下来便于以后遇到中使用吧！ 废话不多说，先看一下效果图 二、需求解析 1、先说下项目需求，不管是好评还是差评下边的Tag标签有不同的展示类型，有的字数多的会单独占一行处理（这边其实也可以扩充，比如说两三个字的可以一行显示三个Tag标签），第一眼看到这个需求准备使用网上的开源库TagLayout去实现，但是尝试了一下后发现其实他们实现的效果同项目要的效果还是有蛮大差距的，可以看到效果图里边是要求文字是居中对齐的，左右对称的。 2、想到使用GridView实现这个功能，定义adap
android开发游记：RecycleView 实现复杂首页布局三种方式
热门推荐
liaoinstan的博客
09-26 4万+
做过电商类应用的朋友可能都会遇到一个比较头疼的问题：复杂的首页布局如何实现。参考百度糯米，美团，bilibili等应用，都会发现其首页的布局相对复杂，例如下图bilibili的首页（第二张是demo实现的效果图），可以看到在同一个页面中先是有列表布局出现，然后出现了2列的网格布局，接着3列的网格布局，最后还出现了瀑布流式布局： 这样的效果该怎么做呢？是使用LinearLayoutManager、Gr
recyclerView + GridLayoutManager 实现任意网格布局+拖拽排序
lxlmycsdnfree的博客
05-21 2864
uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>uses-permission android:name="android.permission.IN
RecyclerView中利用GridLayoutManager实现item四周都带有分割线效果(更正版!!!)
12-02
首先感谢博客里面评论的朋友们，修复了布局中recyclerview设置了padding，但是代码中没考虑进去的bug 博客链接：http://blog.csdn.net/abfo12
Android RecyclerView 多布局与混排
qq_24429935的博客
07-05 709
多布局   关于RecyclerView的基本用法参考下面三篇博客：  Android RecyclerView之代替ListView与GridView  Android RecyclerView之添加Item分割线  Android RecyclerView 的瀑布流式布局 多布局思路： 利用Adapter的getItemViewType()方法返回不同的ViewTyp
Android RecyclerView使用GridLayoutManager间距设置的方法
08-28
在Android开发中，RecyclerView是一个非常重要的组件，它用于展示可滚动的数据列表，具有高效和灵活的特性。在设计用户界面时，我们往往需要为列表项添加适当的间距，以提升用户体验和视觉美感。对于使用...
Android开发：使用RecyclerView+GridLayout实现滑动网格布局效果
shuaibiaoshishen的博客
07-21 3191
在实际开发中，我们很可能会遇到将许多功能已小图标的形式来展示给用户，因此需要将功能罗列出来。但是，如果只是单纯的网格布局的话，可能会导致占领过多的屏幕，影响到其他数据的展示。因此，我们应该做成滑动网格的效果。这里我们以美团为例，如下图。 美团的的中间多个小功能区可以横向滑动，所以我们考虑RecyclerView来实现这个效果。同时，内部数据已网格展现，因此我们可以考虑是不是能把GridLayout放入RecyclerView中实现效果。接下来我们就开始尝试一下。 ...
RecycleView 实现复杂首页布局
02-27
在这个项目中，你可能已经创建了一个自定义的 Adapter 和 LayoutManager，实现了公司首页的复杂布局。你可以检查源码，学习如何处理不同视图类型、数据绑定以及布局计算等细节。 总结： RecycleView 是 Android ...
不一样的RecyclerView优雅实现复杂列表布局（二）
向着太阳迎着光
03-14 5420
前言学习了（一）中那个RecyclerView的一些基础知识，如果没有具体看懂可以再返回看不一样的RecyclerView优雅实现复杂列表布局（一），那么接下来我们就在（一）的基础之上，完善稍微复杂一点数据处理。不一样的RecyclerView优雅实现复杂列表布局（二）中使用的是GridLayoutManager模式，实现混合使用的效果： 1.首先加载的数据要有所改变，多种形式的数据加载，在Mai
gridlayoutmanager实现多样式布局_RecyclerView实现可拖拽的gridview
weixin_39669701的博客
12-27 482
RecyclerView功能强大，而且性能优秀。RecyclerView实现了控件的复用机制。RecyclerView可以实现多种布局，比如类似于Listview或者GridView的布局都可以实现。 本文就来实现类似于Gridview的布局并实现拖拽功能。 布局中添加recyclerviewlayout manager选择GridLayoutManager以上即可实现gridlayout...
RecyclerView使用GridLayoutManager 通过ItemDecoration对item进行等分分隔
lifs419的博客
07-01 4058
public class GridItemDecoration extends RecyclerView.ItemDecoration { protected int mSpace = 10; private boolean mIncludeEdge = true; public GridItemDecoration(int space) { this...
Android 使用RecyclerView实现多列布局及其优劣
baiiu
06-21 3万+
前言记录一下之前写的一个多列布局，经常用于筛选条件中，比如这样：这是一个4列数据和1列数据交错下的多列布局。之前我们写的时候用ScrollView包裹两个TextView作为Title，又包裹两个GridView作为4列数据，同时还要处理ScrollView和GridView的冲突(虽然很简单)。 现在可以直接使用RecyclerView一个布局来实现。接下来先介绍如何实现，再对比和之前实现方式优
Android开发 RecyclerView的GridLayoutManager入门了解
weixin_42504805的博客
11-03 5275
Android开发 RecyclerView的GridLayoutManager 换行入门了解
android RecyclerView实现ListView和GridView混合的效果。
sziitjin的博客
05-11 1921
如何实现ListView和GridView混合的效果，效果图： 一、可以使用以下方式： 1、以往的方式 1）使用ListView内嵌GridView。 2、RecycleView 1）使用单个RecycleView。 2）使用RecycleView内嵌RecycleView。 二、使用单个RecycleView。 1、如下图，由于使用一个RecycleView，我们可以把每个一红矩形看成一个item,那么就会有item1（标题）占整个屏幕的宽度，item2（内容）占屏幕的宽度的1/3。
分享一个RecyclerView多布局展示效果，GridLayoutManager每列下添加一个view
qq_34468274的博客
04-19 1976
先看效果 思路 后台返回数据是一个json字符串，看到这个效果第一反应就是用RCV的GridLayoutManager，但中间的那个view是无法正常添加上去 ， 1.这里采用setSpanSizeLookup计算出自定义view显示全屏 2.在数据中添加假数据进行填充list 3.使用多布局进行展示自定义view和普通的view 4.点击view计算出需要展示第几个it...
Android recyclerView 实现复杂的item布局（如淘宝、京东、商城类首页）
吕氏春秋i
07-31 1万+
现在各种电商如火如荼，首页页面设计也颇有色彩。之前项目也是一个电商类购物app，主页设计了好几套样式 其中一个样式如下图相似涉及到： 轮播广告图banner、viewPager的轮播、沉浸式、item的复杂分割线、以及自定义的 主页头条ViewFlipper使用、glide图片加载、其他的琐碎知识点也略有涉及到。 先看下Gif效果图： 再下引用的第三方控件： //banne...
android使用BottomShee+RecycleView 实现抖音评论收起
03-27
要实现抖音评论收起功能，可以使用以下步骤： 1. 在布局文件中添加BottomSheet和RecycleView。 2. 创建一个Adapter类来处理RecycleView的数据和布局。 3. 在Adapter中，添加一个方法用于控制评论的展开和收起。 4. 在Activity中，将Adapter设置给RecycleView，并在点击收起按钮时调用Adapter中的方法。 5. 在BottomSheet的回调函数中，设置BottomSheet的高度为RecycleView的高度。 以下是示例代码： 1. 布局文件 ``` <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 底部弹出的BottomSheet --> <com.google.android.material.bottomsheet.BottomSheetBehavior android:id="@+id/bottom_sheet" android:layout_width="match_parent" android:layout_height="wrap_content" app:behavior_hideable="true" app:behavior_peekHeight="0dp" app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.bottomsheet.BottomSheetBehavior> </androidx.coordinatorlayout.widget.CoordinatorLayout> ``` 2. Adapter类 ``` public class CommentAdapter extends RecyclerView.Adapter<CommentAdapter.CommentViewHolder> { private List<Comment> commentList; private boolean isExpanded = false; public CommentAdapter(List<Comment> commentList) { this.commentList = commentList; } @NonNull @Override public CommentViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_comment, parent, false); return new CommentViewHolder(view); } @Override public void onBindViewHolder(@NonNull CommentViewHolder holder, int position) { Comment comment = commentList.get(position); holder.tvComment.setText(comment.getCommentText()); } @Override public int getItemCount() { if (isExpanded) { return commentList.size(); } else { return Math.min(commentList.size(), 2); // 只显示前两条评论 } } public void expandComments() { isExpanded = true; notifyDataSetChanged(); } static class CommentViewHolder extends RecyclerView.ViewHolder { TextView tvComment; CommentViewHolder(View itemView) { super(itemView); tvComment = itemView.findViewById(R.id.tv_comment); } } } ``` 3. Activity代码 ``` public class MainActivity extends AppCompatActivity { private CommentAdapter commentAdapter; private BottomSheetBehavior bottomSheetBehavior; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); RecyclerView recyclerView = findViewById(R.id.recyclerView); recyclerView.setLayoutManager(new LinearLayoutManager(this)); List<Comment> commentList = generateDummyComments(); commentAdapter = new CommentAdapter(commentList); recyclerView.setAdapter(commentAdapter); Button btnCollapse = findViewById(R.id.btn_collapse); btnCollapse.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { commentAdapter.expandComments(); } }); // 获取BottomSheetBehavior实例 View bottomSheet = findViewById(R.id.bottom_sheet); bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet); bottomSheetBehavior.setPeekHeight(0); bottomSheetBehavior.setHideable(true); bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() { @Override public void onStateChanged(@NonNull View bottomSheet, int newState) { if (newState == BottomSheetBehavior.STATE_HIDDEN) { finish(); } } @Override public void onSlide(@NonNull View bottomSheet, float slideOffset) { // 设置BottomSheet的高度为RecycleView的高度 View recyclerView = bottomSheet.findViewById(R.id.recyclerView); ViewGroup.LayoutParams layoutParams = bottomSheet.getLayoutParams(); layoutParams.height = (int) (recyclerView.getHeight() * (1 - slideOffset)); bottomSheet.setLayoutParams(layoutParams); } }); } private List<Comment> generateDummyComments() { List<Comment> commentList = new ArrayList<>(); for (int i = 0; i < 10; i++) { Comment comment = new Comment("这是第" + (i + 1) + "条评论"); commentList.add(comment); } return commentList; } } ``` 这样就可以实现抖音评论收起功能了。当点击收起按钮时，RecycleView会展开显示所有评论；当底部弹出的BottomSheet向上滑动时，会动态改变BottomSheet的高度，实现平滑的动画效果。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值