標(biāo)題: 商城開(kāi)發(fā)筆記-07-Fresco圖片加載框架的基本使用詳解 [打印本頁(yè)]
作者: 51黑bing    時(shí)間: 2016-3-22 17:22
標(biāo)題: 商城開(kāi)發(fā)筆記-07-Fresco圖片加載框架的基本使用詳解
一、Fresco的簡(jiǎn)介


       Fresco是目前最強(qiáng)大的圖片加載組件。以前我們常用的比較火的是：
Android圖片異步加載框架Android-Universal-Image-Loader。
       Fresco中設(shè)計(jì)有一個(gè)叫做imagepipeline的模塊。它負(fù)責(zé)從網(wǎng)絡(luò)，從本地文件系統(tǒng)，本地資源加載圖片。 為了最大限度節(jié)省空間和CPU時(shí)間，它含有3級(jí)緩存設(shè)計(jì)（2級(jí)內(nèi)存，1級(jí)文件）。
       Fresco中設(shè)計(jì)有一個(gè)叫做Drawees模塊，方便地顯示loading圖，當(dāng)圖片不再顯示在屏幕上時(shí)，及時(shí)地釋放內(nèi)存和空間占用。
       Fresco支持Android2.3(APIlevel 9)及其以上系統(tǒng)。
       感覺(jué)好叼用木有，下面給出Fresco的GitHub地址：
       https://github.com/facebook/fresco

       這是它的官方的中文使用文檔介紹：
       http://fresco-cn.org/docs/index.html
       這是它的官方Logo：
                              

二、Fresco的重要特點(diǎn)
特點(diǎn)1-內(nèi)存管理
       一個(gè)沒(méi)有未壓縮的圖片，即Android中的Bitmap，占用大量的內(nèi)存。大的內(nèi)存占用勢(shì)必引發(fā)更加頻繁的GC。 在5.0以下，GC將會(huì)顯著地引發(fā)界面卡頓。
在5.0以下系統(tǒng)，Fresco將圖片放到一個(gè)特別的內(nèi)存區(qū)域。當(dāng)然，在圖片不顯示的時(shí)候，占用的內(nèi)存會(huì)自動(dòng)被釋放。 這會(huì)使得APP更加流暢，減少因圖片內(nèi)存占用而引發(fā)的OOM。

給圖片分配內(nèi)存的方式：
Fresco：Ashmem(系統(tǒng)匿名共享內(nèi)存)
其他：Java Heap

特點(diǎn)2-漸進(jìn)式呈現(xiàn)圖片
       漸進(jìn)式的JPEG圖片格式已經(jīng)流行數(shù)年了，漸進(jìn)式圖片格式先呈現(xiàn)大致的圖片輪廓，然后隨著圖片下載的繼續(xù)， 呈現(xiàn)逐漸清晰的圖片，這對(duì)于移動(dòng)設(shè)備，尤其是慢網(wǎng)絡(luò)有極大的利好，可帶來(lái)更好的用戶體驗(yàn)。

特點(diǎn)3-Gif圖和WebP格式
       支持加載Gif圖，支持WebP格式。

特點(diǎn)4-圖像的呈現(xiàn)
自定義居中焦點(diǎn)(對(duì)人臉等圖片顯示非常有幫助)。
圓角圖，當(dāng)然圓圈也行。
下載失敗之后，點(diǎn)擊重現(xiàn)下載。
自定義占位圖，自定義overlay, 或者進(jìn)度條。
指定用戶按壓時(shí)的overlay。

                                                   特點(diǎn)5-圖像的加載
為同一個(gè)圖片指定不同的遠(yuǎn)程路徑，或者使用已經(jīng)存在本地緩存中的圖片。
先顯示一個(gè)低解析度的圖片，等高清圖下載完之后再顯示高清圖。
加載完成回調(diào)通知。
對(duì)于本地圖，如有EXIF縮略圖，在大圖加載完成之前，可先顯示縮略圖。
縮放或者旋轉(zhuǎn)圖片。
處理已下載的圖片。
WebP支持。
三、Fresco的基本使用
1、在Gradle中引入Fresco的依賴庫(kù)，這些相信大家都熟悉了，不再啰嗦了。
compile 'com.facebook.fresco:fresco:0.9.0'
2、配置自己的Application，并且在onCreate的時(shí)候調(diào)用
Fresco.initialize(this);
在清單文件中添加網(wǎng)絡(luò)權(quán)限
<uses-permission android:name="android.permission.INTERNET"/>
配置Application不要忘了
android:name=".MyApplication"
Application的使用介紹：
http://www.cnblogs.com/renqingping/archive/2012/10/24/Application.html
3、在布局文件當(dāng)中放置我們的Fresco的常用控件。以SimpleDraweeView為例，用于放置圖片。
<?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:layout_height="match_parent">
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/my_image_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        fresco:placeholderImage="@mipmap/before"
        />
</LinearLayout>

下面對(duì)常用屬性進(jìn)行說(shuō)明：
android:layout_width="20dp"   
// 不支持wrap_content， 如果要設(shè)置寬高比, 需要在Java代碼中指定setAspectRatio(floatratio);

