揭秘之从RecyclerView滑动监听到Gilde平滑加载图片

本文应该是RecyclerView的第三篇,今天来讲讲如何让RecyclerView优先加载可见item,如何在RecyclerView滑动中停止图片的加载保证页面流畅。

先看效果图:

额。算了再流畅GIF也无法展示,想看效果去GITHUB下载代码吧。

本文Github代码链接

https://github.com/AndroidMsky/GlideScrollRecyclerView

欢迎star哦。

对下拉刷新上滑加载RecyclerView还不明白的请看:

http://blog.csdn.net/androidmsky/article/details/52922348

对多样式布局Gilde基本用法还不懂得请看:

http://blog.csdn.net/androidmsky/article/details/52944370

两篇都是笔者的博文,相信入门搭建起可用框架还是有帮助的。

让我们来回顾一下陈旧的Listview,如果item中有网络图片,那时候我们怎么做的呢?我们要注意一下几个重点:

1.网络图片获取

2.网络图片二级缓存(至少一级缓存)

3.在高速滑动时候停止图片加载线程

4.在低速滑动,停止滑动时候开启线程

5.下拉刷新

6.上滑加载

7.优先加载可见item

如果不用第三方框架,自己维护线程池等等东西,想想都复杂。而如今我们不需要这些东西了,本文的Dome轻轻松松做到这7点。

首先1 2 glide给予我们完美的支持,5 6 我前文提到过的RecyclerView也有完美的支持。今天主要讲 3 4 7这三点如何实现。

首先看7.优先加载可见item,之前在listview我们可能这样做,写个滑动监听并且获取可见item的位置,然后加载对应图片,那么我们使用RecyclerView+Gilde到底如何做这一点呢,笔者一开始也有些犹豫,于是直接issues到了github :

https://github.com/bumptech/glide/issues/1575#event-852660755

看来老外对于自己的亲儿子项目还是很关爱的生怕我不懂啪啪啪举了几个例子,我只好用CET3.9的水平翻译一下了。

我的意思是当glide和recyclerview配合使用的时候,glide会不会优先加载可见item。

TWiStErRob大概说,所有的加载优先级都是默认的,但是可以通过设置priority来这是优先级,但是不是在特别的情况下这个方法一般不被使用,他举了个例子说,如果一个item中有3个图片,他们的信息有重叠的部分,其中有一张图是最重要,信息最全的时候,可以提高这张图的优先级。

然而TWiStErRob给我的答案似乎并没有理解我想问的(可能是我CET3.9)的原因,我想算啦吧,问别人不如自己实践出来的更真实。于是我准备出如下场景:

1.网速很渣(因为速度快瞬间加载完很多图难以测试)

2.打开一个游戏的下载(先把比较渣的网速给我占了!)

3.item比较多

4.当前可见item比较少

5.设置Glide跳过二级缓存

