Android图片加载神器之Fresco-加载图片基础[详细图解Fresco的使用]

• Facebook 出品的一个强大的图片加载组件 Fresco

尽信书，不如无书—能学到什么？

1、SimpleDraweeView最基本的使用 
2、SimpleDraweeView的圆形图 
3、SimpleDraweeView的圆角图 
4、SimpleDraweeView的缩放类型

工欲善其事必先利其器—下载Fresco并导入到项目

Fresco中文说明：http://www.fresco-cn.org/

Fresco项目GitHub地址：https://github.com/facebook/fresco

Fresco项目GitHub地址

第二步添加Fresco到项目工程：

第三步服务及权限：

<!-- 访问网络的权限 -->
<uses-permission android:name="android.permission.INTERNET"/>

• 1
• 2

常见问题：

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_adv"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        ></com.facebook.drawee.view.SimpleDraweeView>

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

代码分析：

MainActivity

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

简单的书写完布局和实现代码之后我们来运行一下。

java.lang.RuntimeException: Unable to start activity ComponentInfo{scp.com.frescodemo/scp.com.frescodemo.MainActivity}: 

android.view.InflateException: Binary XML file line #5: Error inflating class com.facebook.drawee.view.SimpleDraweeView
                at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2264)
                at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2313)
                at android.app.ActivityThread.access$1100(ActivityThread.java:141)
                at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1238)
                at android.os.Handler.dispatchMessage(Handler.java:102)
                at android.os.Looper.loop(Looper.java:136)
                at android.app.ActivityThread.main(ActivityThread.java:5336)
                at java.lang.reflect.Method.invokeNative(Native Method)
                at java.lang.reflect.Method.invoke(Method.java:515)
                at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:871)
                at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:687)
                at dalvik.system.NativeStart.main(Native Method)
         Caused by: android.view.InflateException: Binary XML file line #5: Error inflating class com.facebook.drawee.view.SimpleDraweeView

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

运行报错了！怎么回事呢？这里啊，是因为我们没有在应用调用 setContentView() 之前进行初始化Fresco造成的；解决办法：

MainActivity

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Fresco.initialize(this);
        setContentView(R.layout.activity_main);
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

再运行就没有错误发生了。

占位图—placeholderImage：

icon_placeholder.png

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_adv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        fresco:placeholderImage="@mipmap/icon_placeholder"
        fresco:placeholderImageScaleType="fitCenter"
        ></com.facebook.drawee.view.SimpleDraweeView>

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

代码说明：

MainActivity

正在加载图—progressBarImage：

icon_progress_bar.png

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        fresco:actualImageScaleType="focusCrop"
        fresco:placeholderImage="@mipmap/icon_placeholder"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:progressBarImage="@mipmap/icon_progress_bar"
        fresco:progressBarImageScaleType="centerInside"
        fresco:progressBarAutoRotateInterval="5000"
        ></com.facebook.drawee.view.SimpleDraweeView>

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

代码说明：

MainActivity

public class MainActivity extends AppCompatActivity {

    private SimpleDraweeView simpleDraweeView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Fresco.initialize(this);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        //创建SimpleDraweeView对象
        simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv);
        //创建将要下载的图片的URI
        Uri imageUri = Uri.parse("https://img-my.csdn.net/uploads/avatar/4/E/8/1_y1scp.jpg");
        //开始下载
        simpleDraweeView.setImageURI(imageUri);
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

代码分析：

运行效果图：

正在加载图本身是不可以转的，但是呢，加上了fresco:progressBarAutoRotateInterval="5000" 属性，那么它就可以旋转了；可以看到，正在加载图一闪而过，这是因为我们加载的图片很小，网络也很好。

失败图—failureImage：

icon_failure.png

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        fresco:actualImageScaleType="focusCrop"
        fresco:placeholderImage="@mipmap/icon_placeholder"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:progressBarImage="@mipmap/icon_progress_bar"
        fresco:progressBarImageScaleType="centerInside"
        fresco:progressBarAutoRotateInterval="5000"
        fresco:failureImage="@mipmap/icon_failure"
        fresco:failureImageScaleType="centerInside"
        ></com.facebook.drawee.view.SimpleDraweeView>

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

代码分析：