android:layout_height="20dp"   
// 不支持wrap_content

fresco:placeholderImage="@color/wait_color"
// 下載成功之前顯示的圖片

fresco:placeholderImageScaleType="fitCenter"
// 設(shè)置圖片縮放. 通常使用focusCrop,該屬性值會(huì)通過(guò)算法把人頭像放在中間

fresco:failureImage="@drawable/error"
// 加載失敗的時(shí)候顯示的圖片

fresco:failureImageScaleType=“centerInside"
// 設(shè)置圖片縮放

fresco:retryImage="@drawable/retrying"
// 加載失敗,提示用戶點(diǎn)擊重新加載的圖片(會(huì)覆蓋failureImage的圖片)

fresco:retryImageScaleType="centerCrop"

// 是不是設(shè)置圓形方式顯示圖片
fresco:roundAsCircle="false"


// 圓角設(shè)置
    fresco:roundedCornerRadius="1dp"
    fresco:roundTopLeft="true"
    fresco:roundTopRight="false"
    fresco:roundBottomLeft="false"
    fresco:roundBottomRight="true"
    fresco:roundWithOverlayColor="@color/corner_color"
    fresco:roundingBorderWidth="2dp"
   fresco:roundingBorderColor="@color/border_color"


4、代碼中，只要配置一個(gè)圖片對(duì)應(yīng)的Uri就可以了，剩下的，F(xiàn)resco會(huì)替你完成:
·                        顯示占位圖直到加載完成；
·                        下載圖片；
·                        緩存圖片；
·                        圖片不再顯示時(shí)，從內(nèi)存中移除；
等等等等。


三、Fresco的漸進(jìn)式顯示網(wǎng)絡(luò)圖片

    下面開(kāi)始，楠妹妹要給大家介紹Fresco的一些比較叼的而且常用到的一些功能，先從漸進(jìn)式顯示網(wǎng)絡(luò)圖片開(kāi)始吧，至于其他功能自行去查看API文檔。先聲明，這個(gè)功能只能用于請(qǐng)求網(wǎng)絡(luò)圖片。

    這是官方的描述：
       Fresco 支持漸進(jìn)式的網(wǎng)絡(luò)JPEG圖。在開(kāi)始加載之后，圖會(huì)從模糊到清晰漸漸呈現(xiàn)。
    你可以設(shè)置一個(gè)清晰度標(biāo)準(zhǔn)，在未達(dá)到這個(gè)清晰度之前，會(huì)一直顯示占位圖。
漸進(jìn)式JPEG圖僅僅支持網(wǎng)絡(luò)圖

    核心的代碼就是給draweeView配置一個(gè)可以顯示漸進(jìn)式JPEG的控制器。由于網(wǎng)絡(luò)太快的原因，效果不會(huì)很明顯，不過(guò)我們的目的已經(jīng)達(dá)到了。

    ImageRequest request = ImageRequestBuilder.newBuilderWithSource(Uri.parse("圖片網(wǎng)址"))
        .setProgressiveRenderingEnabled(true)
        .build();
PipelineDraweeControllercontroller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder()
        .setImageRequest(request)
        .build();
draweeView.setController(controller);


四、多圖請(qǐng)求

    多圖請(qǐng)求就是先顯示模糊的圖片，等到大圖加載成功之后再顯示大圖。

    核心代碼也是通過(guò)控制器實(shí)現(xiàn)，并沒(méi)有什么技術(shù)含量。

DraweeControllercontroller = Fresco.newDraweeControllerBuilder()
        .setLowResImageRequest(ImageRequest.fromUri("低分辨率"))
        .setImageRequest(ImageRequest.fromUri("高分辨率"))
        .build();
draweeView.setController(controller);

五、事件監(jiān)聽(tīng)

1、首先新建一個(gè)監(jiān)聽(tīng)器。至于回調(diào)何時(shí)調(diào)用，不再贅述。

ControllerListener<ImageInfo> listener = new ControllerListener<ImageInfo>() {
    @Override
    public void onSubmit(String id, Object callerContext) {
    }
    //圖片加載成功的時(shí)候
    @Override
    public void onFinalImageSet(String id, ImageInfo imageInfo, Animatableanimatable) {
    }
    @Override
    public void onIntermediateImageSet(String id, ImageInfo imageInfo)  {
    }
    @Override
    public void onIntermediateImageFailed(String id, Throwable throwable)  {
    }
    //圖片加載失敗
    @Override
    public void onFailure(String id, Throwable throwable) {
    }
    @Override
    public void onRelease(String id) {
    }
};

2、注意下面紅色代碼，controller設(shè)置控制器就可以了。

DraweeControllercontroller = Fresco.newDraweeControllerBuilder()
        .setLowResImageRequest(ImageRequest.fromUri("低分辨率"))
        .setImageRequest(ImageRequest.fromUri("高分辨率"))
       .setControllerListener(listener)
        .build();
draweeView.setController(controller);









歡迎光臨 (http://www.torrancerestoration.com/bbs/) Powered by Discuz! X3.1