找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

搜索
查看: 3208|回復(fù): 0
打印 上一主題 下一主題
收起左側(cè)

商城開發(fā)筆記-07-Fresco圖片加載框架的基本使用詳解

[復(fù)制鏈接]
跳轉(zhuǎn)到指定樓層
樓主
ID:109770 發(fā)表于 2016-3-22 17:22 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
一、Fresco的簡介


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

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

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

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

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

特點3-Gif圖和WebP格式
       支持加載Gif圖,支持WebP格式。

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

                                                   特點5-圖像的加載
為同一個圖片指定不同的遠程路徑,或者使用已經(jīng)存在本地緩存中的圖片。
先顯示一個低解析度的圖片,等高清圖下載完之后再顯示高清圖。
加載完成回調(diào)通知。
對于本地圖,如有EXIF縮略圖,在大圖加載完成之前,可先顯示縮略圖。
縮放或者旋轉(zhuǎn)圖片。
處理已下載的圖片。
WebP支持。
三、Fresco的基本使用
1、在Gradle中引入Fresco的依賴庫,這些相信大家都熟悉了,不再啰嗦了。
compile 'com.facebook.fresco:fresco:0.9.0'
2、配置自己的Application,并且在onCreate的時候調(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>

下面對常用屬性進行說明:
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,該屬性值會通過算法把人頭像放在中間

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

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

fresco:retryImage="@drawable/retrying"
// 加載失敗,提示用戶點擊重新加載的圖片(會覆蓋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、代碼中,只要配置一個圖片對應(yīng)的Uri就可以了,剩下的,F(xiàn)resco會替你完成:
·                        顯示占位圖直到加載完成;
·                        下載圖片;
·                        緩存圖片;
·                        圖片不再顯示時,從內(nèi)存中移除;
等等等等。


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

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

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

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

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


四、多圖請求

    多圖請求就是先顯示模糊的圖片,等到大圖加載成功之后再顯示大圖。

    核心代碼也是通過控制器實現(xiàn),并沒有什么技術(shù)含量。

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

五、事件監(jiān)聽

1、首先新建一個監(jiān)聽器。至于回調(diào)何時調(diào)用,不再贅述。

ControllerListener<ImageInfo> listener = new ControllerListener<ImageInfo>() {
    @Override
    public void onSubmit(String id, Object callerContext) {
    }
    //圖片加載成功的時候
    @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);





分享到:  QQ好友和群QQ好友和群 QQ空間QQ空間 騰訊微博騰訊微博 騰訊朋友騰訊朋友
收藏收藏 分享淘帖 頂 踩
回復(fù)

使用道具 舉報

您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規(guī)則

手機版|小黑屋|51黑電子論壇 |51黑電子論壇6群 QQ 管理員QQ:125739409;技術(shù)交流QQ群281945664

Powered by 單片機教程網(wǎng)

快速回復(fù) 返回頂部 返回列表