MainActivity

public class MainActivity extends AppCompatActivity {

    private SimpleDraweeView simpleDraweeView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Fresco.initialize(this);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        //创建SimpleDraweeView对象
        simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv);
        //创建将要下载的图片的URI
        Uri imageUri = Uri.parse;
        //开始下载
        simpleDraweeView.setImageURI(imageUri);
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

代码说明：

运行效果：

重试图—retryImage：

icon_retry.png

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        fresco:actualImageScaleType="focusCrop"
        fresco:placeholderImage="@mipmap/icon_placeholder"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:progressBarImage="@mipmap/icon_progress_bar"
        fresco:progressBarImageScaleType="centerInside"
        fresco:progressBarAutoRotateInterval="5000"
        fresco:failureImage="@mipmap/icon_failure"
        fresco:failureImageScaleType="centerInside"
        fresco:retryImage="@mipmap/icon_retry"
        fresco:retryImageScaleType="centerCrop"
        ></com.facebook.drawee.view.SimpleDraweeView>

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

代码分析：

MainActivity

public class MainActivity extends AppCompatActivity {

    private SimpleDraweeView simpleDraweeView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Fresco.initialize(this);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        //创建SimpleDraweeView对象
        simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv);
        //创建将要下载的图片的URI
        Uri imageUri = Uri.parse;
        //开始下载
        simpleDraweeView.setImageURI(imageUri);

        //创建DraweeController
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                //加载的图片URI地址
                .setUri(imageUri)
                //设置点击重试是否开启
                .setTapToRetryEnabled(true)
                //设置旧的Controller
                .setOldController(simpleDraweeView.getController())
                //构建
                .build();

        //设置DraweeController
        simpleDraweeView.setController(controller);
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35

代码说明：

运行效果：

注意：

failureImage(失败图)

淡入淡出动画—fadeDuration：

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        fresco:actualImageScaleType="focusCrop"
        fresco:placeholderImage="@mipmap/icon_placeholder"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:progressBarImage="@mipmap/icon_progress_bar"
        fresco:progressBarImageScaleType="centerInside"
        fresco:progressBarAutoRotateInterval="5000"
        fresco:failureImage="@mipmap/icon_failure"
        fresco:failureImageScaleType="centerInside"
        fresco:retryImage="@mipmap/icon_retry"
        fresco:retryImageScaleType="centerCrop"
        fresco:fadeDuration="5000"
        ></com.facebook.drawee.view.SimpleDraweeView>

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

代码说明：

MainActivity

运行效果：

背景图—backgroundImage：

这里呢，我们的背景图采用的是一个系统所提供的颜色中的一种。

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        fresco:actualImageScaleType="focusCrop"
        fresco:fadeDuration="5000"
        fresco:backgroundImage="@android:color/holo_orange_light"
        ></com.facebook.drawee.view.SimpleDraweeView>

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

代码说明：

MainActivity

叠加图—overlayImage：

这里呢，我们的背景图采用的是一个系统所提供的颜色中的一种。

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        fresco:actualImageScaleType="focusCrop"
        fresco:placeholderImage="@mipmap/icon_placeholder"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:progressBarImage="@mipmap/icon_progress_bar"
        fresco:progressBarImageScaleType="centerInside"
        fresco:progressBarAutoRotateInterval="5000"
        fresco:failureImage="@mipmap/icon_failure"
        fresco:failureImageScaleType="centerInside"
        fresco:retryImage="@mipmap/icon_retry"
        fresco:retryImageScaleType="centerCrop"
        fresco:fadeDuration="5000"
        fresco:backgroundImage="@android:color/holo_orange_light"
        fresco:pressedStateOverlayImage="@android:color/holo_green_dark"
        fresco:overlayImage="@android:color/black"
        ></com.facebook.drawee.view.SimpleDraweeView>

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

代码说明：

MainActivity

运行效果：

从运行效果来看，叠加图在最上面，覆盖了下面的图。

圆形图—roundAsCircle：

