一個RecyclerView實現QQ空間相冊佈局

這裏寫圖片描述

看到這佈局自然會想到用RecyclerView來做,用ItemDecoration繪製日期那條分割線,每行3列的GridLayoutManager
但是有個問題,如果不是正好3列、怎麼去控制末尾的留白呢?

我的實現思路是這樣的:

GridLayoutManager中有個setSpanSizeLookup方法,getSpanSize返回值就是控制每行有幾列的

 gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                return setSpanSize(position, mAdapter.getDatas());
            }
        });

不瞭解的可以轉至RecyclerView通過GridLayoutManager實現多樣式佈局

採用了setSpanSizeLookup方法

也就是說使用該方法我可以控制每一行的列數、只要我再控制其長度就OK了

在數據實體中添加一個value、用來記錄當前圖片和前面差了幾個空白,從而確定留白的距離

 private int setSpanSize(int position, List<AlbumBean> listEntities) {
        int count;
        int d;
        if ((position + 1 < listEntities.size()) && position > 0) {
            if (!listEntities.get(position).getSubId().equals(listEntities.get(position + 1).getSubId())) {
                mAdapter.getItem(position + 1).value = 2 - (mAdapter.getItem(position).value + position) % 3 
                                                       + mAdapter.getItem(position).value;
                d = 2 - (mAdapter.getItem(position).value + position) % 3;
                if (d == 2) {
                    count = 3;
                } else if (d == 1) {
                    count = 2;
                } else {
                    count = 1;
                }
            } else {
                mAdapter.getItem(position + 1).value = mAdapter.getItem(position).value;
                count = 1;
            }
        } else if (position == 0) {
            if (mAdapter.getDatas().size() > 1) {
                if ((!listEntities.get(position).getSubId().equals(listEntities.get(position + 1).getSubId()))) {
                    mAdapter.getItem(1).value = 2;
                    count = 3;
                } else {
                    count = 1;
                    mAdapter.getItem(1).value = 0;
                }
            } else {
                count = 1;
            }
        } else {
            count = 1;
        }
        return count;
    }

完成效果:

完成效果圖


Github地址:https://github.com/forvv231
安裝包下載:https://fir.im/QQAlbum

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章