Android踩坑日记:使用Fesco图片加载库在GridView上的卡顿优化

1,fresco是一个强大的图片加载库
2,fresco设计了一个叫做image pipeline(图片管道)的模块,它负责从从网络,从本地文件系统,从本地资源加载图片,为了最大限度节约资源和cpu时间,它设计了3级缓存(2级内存,1级文件)
3,fresco设计了一个叫做drawee的模块,方便地显示loading图,当图片不再显示在屏幕上时,及时地释放内存和空间占用。
4,支持 Android2.3(API level 9) 及其以上系统。

<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view"   
      android:layout_width="130dp" 
      android:layout_height="130dp" 
      fresco:placeholderImage="@drawable/ic_launcher" />

就已经可以应付大部分情况了, 也无需担心其他问题;
稍等: 吐槽下, 居然宽高基础使用是必须设置具体的dp值的

但是我第一是使用Fresco,是需要做一个网格相册,需要加载大量图片,首先来的问题是滑动卡顿,再者是OOM内存溢出
这么强大的库也能OOM?
都知道,多图加载确实耗内存,可是,别的三方库是OK的哇,什么情况?一定是使用的姿势不对。宫格显示就是大图显示, 导致拖动都卡顿。
项目中是这样设置的

<com.facebook.drawee.view.SimpleDraweeView        
        android:id="@+id/m_album_photo_view"
        android:layout_width="119.6dp"
        android:layout_height="119.6dp"
        fresco:actualImageScaleType="centerCrop"
        fresco:fadeDuration="200" />

虽然设置的缩放类型是centerCrop居中裁切,但是并没有生效,原生ImageView的centerCrop居中裁切是将原始图片(如3000*4000,5M的图片),在居中裁切ImageView的大小放在内存中显示,并不是把整个图片放在内存中。

这时候就想到了Fresco的三级缓存机制,第三级是文件缓存,第二级是Fresco偷android系统的缓存存放原始图片,从第二级解码得到显示图片的一级内存,就是视觉上看到的ImageView图片都在一级内存

查阅官方文档:https://www.fresco-cn.org/docs/resizing-rotating.html,发现需要缩放图片,于是在显示图片之前,做了处理


    /**
     * 解码前修改内存中的图片大小
     * @param uri        文件的uri
     * @param draweeView 显示的imageview
     */
    public  void showThumbNail(Uri uri, SimpleDraweeView draweeView){

        int width = ScreenUtils.dp2px(context,119);
        int height = ScreenUtils.dp2px(context,119);

        LogUtils.e("http",width+"_"+height);

        ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
        .setResizeOptions(new ResizeOptions(width, height)).build();

        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setImageRequest(request)
                .setOldController(draweeView.getController())
                .setControllerListener(new BaseControllerListener<ImageInfo>())
                .build();
        draweeView.setController(controller);
    }

运行试了试, 咦~ 滑动好顺畅。。。难道就好了?Oh~No, 新问题出现了
图片显示不全 (具体表现为显示为纯白色,或纯黑色)
遂查看官方文档,真是细节问题。

这里写图片描述

人家文档说的很清楚嘛,此方法 只支持JPG, 只支持JPG, 只支持JPG, ,内心
此时是崩溃的,心中想, 只支持JPG怎么够用,现在png的,webp的各种格式的怎么办…
往下顺着看, 好吧, 哈哈, 请允许我窃喜,是的,官方提供了方法来支持更多格式:

这里写图片描述

Tip: 此处记得,不是setDownsampleEnabled(true)就可以了,还得调用之前的Resize方法,人家文档也说的很明白了

好吧, 也许即使如此,有些人还不知如何设定这个属性呢,其实很简单哇,人家Configuration是可以定义的哇, 初始化的时候进行定义 :

ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this)     
     .setDownsampleEnabled(true)        
      .build();

Fresco.initialize(this, config);

这样就OK了,运行很流畅,也没有纯白或者纯黑了。

总结
学习一个新的项目,框架,开源库的方法很重要,学习搜索相关资源,阅读官方文档,查阅别人博客,我觉得在工作中学习新东西还是需要时间,毕竟平时项目开发紧,没有太多时间研究。以后学习新东西按一下步骤:1,看看别人博客,了解基本用法,2,查阅官方文档,中文文档,github,3,弄清楚原理,源码,库中的各个模块是什么关系

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值