说起来也是一个很久之前的问题了。那个时候还是在 17 年吧,六月份就要毕业,在做面试的项目,其中有一个功能用到了瀑布流来显示妹子图。那时候就遇到了一些问题,但是那时候确实什么都不懂,搞了很久,有些问题还是没有解决。这个月到了月底,临近放假了,也没有什么事情,就开始倒腾以前的项目,发现了这个问题。其中也是花了一点时间,踩了一些坑。在此记录一下。

主要的思路

主要的思路就是通过 RecyclerView 来做,通过设置 StaggeredGridLayoutManagerlayoutManager 来实现瀑布流的效果。

遇到的问题

问题就是,列表图片加载的时候会闪烁,跳动,换位这几个问题。滑动之后也同样会出现这几个问题。那时候确实什么都不懂,就上网查,把各种方法都试一遍,还是不行。也分析不出问题,或者说还没有分析这个问题的能力。

其中踩到的坑

瀑布流的问题,在网上还是挺多资料的。

说的最多的就是 layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE); 这个方法,之前也不懂,反正大家都说这个可以解决(当然也有很多人说这个没什么作用),现在翻了一下源码的注释,大概了解了,就是因为瀑布流布局的特殊性,可能会有一些间隙,可以通过这个 api 设置 item 间隔的处理方式,有两个参数可以选择 GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANSGAP_HANDLING_NONE

GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS:当滑动空闲时,也就是 SCROLL_STATE_IDLE 这个状态下时,会去检查 item 之间有没有间隙,如果有就调整 item 的位置,并使用动画的过度效果。

GAP_HANDLING_NONE:不去处理这个间隙。

设置了这个 layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE); 之后,确实不会跳动了,但是带来了另一个问题,就是既然不调整 item 的位置去填补这个空隙,就会有空隙,而这个空隙有多大呢?看图:

image

image

没错,看到的就是这个样子,整个布局就乱七八糟的了。

网上的大神很多,此记不成,再生一记!

layoutManager.invalidateSpanAssignments()StaggeredGridLayoutManager 是会保持 item 和 span(其实我不是很理解这个东西要怎么理解) 的映射,如果要刷新这个映射就可以调用这个方法。

这个方法在什么时候调用呢?在滑动的时候。

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
        //刷新
        layoutManager.invalidateSpanAssignments();
    }
});

但是单纯调这个方法,没什么卵用,而且布局会变得更乱,所以这个方法是在 上面layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE)的基础上,在使用这个东西。

虽然,跳动的情况好了一些,还是不理想,而且还会出现另一个问题,就是滑动到顶部会发现,顶部的 item 会有偏移的情况,然后拉到顶,就会刷新一下,调换位置了。。。。。

image

问题的根源

其实问题的根源就是图片的高度不固定,这不废话嘛,瀑布流的高度本来就不是固定的。。。

或者换种说法,你听起来或者就更明白一些了。就是图片的高度在 item 填充到 RecyclerView 的时候高度还是不确定,或者说是 0 。然后图片加载完成后,高度就出现了,就出现了各种问题。

是的,只要我们解决了这个高度的问题,其他问题就没有了。就不需要设置前面说到的两个设置。

这个高度要怎么确定呢?肯定不能写死,要根据图片的比例来,因为图片的宽度是确定的,我们只要根据图片的比例进行缩放就可以了。

具体的步骤是获取到图片,然后根据测量出宽高比,再根据 item 的宽度,设置 item 的高度。这就行了呀!

说是很简单啦。我之前也就想到过这个问题,然后就在 Glide 里面进行拦截,然后设置宽高,发现问题没有解决,就没有去细想了。其实那时候的思路大致是对的,但是那个拦截其实异步的,并没有同步执行,也就是说,在 Adapter 里面返回 view 的时候高度还是没有确定。所以这个问题也没有得到解决。

解决方案

再说一下网络上的解决方案是什么。

有一篇文章是这么说的,其实都大致类似。网络上的东西,你抄我的,我抄你的。获取到图片列表后,然后启动一个 IntentService 来下载这一页的图片,等下载完成后测量出宽高比,再通过 EventBus 发消息给 RecyclerView 添加数据,然后 Adapter 再进行刷新。

