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

来源：互联网发布：甘比面相很好知乎编辑：程序博客网时间：2024/05/16 05:40

Fresco简单的使用—SimpleDraweeView

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

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

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

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

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

使用说明

第三步服务及权限：

<!-- 访问网络的权限 --><uses-permission android:name="android.permission.INTERNET"/>1
2
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
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);        Fresco.initialize(this);        setContentView(R.layout.activity_main);    }}1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

解决办法

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

修改我们的 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

代码说明：

占位符

正在加载图—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
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("http://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
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 大家右键另存为即可：

icon_failure

修改我们刚刚书写的 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
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("http://my.csdn.net/uploads/avatar_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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

代码说明：

错误的网络图片地址

修改我们刚刚书写的 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
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("http://my.csdn.net/uploads/avatar_y1scp.jpg");        //开始下载        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
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

代码说明：

重试图片

淡入淡出动画—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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

代码说明：

淡入淡出动画

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

修改我们刚刚书写的 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

代码说明：

背景图

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

修改我们刚刚书写的 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
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

代码说明：

叠加图

缩放类型—ScaleType：
类型描述center居中，无缩放centerCrop保持宽高比缩小或放大，使得两边都大于或等于显示边界。居中显示。focusCrop同centerCrop, 但居中点不是中点，而是指定的某个点centerInside使两边都在显示边界内，居中显示。如果图尺寸大于显示边界，则保持长宽比缩小图片。fitCenter保持宽高比，缩小或者放大，使得图片完全显示在显示边界内。居中显示fitStart同上。但不居中，和显示边界左上对齐fitEnd同fitCenter，但不居中，和显示边界右下对齐fitXY不保存宽高比，填充满显示边界none如要使用tile mode显示, 需要设置为none
推荐使用：focusCrop 类型
Fresco中文说明对这一点也有详情的说明：缩放
总结：
XML属性意义fadeDuration淡入淡出动画持续时间(单位：毫秒ms)actualImageScaleType实际图像的缩放类型placeholderImage占位图placeholderImageScaleType占位图的缩放类型progressBarImage进度图progressBarImageScaleType进度图的缩放类型progressBarAutoRotateInterval进度图自动旋转间隔时间(单位：毫秒ms)failureImage失败图failureImageScaleType失败图的缩放类型retryImage重试图retryImageScaleType重试图的缩放类型backgroundImage背景图overlayImage叠加图pressedStateOverlayImage按压状态下所显示的叠加图roundAsCircle设置为圆形图roundedCornerRadius圆角半径roundTopLeft左上角是否为圆角roundTopRight右上角是否为圆角roundBottomLeft左下角是否为圆角roundBottomRight右下角是否为圆角roundingBorderWidth圆形或者圆角图边框的宽度roundingBorderColor圆形或者圆角图边框的颜色roundWithOverlayColor圆形或者圆角图底下的叠加颜色(只能设置颜色)viewAspectRatio控件纵横比

阅读全文

0 0

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

Fresco简单的使用—SimpleDraweeView

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

常见问题：

正在加载图—progressBarImage：

失败图—failureImage：

淡入淡出动画—fadeDuration：

缩放类型—ScaleType：

总结：