图片加载框架之图片加载框架选型(一)下篇

简介: 阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680本篇文章将通过Picasso分析、Fresco的使用来阐述图片加载框架选型:一、 Picasso分析Picasso是Square公司开源的一个Android平...

阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680
本篇文章将通过Picasso分析、Fresco的使用来阐述图片加载框架选型:

一、 Picasso分析

Picasso是Square公司开源的一个Android平台上的图片加载框架

核心类:

Picasso:负责图片下载、变换、缓存的管理器,当它收到一个图片下载请求的时候,它会创建Request并提交给Dispatcher

Dispatcher: Dispatcher会寻找对应的处理器RequestHandler,并将请求与该处理器一起提交给线程池执行

图片加载步骤:

创建 -> 入队 -> 执行 -> 解码 -> 变化 -> 批处理 -> 完成 -> 分发 -> 显示

使用

Picasso.get().load(url).into(first_img)

//加载一张图片 旋转45°
Picasso.get()
        .load(URL)
        .rotate(45f)
        .placeholder(R.drawable.placeholder_disk)
        .into(imgOne);

//加载一张图片并设置一个回调接口
Picasso.get()
        .load(URL)
        .placeholder(R.drawable.placeholder_disk)
        .into(imgOne, new Callback() {

            @Override
            public void onSuccess() {

            }

            @Override
            public void onError(Exception e) {

            }
        });

//预加载一张图片
Picasso.get().load(URL).fetch();

//同步加载一张图片,注意只能在子线程中调用并且Bitmap不会被缓存到内存里.
new Thread() {
    @Override
    public void run() {
        try {
            final Bitmap bitmap = Picasso.get().load(URL).get();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}.start();

//加载一张图片旋转并且添加一个Transformation,可以对图片进行各种变化处理,例如圆形头像.
Picasso.get().load("url").rotate(10).transform(new Transformation() {
    @Override
    public Bitmap transform(Bitmap source) {
        //处理Bitmap
        return null;
    }

    @Override
    public String key() {
        return null;
    }
}).into(imgTwo);

//加载一张图片并按照指定尺寸以centerInside()的形式缩放.并设置加载的优先级为高.注意centerInside()或centerCrop()
//只能同时使用一种,而且必须指定resize()或者resizeDimen();
Picasso.get().load(URL)
        .resize(400, 400)
        .centerInside()
        .priority(Picasso.Priority.HIGH)
        .into(imgTwo);

//加载一张图片并设置tag,可以通过tag来暂定或者继续加载,可以用于当ListView滚动是暂定加载.停止滚动恢复加载.
Picasso.get().load(URL).tag(getContext()).into(imgTwo);
Picasso.get().pauseTag(getContext());
Picasso.get().resumeTag(getContext());

二、Fresco的使用

当下有很多图片加载框架,常见的有Glide、Fresco、Picasso等。Glide因为其体积小、缓存机制强大等优点,受到了广大程序员的青睐;Fresco虽然体积比较大,缓存机制也没有Glide强大,但它胜在拥有一些炫酷的效果(进度条、淡入效果)等,也有很多人在使用。今天我们就来介绍一下Fresco的使用。

1、配置环境

使用Fresco需要先在build.gradle中导入依赖:

 // Fresco所需依赖
    compile 'com.facebook.fresco:fresco:0.12.0'
    // 在 API < 14 上的机器支持 WebP 时,需要添加
    compile 'com.facebook.fresco:animated-base-support:0.12.0'
    // 支持 GIF 动图,需要添加
    compile 'com.facebook.fresco:animated-gif:0.12.0'
    // 支持 WebP (静态图+动图),需要添加
    compile 'com.facebook.fresco:animated-webp:0.12.0'
    compile 'com.facebook.fresco:webpsupport:0.12.0'

如果需要从网络中下载图片,则需要在AndroidManifest.xml文件中配置网络权限:

<uses-permission android:name="android.permission.INTERNET" />

最后,在项目的Application中初始化Fresco:

public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        // 初始化Fresco
        Fresco.initialize(this);
    }
}

别忘了在AndroidManifest.xml文件中为Application添加name属性:

 <application
        android:name=".MyApplication"
        ......
    </application>

2、SimpleDraweeView