一行代码搞定圆形图：设置roundAsCircle为true；

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        fresco:actualImageScaleType="focusCrop"
        fresco:placeholderImage="@mipmap/icon_placeholder"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:progressBarImage="@mipmap/icon_progress_bar"
        fresco:progressBarImageScaleType="centerInside"
        fresco:progressBarAutoRotateInterval="5000"
        fresco:failureImage="@mipmap/icon_failure"
        fresco:failureImageScaleType="centerInside"
        fresco:retryImage="@mipmap/icon_retry"
        fresco:retryImageScaleType="centerCrop"
        fresco:fadeDuration="5000"
        fresco:backgroundImage="@android:color/holo_orange_light"
        fresco:roundAsCircle="true"
        ></com.facebook.drawee.view.SimpleDraweeView>

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

代码说明：

MainActivity

运行效果：

可以看到，从图片开始加载一直到图片下载完毕，整个图像都是圆形的。

圆角图—roundedCornerRadius：

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        fresco:actualImageScaleType="focusCrop"
        fresco:placeholderImage="@mipmap/icon_placeholder"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:progressBarImage="@mipmap/icon_progress_bar"
        fresco:progressBarImageScaleType="centerInside"
        fresco:progressBarAutoRotateInterval="5000"
        fresco:failureImage="@mipmap/icon_failure"
        fresco:failureImageScaleType="centerInside"
        fresco:retryImage="@mipmap/icon_retry"
        fresco:retryImageScaleType="centerCrop"
        fresco:fadeDuration="5000"
        fresco:backgroundImage="@android:color/holo_orange_light"
        fresco:roundedCornerRadius="30dp"
        ></com.facebook.drawee.view.SimpleDraweeView>

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

代码说明：

MainActivity

运行效果：

可以看到，从图片开始加载一直到图片下载完毕，整个图像都是圆角的。

注意：

当我们同时设置图像显示为圆形图像和圆角图像时，只会显示为圆形图像。

圆形圆角边框宽度及颜色—roundingBorder：

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        fresco:actualImageScaleType="focusCrop"
        fresco:placeholderImage="@mipmap/icon_placeholder"
        fresco:placeholderImageScaleType="focusCrop"
        fresco:progressBarImage="@mipmap/icon_progress_bar"
        fresco:progressBarImageScaleType="focusCrop"
        fresco:progressBarAutoRotateInterval="5000"
        fresco:failureImage="@mipmap/icon_failure"
        fresco:failureImageScaleType="focusCrop"
        fresco:retryImage="@mipmap/icon_retry"
        fresco:retryImageScaleType="focusCrop"
        fresco:fadeDuration="5000"
        fresco:backgroundImage="@android:color/holo_orange_light"
        fresco:roundAsCircle="true"
        fresco:roundedCornerRadius="30dp"
        fresco:roundTopLeft="true"
        fresco:roundTopRight="true"
        fresco:roundBottomLeft="true"
        fresco:roundBottomRight="true"
        fresco:roundingBorderWidth="10dp"
        fresco:roundingBorderColor="@android:color/black"
        ></com.facebook.drawee.view.SimpleDraweeView>

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

代码说明：

MainActivity

运行效果(左边显示的是带边框的圆形图像，右边显示的是带边框的圆角图像)：

圆形或圆角图像底下的叠加颜色—roundWithOverlayColor：

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        fresco:actualImageScaleType="focusCrop"
        fresco:placeholderImage="@mipmap/icon_placeholder"
        fresco:placeholderImageScaleType="focusCrop"
        fresco:progressBarImage="@mipmap/icon_progress_bar"
        fresco:progressBarImageScaleType="focusCrop"
        fresco:progressBarAutoRotateInterval="5000"
        fresco:failureImage="@mipmap/icon_failure"
        fresco:failureImageScaleType="focusCrop"
        fresco:retryImage="@mipmap/icon_retry"
        fresco:retryImageScaleType="focusCrop"
        fresco:fadeDuration="5000"
        fresco:backgroundImage="@android:color/holo_orange_light"
        fresco:roundWithOverlayColor="@android:color/darker_gray"
        fresco:roundAsCircle="true"
        ></com.facebook.drawee.view.SimpleDraweeView>

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

代码说明：

MainActivity

运行效果(左边为圆形效果，右边为圆角效果)：

缩放类型—ScaleType：

推荐使用：focusCrop 类型

Fresco中文说明对这一点也有详情的说明： 缩放

总结：