RecyclerView实现瀑布流的各种坑

RecyclerView 实现瀑布流,关键是用StaggeredGridLayoutManager这个类。原以为很简单,用了之后才发现有很多的问题。

  • item乱跳
  • 滑动时有空白出现
  • 如果item高度不固定得时候,item内容不变的时候,可能出现同一个item高度可能会出现不同的值

1. item乱跳问题

StaggeredGridLayoutManager设置空隙处理方式为 不处理。

setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE)

2.滑动空白的问题

设置了StaggeredGridLayoutManager不处理空白之后,发现反复滑动列表时,顶部item上边会出现空白。网络很多都是讲 监听onScrollListener,然后调用

invalidateSpanAssignments();

这个方法会重绘视图,在scroll中调用会显得非常频繁,然后引起界面卡顿,滑动不流畅等问题。

本人优化了一下,在OnScrollStateChange方法中,但列表处于SCROLL_STATE_IDLE的时候才去调用这个方法,感觉卡顿方面好很多,但是偶尔还是会出现顶部空白的现象。所以这个不能从根本上解决问题,充其量算是一种弥补之法。

其实产生这个问题的根本原因在于Item的高度,尤其是高度设置为 wrap_content这种不固定的状态。

有很多人包括网上都说用map保存item的高度,尤其是当图片瀑布流不知道图片大小的时候,第一次保存起来,后面就直接从map里取值然后设置对应控件的高度。本人尝试之后,发现表面上看起来好像能解决问题,但是StaggeredGridLayoutManager布局跟其他的布局有点不一样的地方就是 横向的 item对应的position不确定,并不是像GridLayout那种从上到下,从左至右,position依次递增。假如列表为2列,那么有可能第二行的左边的position是2,右边是3。当你反复滑动几次之后,其实就是notiftyDataChanged几次之后,有可能会发现第二行的左边是3,右边是2。所以保存高度这种方式也不是很靠谱。

折腾了两天之后,万般无赖之下,发现只有从接口传回的图片数据带上原始宽高,才能完美解决问题。

在已经图片高度的情况下,一切都好办了,根据屏幕宽度计算出固定的item宽度,然后对原始图片进行等比缩放高度,然后在onBindViewHolder中设置动态设置ImageView 的高度就好了,这时候也不用map保存什么,也不需要调用invalidateSpanAssignments方法去重绘,因为已经不会出现空白了。

3.RecyclerView设置item间隔问题

刚才已经提到,StaggeredGridLayoutManager不能根据item 的 position来判断一个item是靠在左边还是右边。所以之间定义的SpaceItemDecoration不能用了,现在的解决办法是 定义一个简单的SpaceItemDecoration,代码如下:

public class SpaceItemDecoration extends RecyclerView.ItemDecoration {

    private int spanCount;
    private int space;
    private boolean includeEdge;


    public SpaceItemDecoration(int spanCount, int space) {
        this.spanCount = spanCount;
        this.space = space;

    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildAdapterPosition(view); // item position
        outRect.left = space;
        outRect.right = space;
        if(position!=0 && position!=1){
            outRect.top = 2*space;
        }else{
            outRect.top = space;
        }


    }
}

这样会发现两列中间的间隔是 边缘的两倍。我的解决办法是 给RecyclerView设置一定的padding,让视图看起来,四周,中间 的间隔看起来都一样大。相当于SpaceItemDecoration,不够,还需RecyclerView补一刀。

当然网上也有人用变量把Item是左边还是右边这种数据存起来,我觉的有点麻烦,而且第一次布局怎么办。或许还有更好更完美的办法等着我们去发现。

4.上拉加载问题

因为StaggeredGridLayoutManager 布局item 的position特殊性,就连findLastVisibleItemPositions方法的参数和返回值都不一样,这个是返回一个position 数组。废话不多说,本人自定义了一个StaggerRecyclerView专门针对StaggeredGridLayoutManager布局。代码如下:

public class StaggerRecyclerView extends RecyclerView {

    private OnLoadMoreListener onLoadMoreListener;
    private boolean isLoadingMore = false;
    private static final int TOLAST = 6;

    public StaggerRecyclerView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.addOnScrollListener(new OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                StaggeredGridLayoutManager layoutManager = null ;
                if(recyclerView.getLayoutManager() instanceof StaggeredGridLayoutManager){
                    layoutManager = (StaggeredGridLayoutManager) recyclerView.getLayoutManager();
                }else{
                    return;
                }
                int[] positions = null;
                int[] into = layoutManager.findLastCompletelyVisibleItemPositions(positions);
                int lastPositon = Math.max(into[0],into[1]);
                for(int i = 0;i<into.length;i++){
                    Log.d("home","lastPositon ="+lastPositon +" | itemcount ="+layoutManager.getItemCount()+" | dx = "+dx+" | dy = "+dy);
                }

                if(!isLoadingMore && dy>0 && layoutManager.getItemCount()-lastPositon<=TOLAST){
                    //load more
                    isLoadingMore = true;
                    if(onLoadMoreListener!=null){
                        onLoadMoreListener.onLoadMore();
                    }

                }
            }
        });
    }

    public void setOnLoadMoreListener(OnLoadMoreListener onLoadMoreListener) {
        this.onLoadMoreListener = onLoadMoreListener;
    }

    public void setLoadingMoreComplete(){
        isLoadingMore = false;
    }

    public  interface OnLoadMoreListener{
        void onLoadMore();
    }

    
}

其中 TOLAST是我定义的一个常亮,主要是决定什么时候开始加载,数字越大越提前加载,它表示提前几个item去加载。相对于最后一个而言。往往当我们上拉的时候,如果等到最后一个item可见的时候才去加载,可能会因为加载需要时间,造成短暂的停留,体验不好。瀑布流嘛,最好让用户感知不到你的加载动作,让他能一直顺畅的滑下去。

总结一点:实现瀑布流最关键的就是高度问题,完美的解决方案就是传回图片的时候顺便把高度也传回来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容