2.1、XML属性

    Fresco为我们提供了一个SimpleDraweeView控件,我们可以直接在这个控件中加载图片。Fresco在这个控件中集成了很多属性,简单实用。以下是SimpleDraweeView中的常用属性:
 fresco:actualImageScaleType:实际加载的图片的伸缩样式
        fresco:backgroundImage:底层图片资源
        fresco:fadeDuration:进度条和占位符图片逐渐消失、加载的图片逐渐显示的时间间隔
        fresco:failureImage:加载失败时显示的图片资源
        fresco:failureImageScaleType:加载失败时加载的图片的伸缩样式
        fresco:overlayImage:在显示的图片表层覆盖一张图片的图片资源
        fresco:placeholderImage:占位符图片资源
        fresco:placeholderImageScaleType:占位符图片的伸缩样式
        fresco:progressBarAutoRotateInterval:进度条图片转动周期
        fresco:progressBarImage:进度条图片资源
        fresco:progressBarImageScaleType:进度条图片的伸缩样式
        fresco:retryImage:提示重新加载的图片资源
        fresco:retryImageScaleType:提示重新加载的图片的伸缩样式
        fresco:roundAsCircle:将图片剪切成圆形
        fresco:viewAspectRatio:图片宽高比

我们的XML布局文件中的代码如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/id_main_sdv_sdv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        fresco:actualImageScaleType="focusCrop"
        fresco:fadeDuration="3000"
        fresco:failureImage="@mipmap/ic_launcher"
        fresco:failureImageScaleType="centerInside"
        fresco:placeholderImage="@mipmap/ic_launcher"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:progressBarAutoRotateInterval="1000"
        fresco:progressBarImage="@mipmap/ic_launcher"
        fresco:progressBarImageScaleType="centerInside"
        fresco:retryImage="@mipmap/ic_launcher"
        fresco:retryImageScaleType="centerCrop"
        fresco:roundAsCircle="false"
        fresco:viewAspectRatio="1.6" />

    <Button
        android:id="@+id/id_main_btn_load"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="20.0dip"
        android:text="Start Load Image" />

</RelativeLayout>

2.2、注意事项
(1)SimpleDraweeView控件的宽高不能设置为wrap_content,只能是match_parent、具体值或使用viewAspectRatio属性设置宽高比。

(2)如果在一个页面中加载多张图片,不要将SimpleDraweeView直接放在ScollView中,建议使用RecyclerView、ListView或GridView,因为ScrollView中的SimpleDraweeView会持有内存直到Activity或Fragment销毁。

(3)使用SimpleDraweeView时,不要使用imageView中有、View中没有的属性。

3、框架使用

3.1、简单使用
像TextView、Button等其他控件一样后去到SimpleDraweeView,然后调用如下代码即可加载网络图片:

3.2、JAVA代码设置属性
我们可以通过GenericDraweeHierarchy,在JAVA代码中动态的设置SimpleDraweeView控件的属性。需要注意的是,如果在JAVA代码中设置了属性,那么XML文件中设置的属性就都无效了。一个实例代码如下:

 // 代码设置SimpleDraweeView的属性(会覆盖XML设置的所有属性,即在XML中有在这里没有的属性都会失效)
        // 注意:一个GenericDraweeHierarchy是不能被多个SimpleDraweeView共用的
        GenericDraweeHierarchy hierarchy = new GenericDraweeHierarchyBuilder(getResources())
                .setFadeDuration(3000)
                .setPlaceholderImage(R.mipmap.ic_launcher)
                .setPlaceholderImageScaleType(ScalingUtils.ScaleType.FIT_XY)
                .setProgressBarImage(new ProgressBarDrawable()) // 显示进度条(Fresco自带的进度条)
                .build();
        // 设置图片圆角
        RoundingParams roundingParams = new RoundingParams();
        roundingParams.setRoundAsCircle(false); // 不将图片剪切成圆形
        roundingParams.setCornersRadius(200);
        hierarchy.setRoundingParams(roundingParams);
        // 为SimpleDraweeView设置属性
        sdv.setHierarchy(hierarchy);

注意:不能把同一个GenericDraweeHierarchy对象设置给多个SimpleDraweeView!
3.3、设置下载事件

        sdv.setController(Fresco.newDraweeControllerBuilder()
                .setControllerListener(new BaseControllerListener<ImageInfo>() {
                    @Override
                    public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) {
                        // 所有图片都加载成功时触发的方法
                        int width = imageInfo.getWidth();
                        int height = imageInfo.getHeight();
                        QualityInfo qualityInfo = imageInfo.getQualityInfo();
                        int quality = qualityInfo.getQuality();
                        boolean isOfFullQuality = qualityInfo.isOfFullQuality();
                        boolean isOfGoodEnoughQuality = qualityInfo.isOfGoodEnoughQuality();
                    }

                    @Override
                    public void onIntermediateImageSet(String id, ImageInfo imageInfo) {
                        // 加载渐进式图片时回调的方法
                    }

                    @Override
                    public void onFailure(String id, Throwable throwable) {
                        // 加载图片失败时回调的方法
                    }
                })
                .setUri("http://image5.tuku.cn/pic/wallpaper/fengjing/menghuandaziranmeijingbizhi/009.jpg")
                .build());

