图片加载利器之Fresco 初识

桃扇骨 2022-07-16 00:47 269阅读 0赞

之前加载图片一直使用的是Android-Universal-Image-Loader， Android-Universal-Image-Loader是一个开源的UI组件程序，该项目的目的是提供一个可重复使用的仪器为异步图像加载，缓存和显示。相信已经有不少人使用过该框架。今天就来介绍一个新的图片加载利器-Fresco，一直有人说Facebook开源了一款强大的图片加载的框架-Fresco，最近有时间就来了解一下Fresco。

一、Fresco概述（来自Fresco官网）

Fresco 是一个强大的图片加载组件。使用它之后，你不需要再去关心图片的加载和显示这些繁琐的事情！它负责从网络，从本地文件系统，本地资源加载图片并且显示一个占位符直到图片现在完成。它有两个等级的缓存，一个是在内存中，另一个在内部存储。在Android 4.x以及更低系统，Fresco 将图片放在Android 内存中的一个特殊区域。 这可以使你的应用程序运行的更快，并且遭受更少的OutOfMemoryError。

Fresco的开源地址是，[https://github.com/facebook/fresco][https_github.com_facebook_fresco]。

1.Image Pipeline

Fresco 中设计有一个叫做 Image Pipeline 的模块。它负责从网络，从本地文件系统，本地资源加载图片。为了最大限度节省空间和CPU时间，它含有3级缓存设计（2级内存，1级磁盘）。

2.Drawees

Fresco 中设计有一个叫做 Drawees 模块，它会在图片加载完成前显示占位图，加载成功后自动替换为目标图片。当图片不再显示在屏幕上时，它会及时地释放内存和空间占用。

二、Fresco特性（来自Fresco官网）

1.内存管理

解压后的图片，即Android中的Bitmap，占用大量的内存。大的内存占用势必引发更加频繁的GC。在5.0以下，GC将会显著地引发界面卡顿。  
在Android 4.x以及更低系统，Fresco将图片放到一个特别的内存区域。当然，在图片不显示的时候，占用的内存会自动被释放。这会使得APP更加流畅，减少因图片内存占用而引发的OOM。  
Fresco 在低端机器上表现一样出色，你再也不用因图片内存占用而思前想后。

2.图片加载

Fresco的Image Pipeline允许你用很多种方式来自定义图片加载过程，比如：  
(1).为同一个图片指定不同的远程路径，或者使用已经存在本地缓存中的图片  
(2).先显示一个低清晰度的图片，等高清图下载完之后再显示高清图  
(3).加载完成回调通知  
(4).对于本地图，如有EXIF缩略图，在大图加载完成之前，可先显示缩略图  
(5).缩放或者旋转图片  
(6).对已下载的图片再次处理  
(7).支持WebP解码，即使在早先对WebP支持不完善的Android系统上也能正常使用！

3.图片绘制

Fresco 的 Drawees 设计，带来一些有用的特性：  
(1).自定义居中焦点  
(2).圆角图，当然圆圈也行  
(3).下载失败之后，点击重现下载  
(4).自定义占位图，自定义overlay, 或者进度条  
(5).指定用户按压时的overlay

4.图片的渐进式呈现

渐进式的JPEG图片格式已经流行数年了，渐进式图片格式先呈现大致的图片轮廓，然后随着图片下载的继续，呈现逐渐清晰的图片，这对于移动设备，尤其是慢网络有极大的利好，可带来更好的用户体验。  
Android 本身的图片库不支持此格式，但是Fresco支持。使用时，和往常一样，仅仅需要提供一个图片的URI即可，剩下的事情，Fresco会处理。

5.动图加载

加载Gif图和WebP动图在任何一个Android开发者眼里看来都是一件非常头疼的事情。每一帧都是一张很大的Bitmap，每一个动画都有很多帧。Fresco让你没有这些烦恼，它处理好每一帧并管理好你的内存。

三、如何使用 ，可以参考这篇文章，[开始使用 Fresco][Fresco]。

1.配置环境

(1).如果你使用的Android Studio，那么配置使用Fresco很简单，只需要在Gradle文件中加一句，

compile 'com.facebook.fresco:fresco:0.13.0'

就可以了！Gradle会帮你远程下载这个Fresco框架。

(2).如果你使用的还是Eclipse，那么就需要下载jar，导入到项目即可使用。具体配置可以查看这篇文档说明，[http://fresco-cn.org/docs/。][http_fresco-cn.org_docs]

2.使用说明

(1).如果要加载一张网络图片，记得先要添加网络权限

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

(2). Fresco 初始化

Fresco.initialize(context);

Fresco 初始化，我们可以将该初始化代码放置在自定义的Application的onCreate()方法中，当然如果你仅仅是练习测试，可以直接写在Activity的onCreate()方法中，但是要记得要放置在‘setContentView(R.layout.\*\*\*)’之前。

(3).具体使用

Fresco 是使用SimpleDraweeView控件来显示图片的。在布局文件中添加SimpleDraweeView控件，代码例如：

<com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/idrawee_view"
            android:layout_width="100dp"
            android:layout_height="100dp" />

记得使用 SimpleDraweeView时，宽高要设置为一个具体的值，也可以在代码中设置宽高或者宽高比，但是宽高不能都是 wrap\_content。

只有希望显示固定的宽高比时，可以使用wrap\_content。  
如果希望图片以特定的宽高比例显示，例如 2:1，可以在XML中指定:

<com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/my_image_view"
        android:layout_width="20dp"
        android:layout_height="wrap_content"
        fresco:viewAspectRatio="1.5"/>

在代码中设置宽高比，

mSimpleDraweeView.setAspectRatio(1.5f);

如果使用了Fresco的自定义属性，还需要添加命名空间，

xmlns:fresco="http://schemas.android.com/apk/res-auto"

在代码中使用 Fresco来加载图片，

Uri uri = Uri.parse("http://img.mukewang.com/54125edc0001ce6306000338.jpg");
    SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.drawee_view);
    draweeView.setImageURI(uri);URI的支持

可以加载网络图片 、本地图片，主要是自己组装URI参数，  其中URI的支持有（具有有关 URI的支持，可以查看这篇文章， [支持的URI][URI]），  
![Center][]

3. demo工程。

(1). 首先创建一个工程。

自定义一个BaseApplication继承自Application，重新它的onCreate()方法，加入fresco初始化方法，具体代码如下，

public class BaseApplication extends Application {
    
        @Override
        public void onCreate() {
            super.onCreate();
            Fresco.initialize(getApplicationContext());
        }
    }

然后记得在AndroidManifest.xml中的application属性中使用该自定义的 BaseApplication，并且记得加入网络权限。

<?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.xinxing.fresco">
    
        <uses-permission android:name="android.permission.INTERNET"/>
    
        <application
            android:name="com.xinxing.fresco.BaseApplication"
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
            <activity android:name=".MainActivity">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
    
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    
    </manifest>

(2). 创建一个适配器布局文件，adapter\_item\_layout.xml文件

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:fresco="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:padding="10dp"
        android:layout_height="match_parent">
    
        <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/iv_icon"
            android:layout_width="100dp"
            android:layout_height="100dp" />
    </LinearLayout>

(3). 创建一个适配器ImageAdapter，具体代码如下，

public class ImageAdapter extends BaseAdapter {
        private Context mContext;
        private List<String> mList;
        public ImageAdapter(Context context,List<String> list){
            mContext=context;
            mList=list;
        }
        @Override
        public int getCount() {
            return mList.size();
        }
    
        @Override
        public Object getItem(int i) {
            return mList.get(i);
        }
    
        @Override
        public long getItemId(int i) {
            return i;
        }
    
        @Override
        public View getView(int i, View convertView, ViewGroup viewGroup) {
            ViewHolader holader = null;
            if (convertView == null) {
                holader = new ViewHolader();
                convertView = LayoutInflater.from(mContext).inflate(R.layout.adapter_item_layout, null);
                convertView.setTag(holader);
            } else {
                holader = (ViewHolader) convertView.getTag();
            }
            holader.draweeView = (SimpleDraweeView) convertView.findViewById(R.id.iv_icon);
            String imageUrl = mList.get(i);
            Uri uri=Uri.parse(imageUrl);
            holader.draweeView.setImageURI(uri);
            return convertView;
        }
    
    
        class ViewHolader {
            public SimpleDraweeView draweeView;
        }
    }

(4). 最后就是MainActivity的代码了，比较简单

public class MainActivity extends AppCompatActivity {
    
        ImageAdapter adapter;
        private List<String> mList;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            ListView lv = (ListView) findViewById(R.id.lv);
            mList=new ArrayList<>();
            initData();
            adapter = new ImageAdapter(MainActivity.this, mList);
            lv.setAdapter(adapter);
        }
    
        private void initData(){
            mList.add("http://img.mukewang.com/54780ea90001f3b406000338.jpg");
            mList.add("http://img.mukewang.com/547ed1c9000150cc06000338.jpg");
            mList.add("http://img.mukewang.com/54214727000160e306000338.jpg");
            mList.add("http://img.mukewang.com/54125edc0001ce6306000338.jpg");
            mList.add("http://img.mukewang.com/548165820001b4b006000338.jpg");
            mList.add("http://img.mukewang.com/53d74f960001ae9d06000338.jpg");
            mList.add("http://img.mukewang.com/547d5a45000156f406000338.jpg");
    
           ...
            mList.add("http://img.mukewang.com/5523711700016d1606000338.jpg");
            mList.add("http://img.mukewang.com/55249cf30001ae8a06000338.jpg");
            mList.add("http://img.mukewang.com/55237dcc0001128c06000338.jpg");
        }
    }