6.对Glide加载成功进行监听并且打印图片对应位置log

 Glide.with(mContext).load(data.URl)
                        .placeholder(R.mipmap.ic_launcher)
                        .centerCrop()
                        .skipMemoryCache(skipcache)
                        .diskCacheStrategy(DiskCacheStrategy.NONE)
                        .into(new GlideDrawableImageViewTarget(productHolder.imgRight) {
                            @Override
                            public void onResourceReady(GlideDrawable drawable, GlideAnimation anim) {
                                super.onResourceReady(drawable, anim);
                                Log.d("-------------------+", "" + (position+1));
                            }

首先进来缓慢滑动几次:

前四张图片被加载了符合预期。

接下来我们快速滑动到底部:

如我所料,优先加载了可见的底部的item。

到这里7问题就解决了。我们以正缺的姿势去使用RecyclerView+Gilde就可以了。

接下来是:

3.在高速滑动时候停止图片加载线程

4.在低速滑动,停止滑动时候开启线程

RecyclerView是可以滑动监听的但是别高兴的太早:

SuperRefreshRecyclerView.一脸懵逼

你点不出设置滑动监听方法,其实是这样的:

public class SuperRefreshRecyclerView extends FrameLayout {

    private RelativeLayout emptyView,errorView;
    private SwipeToLoadLayout swipeToLoadLayout;
    private SwipeLoadMoreFooterLayout swipeLoadMoreFooterLayout;
    private RecyclerView recyclerView;

SuperRefreshRecyclerView中有个原声的RecyclerView所以我们肯定不能直接.到RecyclerView的方法了。于是决定自己写个callback接口就好了:

public interface ChangeScrollStateCallback  {

    public void change(int c);

}

然后提供set方法:

public void setChangeScrollStateCallback(ChangeScrollStateCallback mChangeScrollStateCallback){
        this.mChangeScrollStateCallback=mChangeScrollStateCallback;

    }

并在Activity中调用:

superRecyclerView.setChangeScrollStateCallback(new ChangeScrollStateCallback() {

//0 表示停止滑动的状态 SCROLL_STATE_IDLE
//1表示正在滚动,用户手指在屏幕上 SCROLL_STATE_TOUCH_SCROLL
//2表示正在滑动。用户手指已经离开屏幕 SCROLL_STATE_FLING
            @Override
            public void change(int c) {

                switch (c) {
                    case 2:
                        Glide.with(MainActivity.this).pauseRequests();
                         Log.d("AAAAAAAAAAAAAAA", "暂停加载" + c);

                        break;
                    case 0:
                        Glide.with(MainActivity.this).resumeRequests();
                        Log.d("AAAAAAAAAAAAAAA","恢复加载" + c);

                        break;
                    case 1:
                        Glide.with(MainActivity.this).resumeRequests();
                        Log.d("AAAAAAAAAAAAAAA", "恢复加载" + c);

                        break;

                }

            }
        });

Glide提供的暂停恢复方法有没有很爽:

Glide.with(MainActivity.this).pauseRequests();
Glide.with(MainActivity.this).resumeRequests();

高速滑动一下屏幕:

缓慢滑动屏幕:

一切符合预期,1-7点我们就这样轻松的完成了。同事也给大家建议,在怀疑一个地方的时候不妨打断点打日志去看看到底是怎么回事,不断提高自己解决问题的能力,不要只会问而不会做。

欢迎关注作者。欢迎评论讨论。欢迎拍砖。

如果觉得这篇文章对你有帮助,欢迎打赏,

欢迎star,Fork我的github。

喜欢作者的也可以Follow。也算对作者的一种支持。

本文Github代码链接

https://github.com/AndroidMsky/GlideScrollRecyclerView

欢迎加作者自营安卓开发交流群:308372687

博主原创未经允许不得转载,转载必究。

时间: 2024-08-20 12:01:10

揭秘之从RecyclerView滑动监听到Gilde平滑加载图片的相关文章

android listview 滑动过程中不加载图片,停止时加载图片

今天闲来无事, 就测试了一下listview加载图片优化的功能, 在我们使用新浪微博的时候,细心的同学一定发现了,在滑动的过程中,图片是没有被加载的, 而是在滑动停止时,才加载图片了. 我们今天就做一个这样的效果吧. 我们先考虑两个问题: 1.在滑动停止的时候,如何获得需要加载的图片控件? 2.因为listiew在初始化完成的时候,OnScrollListener的onScrollStateChanged与onScroll并未被触发,如何初始化第一页的图片? package com.test.l

RecyclerView使用 及 滑动时加载图片优化方案

RecyclerView使用 及 滑动时加载图片优化方案 简述 本篇博文主要给大家分享关于RecyclerView控件的使用及通过继承RecyclerView来实现滑动时加载图片的优化方案,也同样能解决防止图片乱序的问题,之前有在网上有看到大神对Android中ListView异步加载图片乱序问题进行过分析,并深入剖析原理后分别给出了3种对应的解决方案:一 .使用findViewWithTag.二.使用弱引用关联.三.使用Volley框架提供的NetworkImageView. 看了之后思索了很

带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

转载请注明出处:http://blog.csdn.net/lowprofile_coding/article/details/51321896 一 .前言 最近实在太忙,一个多礼拜没有更新文章了,于是今晚加班加点把demo写出来,现在都12点了才开始写文章. 1.我们的目标 把RecyclerView下拉刷新上拉加载更多加入到我们的开发者头条APP中. 2.效果图 3.实现步骤 找一个带上拉刷新下载加载更多的RecyclerView开源库,我们要站在巨人的肩膀上 下载下来自己先运行下demo,然

RecyclerView 下拉刷新和上拉加载

RecyclerView 下拉刷新和上拉加载 RecyclerView已经出来很久了,许许多多的项目都开始从ListView转战RecyclerView,那么,上拉加载和下拉刷新是一件很有必要的事情. 在ListView上,我们可以通过自己添加addHeadView和addFootView去添加头布局和底部局实现自定义的上拉和下拉,或者使用一些第三方库来简单的集成,例如android-pulltorefresh或者android-Ultra-Pull-to-Refresh,后者的自定义更强,但需

RecyclerView下拉刷新上拉加载(一)

listview下拉刷新上拉加载扩展(一) http://blog.csdn.net/baiyuliang2013/article/details/50252561 listview下拉刷新上拉加载扩展(二)-仿美团外卖 http://blog.csdn.net/baiyuliang2013/article/details/50253135 listview下拉刷新上拉加载扩展(三)-仿最新版美团外卖 http://blog.csdn.net/baiyuliang2013/article/det

移动端tab滑动和上下拉刷新加载

移动端tab滑动和上下拉刷新加载 查看demo(请在移动端模式下查看) 查看代码 开发该插件的初衷是,在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper,swiper的功能太强大而我只要一个小小的tab滑动功能,就要引入200+k的js这未免太过浪费.而且swiper是没有下拉刷新功能的,要用swiper实现下拉刷新还得改造一番.在实现功能的同时产生了不少bug.要是在引入一个下拉刷新的插件又难免多了几十kb的js.而且这些插件对dom结构又是有一定要求的,一不小心就有bug.

RecyclerVIew 下拉刷新上拉加载

步骤: 寻找RecyclerView 上拉刷新下拉加载开源库 加入到项目中 解决整合进来的bug 待续...

Android进阶:ListView性能优化异步加载图片 使滑动效果流畅

ListView 是一种可以显示一系列项目并能进行滚动显示的 View,每一行的Item可能包含复杂的结构,可能会从网络上获取icon等的一些图标信息,就现在的网络速度要想保持ListView运行的很好滚动流畅是做不到的 所以这里就需要把这些信息利用多线程实现异步加载 实现这样功能的类 [java] view plaincopy public class AsyncImageLoader { private HashMap<String, SoftReference<Drawable>&

自定义RecyclerView实现下拉刷新,加载更多

RecyclerView出来的时间已经不短了,现在估计大部分的列表类的需求实现首选肯定是RecyclerView,基本上可以跟ListView说再见了.那么问题来了,一般情况下一个列表页面都会有下拉刷新和加载更多功能,RecyclerView本身并没有下拉刷新和加载更多功能,当然现在已经有很多优秀的开源的支持下拉刷新,加载更多功能的三方RecyclerView,可以直接拿过来用.但是...有时候光会用是不够的,还需要知道它们是这么实现的,实现的原理是什么.下面就来介绍一下RecyclerView