3.4、渐进式图片
渐进式图片是一种支持图片从模糊到清晰的加载模式。代码如下:

   sdv.setController(Fresco.newDraweeControllerBuilder()
                        .setImageRequest(
                                ImageRequestBuilder.newBuilderWithSource(
                                        Uri.parse("http://image5.tuku.cn/pic/wallpaper/fengjing/menghuandaziranmeijingbizhi/009.jpg"))
                                        .setProgressiveRenderingEnabled(true)
                                        .build())
                        .setOldController(sdv.getController())
                        .build());

以上就是对Fresco的基本使用方法的介绍,希望对大家有帮助~~~
参考:https://www.cnblogs.com/ldq2016/p/6669009.html
https://www.jianshu.com/p/ef3158f76045
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680

相关文章
|
11月前
|
存储 前端开发 JavaScript
AntV X6源码探究简析
AntV是蚂蚁金服全新一代数据可视化解决方案,其中X6主要用于解决图编辑领域相关的解决方案,其是一款图编辑引擎,内置了一下编辑器所需的功能及组件等,本文旨在通过简要分析x6源码来对图编辑领域的一些底层引擎进行一个大致了解,同时也为团队中需要进行基于X6编辑引擎进行构建的图编辑器提供一些侧面了解,在碰到问题时可以较快的找到问题点。
282 0
|
29天前
|
程序员 Python
类的设计奥秘:从代码到架构的科普全解
类的设计奥秘:从代码到架构的科普全解
12 2
|
存储 缓存 Java
面试官:让你设计一套图片加载框架,你会怎么设计?
很多同学在面试中都会被问到图片加载这块的知识。
|
设计模式 XML 缓存
Android体系课学习 之 网络请求库Retrofit源码分析-看这一篇就够了
- 网络请求在我们开发中起的很大比重,有一个好的网络框架可以节省我们的开发工作量,也可以避免一些在开发中不该出现的bug - *Retrofit*是一个轻量级框架,基于*OkHttp*的一个*Restful*框架
|
存储 ARouter 前端开发
Android组件化演进-第一篇
Android组件化演进-第一篇
159 0
Android组件化演进-第一篇
|
Android开发 索引
EventBus封装到项目架构|青训营笔记
封装该库到自己的项目的目的有两个 便捷绑定和解绑 EventBus 便捷通过 EventBus 发送消息和处理消息 代码美观
EventBus封装到项目架构|青训营笔记
|
XML 编解码 Android开发
适配完结篇一 - 超快速的Android屏幕适配方式
由于Android碎片化严重,屏幕分辨率千奇百怪,而想要在各种分辨率的设备上显示基本一致的效果,适配成本越来越高。虽然Android官方提供了dp单位来适配,但其在各种奇怪分辨率下表现却不尽如人意,因此下面探索一种简单且低侵入的适配方式。
799 0
适配完结篇一 - 超快速的Android屏幕适配方式
|
前端开发
flutter 中的列表的性能优化前奏
这里是坚果前端小课堂,大家喜欢的话,可以关注我的公众号“坚果前端,”,或者加我好友,获取更多精彩内容 嵌套列表 - ShrinkWrap 与 Slivers 使用 ShrinkWrap 的列表列表 下面是一些使用ListView对象呈现列表列表的代码,内部列表的shrinkWrap值设置为 true。shrinkWrap强行评估整个内部列表,允许它请求有限的高度,而不是通常的ListView对象高度,即无穷大!
220 0
flutter 中的列表的性能优化前奏
|
存储 JSON 安全
面试查缺补漏,android核心知识:组件篇
  前言   最近一段瞎xx百度,无意中发现一个帖,看帖子的质量肯定是被转载不知道多少次了,来出处都已经不见了,但是博主的质量比较的高。甚至把这篇文章的内容当做面试前的查缺补漏也是非常合适的。   总之是一篇质量非常给常高的文章。所以忍不住在这里发了出来。如果原作者看到这篇文章,觉得不妥。私聊我就会删掉。   一、应用组件
122 0
|
存储 Dart 前端开发
超详解析Flutter渲染引擎|业务想创新,不了解底层原理怎么行?
Flutter 作为一个跨平台的应用框架,诞生之后,就被高度关注。它通过自绘 UI ,解决了之前 RN 和 weex 方案难以解决的多端一致性问题。Dart AOT 和精减的渲染管线,相对与 JavaScript 和 webview 的组合,具备更高的性能体验。 本文的分析主要以 Android 平台为例,IOS 上原理大致类似,相关的参考代码基于 stable/v1.12.13+hotfix.8 。
2690 0
超详解析Flutter渲染引擎|业务想创新,不了解底层原理怎么行?