来张运行后的效果图，

![Center 1][]![Center 2][]

四、总结：

1.如果还需要使用Fresco加载一些其他功能，需要添加相应的依赖，

// 在 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'
    
      // 仅支持 WebP 静态图，需要添加
      compile 'com.facebook.fresco:webpsupport:0.12.0'

2. SimpleDraweeView属性说明，

fadeDuration 淡入淡出动画持续时间
    actualImageScaleType  实际图片缩放类型
    placeholderImage  占位图片，在图片没有加载出来之前显示
    placeholderImageScaleType 占位图片缩放类型
    failureImage  图片加载失败时显示-失败图 
    failureImageScaleType 失败图缩放类型
    retryImage  重试图(重复加载4次还是没有加载出来的时候才会显示 failureImage(失败图) 的图片)
    retryImageScaleType 重试图缩放类型
    progressBarImage 加载图
    progressBarImageScaleType 加载图的缩放类型
    progressBarAutoRotateInterval 加载图自动旋转间隔时间，直到实际图加载完毕
    backgroundImage 背景图
    overlayImage 叠加图
    pressedStateOverlayImage 按压状态显示的叠加图
    roundAsCircle 是否是圆形图
    roundedCornerRadius 圆角半径
    roundTopLeft 左上角是否是圆角
    roundTopRight  右上角是否是圆角
    roundBottomLeft 左下角是否是圆角
    roundBottomRight 右下角是否是圆角
    roundWithOverlayColor   圆形或圆角底下的叠加颜色  不可用图片
    roundingBorderWidth 圆形圆角边框宽度
    roundingBorderColor 圆形圆角边框颜色