文章里面也说了,这样有个很大的问题就是加载出图片的时候巨慢,因为要等这页的图片下载完成和测量完成,然后才进行的渲染,所以速度很感人。

最终的结果就是让后台把图片的宽高传过来,然后获取到这页数据的时候,顺便把宽高给设置进去。

这几乎是网上所有的解决方案中最终的结果(我看到的都是这样)。

但是我调用的这个是第三方开放的 API 接口,我找谁给我加数据。。。。

我想了一下,能不能加载一张,然后显示一张呢?

可以的!

我要开始干了! 思路是这样的,我也不用 IntentService (好像网上还有人以为懂个 IntenService ,就洋洋得意。。),也不用 EventBus , 用 RxJava 直接怼,因为前面这两个东西就是 异步 和 事件 嘛,这两个东西,RxJava 都有啊。搞什么花里胡哨的。

首先通过 Retrofit 发送请求,获取 Observer ,然后进行转化 map 获取到这一页的图片信息,再使用 flatMap 进行转化,把这个 list 的数据逐个发送,然后再进行下载图片,保存图片,获取宽高等操作,最后在 onNext 中获取一条数据就刷新这个 item (要注意不要刷新整个列表,其实前面说的会闪的问题,是因为刷新的时候,对整个列表都进行了刷新导致的)。图片就会一个个加载出来了。不用等所有的操作都执行完再渲染。代码如下:

ApiRequest.getServer().getFuliData(num, page)
                // 切换线程
                .compose(ApiRequest.<BaseGankBean<FuliBean>>preRequest())
                .map(new Function<BaseGankBean<FuliBean>, List<FuliBean>>() {
                    @Override
                    public List<FuliBean> apply(BaseGankBean<FuliBean> fuliBeanBaseGankBean) throws Exception {
                        return fuliBeanBaseGankBean.getResults();
                    }
                })
                .flatMap(new Function<List<FuliBean>, ObservableSource<FuliBean>>() {
                    @Override
                    public ObservableSource<FuliBean> apply(List<FuliBean> fuliBeans) throws Exception {
                        return Observable.fromIterable(fuliBeans);
                    }
                })
                // 切换线程
                .observeOn(Schedulers.io())
                .map(new Function<FuliBean, FuliBean>() {
                    @Override
                    public FuliBean apply(FuliBean fuliBean) throws Exception {
                        String url = fuliBean.getUrl();
                        if (url!=null) {
                            try {
                                // 同步下载图片,可设置获取到的 bitmap 大小,但是实际下载的还是原图
                                Bitmap bitmap = Glide.with(getActivity())
                                        .asBitmap()
                                        .load(url)
                                        .into(400, 400)
                                        .get();
                                // 保存图片,作为缓存
                                ImgLoadUtil.wirteBitmap2File(bitmap, Const.FilePath.imgCache,fuliBean.get_id()+".png");
                                // 获取宽高
                                int height = bitmap.getHeight();
                                int width = bitmap.getWidth();
                                fuliBean.setHeight(height);
                                fuliBean.setWidth(width);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            } catch (ExecutionException e) {
                                e.printStackTrace();
                            }
                        }
                        return fuliBean;
                    }
                })
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Observer<FuliBean>() {
                    @Override
                    public void onSubscribe(Disposable d) {
                        
                    }

                    @Override
                    public void onNext(FuliBean fuliBean) {
                        // 一个图片加载完成就渲染这个图片
                        dataList.add(fuliBean);
                        int index = dataList.indexOf(fuliBean);
                        adapter.notifyItemChanged(index);
                    }

                    @Override
                    public void onError(Throwable e) {
                        
                        e.printStackTrace();
                    }

                    @Override
                    public void onComplete() {
                        //加载完成,页码加一
                        page++;
                    }
                });

看完有没有一种畅快淋漓的感觉。越发觉得 RxJava 还是很好用的。然后 Adapter 也没什么好说的,获取到宽高比,计算一下宽高,该怎么搞就怎么搞。

贴一下效果图:

image

image