商城项目实战 | 7.1 强大的 Fresco 专为 Andro

2017-04-21 本文已影响278人菜鸟窝

本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
140套Android优秀开源项目源码，领取地址：http://mp.weixin.qq.com/s/afPGHqfdiApALZqHsXbw-A

Fresco 是由 Facebook 开源的一款专门为 Android 图片加载的组件，图片加载的开源框架有不少，比如大家所熟悉的 Android-Universal-Image-Loader 、Picasso 等等，但是 Fresco 因其有着独特的优势而受到广大开发者的喜爱，本篇文章就一起来学习强大的 Fresco 到底有哪些迷人之处，同时又是如何使用的。

Fresco 的详细介绍

1. Fresco 是什么

首先，Fresco 是一款开源的图片加载组件，也是目前最强大的图片加载组件。
其次，Fresco 中设计有一个叫做 image pipeline 的模块。它负责从网络，从本地文件系统，本地资源加载图片。为了最大限度节省空间和CPU时间，它含有3级缓存设计（2级内存，1级文件）。
另外，还有一个特别的地方，Fresco 中设计有一个叫做 Drawees 模块，方便地显示 loading 图，当图片不再显示在屏幕上时，及时地释放内存和空间占用。
同时，Fresco 支持 Android 2.3(API level 9)及其以上版本。

2. Fresco 的独特之处

Fresco 作为众多开源图片加载组件之一，可以受到广大开发者的喜爱，自然有着它的独特之处。

2.1 内存管理

一个没有未压缩的图片，即 Android 中的 Bitmap，占用大量的内存。大的内存占用势必引发更加频繁的GC。在5.0以下，GC 将会显著地引发界面卡顿。
在5.0以下系统，Fresco 将图片放到一个特别的内存区域，也就是 Ashmem (系统匿名共享内存)。当然，在图片不显示的时候，占用的内存会自动被释放。这会使得 APP 更加流畅，减少因图片内存占用而引发的 OOM。

2.2 渐进式呈现图片

Fresco 加载图片时，可以实现渐进式呈现图片，渐进式的 JPEG 图片格式已经流行数年了，渐进式图片格式先呈现大致的图片轮廓，然后随着图片下载的继续，呈现逐渐清晰的图片，这对于移动设备，尤其是慢网络有极大的利好，可带来更好的用户体验。

2.3 支持Gif图和WebP格式

作为加载组件，Fresco 不仅支持简单的 JPG、PNG 格式的图片加载，还同时支持 Gif 和 WebP 格式的图片加载，非常强大。

2.4 图像的呈现方式

Fresco 的图像呈现方式也很特别，可以自定义居中焦点(对人脸等图片显示非常有帮助)，支持圆角图，当然圆圈也行，并且下载失败之后，点击可以重新下载，特别是可以自定义占位图，自定义 overlay, 或者进度条，同时可以指定用户按压时的 overlay。

2.5 图像的加载

图像的加载时很重要的一部分，Fresco 可以为同一个图片指定不同的远程路径，或者使用已经存在本地缓存中的图片，加载时先显示一个低解析度的图片，等高清图下载完之后再显示高清图，等到加载完成时回调通知，并且对于本地图，如有 EXIF 缩略图，在大图加载完成之前，可先显示缩略图。至于缩放或者旋转图片和处理已下载的图片，Fresco 都是可以做到的。

Fresco 的基本使用

前面已经对 Fresco 做了非常详细的介绍了，对于 Fresco 一定很感兴趣吧，下面就开始使用它吧。

1. 添加 Gradle 依赖

在使用 Fresco 之前，一定要记得先使用 Gradle 添加对 Fresco 的依赖，代码如下。、

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.facebook.fresco:fresco:0.12.0'
}

2. 添加权限

加载网络图片时，需要一定的网络权限，所以必须添加网络权限。

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

3. 初始化 Fresco

在加载图片之前，你必须初始化 Fresco 类。你只需要调用 Fresco.initialize() 一次即可完成初始化，在 Application 里面做这件事再适合不过了（如下面的代码），注意多次的调用初始化是无意义的。

public class CniaoApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this,config);
    }
}

下面就是需要在 AndroidManifest.xml 中指定相应的 Application 类。

<application
        android:name=".CniaoApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
     .......
</application>

4. 添加 SimpleDraweeView

首先，在 xml 布局文件 Layout 中, 加入命名空间。

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

然后在布局中加入 SimpleDraweeView。

<com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/image_view"
        android:layout_width="500dp"
        android:layout_height="300dp"
        fresco:placeholderImage="@drawable/default_loading"
/>

5. 加载图片

在 Activity/Fragment 中写入图片加载即可。

public class MainActivity extends AppCompatActivity {
    private  String img_url="http://img4q.duitang.com/uploads/item/201411/20/20141120132318_3eAuc.thumb.700_0.jpeg";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Uri uri = Uri.parse(img_url);
        SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.image_view);
        draweeView.setImageURI(uri);
     }
}

6. 效果图

运行代码获取效果图，如下图所示。

效果图

Fresco 的基本使用就是这些了，功能很强大，使用很简单，更多的使用可以参考 Fresco 官网