PS 使用注意：

1.通常这一句将在Application的onCreate()中是比较合适的，如果只有一个Activity，那么加在Activity里也可以，但要在setContentView()之前，也就是要先初始化库，才能完成布局文件的加载。

2.SimpleDraweeView的width和height属性必须是明确值，而不能直接用wrap\_content这种内容填充的数值，当然有一种情况例外，就是宽度和高度有一个是固定的，然后设置了二者的比例，则另一个可以用wrap\_content，其实相当于二者都是固定的。

Demo下载链接，[http://download.csdn.net/detail/zxw136511485/9642233。][http_download.csdn.net_detail_zxw136511485_9642233]

[https_github.com_facebook_fresco]: https://github.com/facebook/fresco
[Fresco]: http://fresco-cn.org/docs/getting-started.html
[http_fresco-cn.org_docs]: http://fresco-cn.org/docs/
[URI]: http://fresco-cn.org/docs/supported-uris.html
[Center]: /images/20220716/140acb65ea174103a2f643d24b236e55.png
[Center 1]: https://img-blog.csdn.net/20160928143452376?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220716/d1121f79c0394b1faf307e9a2d20db5d.png
[http_download.csdn.net_detail_zxw136511485_9642233]: http://download.csdn.net/detail/zxw136511485/9642233