Android 開發 圖片網絡緩存加載框架Fresco


簡介

  Fresco是一個在Android應用程序中顯示圖像的強大系統。

Fresco負責圖像的加載和顯示。它將從網絡、本地存儲或本地資源加載圖像,圖像加載完成前會顯示一個占位圖片。它有兩個級別的緩存:一個在內存中,另一個在內部存儲器中。

在android 4.x及更低版本中,Fresco將圖像放在android內存的一個特殊區域。這可以讓您的應用程序運行得更快,減少因為內存不足的錯誤。

  github地址:https://github.com/facebook/fresco#requirements


  Fresco還支持:

  • 漸進式JPEG流
  • 顯示動畫gif和webp
  • 圖像加載和顯示的廣泛定制(將圖片變成圓形或者用有圓角的矩形)
  • 圖片加載中的占位圖、加載失敗的占位圖、重新加載的占位圖
      

主要依賴

implementation 'com.facebook.fresco:fresco:2.0.0'

其他依賴

compile 'com.facebook.fresco:animated-gif:1.5.0'//加載gif動圖需添加此庫
compile 'com.facebook.fresco:animated-webp:1.5.0'//加載webp動圖需添加此庫
compile 'com.facebook.fresco:webpsupport:1.5.0'//支持webp需添加此庫
compile 'com.facebook.fresco:imagepipeline-okhttp3:1.5.0'//網絡實現層使用okhttp3需添加此庫
compile 'jp.wasabeef:fresco-processors:2.1.0@aar'//用於提供fresco的各種圖片變換

初始化說明

//  使用Fresco需要初始化,建議是在基類里初始化

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

如何使用xml屬性

<!-- 其他元素-->
<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">
xmlns:fresco="http://schemas.android.com/apk/res-auto" 是關鍵。

使用說明

  在官方的https://www.fresco-cn.org/docs/index.html網站中提供非常詳細的使用說明,並且是中文文檔,直接查看即可。下面只提供一些簡單的基本屬性與使用說明。

基本屬性說明

<com.facebook.drawee.view.SimpleDraweeView
  android:id="@+id/my_image_view"
  android:layout_width="20dp"
  android:layout_height="20dp"
  fresco:fadeDuration="300"    //淡入淡出的動畫時間(圖片的加載會因為這個時間漸漸淡入)
  fresco:actualImageScaleType="focusCrop"    //實際加載成功后圖片尺寸類型
  fresco:placeholderImage="@color/wait_color"    //占位圖
  fresco:placeholderImageScaleType="fitCenter"      //占位圖尺寸類型
  fresco:failureImage="@drawable/error"    //加載失敗占位圖
  fresco:failureImageScaleType="centerInside"    //加載失敗占位圖尺寸類型
  fresco:retryImage="@drawable/retrying"    //重新加載占位圖
  fresco:retryImageScaleType="centerCrop"    //重新加載占位圖尺寸類型
  fresco:progressBarImage="@drawable/progress_bar"    //加載中占位圖
  fresco:progressBarImageScaleType="centerInside"    //加載中占位圖尺寸類型
  fresco:progressBarAutoRotateInterval="1000"      //加載中占位圖的旋轉動畫時間(旋轉一圈的時間)
  fresco:backgroundImage="@color/blue"    //設置背景圖或者背景顏色
  fresco:overlayImage="@drawable/watermark"    //疊加圖(會覆蓋其他圖片,顯示在最上面)
  fresco:pressedStateOverlayImage="@color/red"    //點擊按壓后顯示的疊加圖
  fresco:roundAsCircle="false"      //圓形圖 true圓形 false不是圓形
  fresco:roundedCornerRadius="1dp"    //矩形圓角圖 
  fresco:roundTopLeft="true"    //左上是否圓角 true是 false否
  fresco:roundTopRight="false"    //右上是否圓角 
  fresco:roundBottomLeft="false"    //左下是否圓角
  fresco:roundBottomRight="true"    //右下是否圓角
  fresco:roundWithOverlayColor="@color/corner_color"    //設置圓形圖或者圓角后的背景顏色(不可以使用圖片)
  fresco:roundingBorderWidth="2dp"    //圓形圖或者圓角圖邊框的寬度
  fresco:roundingBorderColor="@color/border_color"    //圓形圖或者圓角圖邊框顏色
/>

圖片尺寸縮放類型

  • 類型描述
  • center居中,無縮放
  • centerCrop保持寬高比縮小或放大,使得兩邊都大於或等於顯示邊界。居中顯示。
  • focusCrop同centerCrop, 但居中點不是中點,而是指定的某個點
  • centerInside使兩邊都在顯示邊界內,居中顯示。如果圖尺寸大於顯示邊界,則保持長寬比縮小圖片。
  • fitCenter保持寬高比,縮小或者放大,使得圖片完全顯示在顯示邊界內。居中顯示
  • fitStart同上。但不居中,和顯示邊界左上對齊
  • fitEnd同fitCenter, 但不居中,和顯示邊界右下對齊
  • fitXY不保存寬高比,填充滿顯示邊界
  • none如要使用tile mode顯示, 需要設置為none

基本的加載網絡圖片

Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);

先顯示低分辨率的圖,然后是高分辨率的圖

假設你要顯示一張高分辨率的圖,但是這張圖下載比較耗時。與其一直顯示占位圖,你可能想要先下載一個較小的縮略圖。

這時,你可以設置兩個圖片的URI,一個是低分辨率的縮略圖,一個是高分辨率的圖。

Uri lowResUri, highResUri;
DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setLowResImageRequest(ImageRequest.fromUri(lowResUri))
    .setImageRequest(ImageRequest.fromUri(highResUri))
    .setOldController(mSimpleDraweeView.getController())
    .build();
mSimpleDraweeView.setController(controller);

動圖無法在低分辨率那一層顯示。

SimpleDraweeView 自適應圖片高度

因為SimpleDraweeView 自身不會根據實際圖片改變高度或寬度,所以我們需要添加控制器監聽,來監聽圖片返回時的圖片信息重新設置view的高度或者寬度。下面的例子就是根據圖片高度自適應SimpleDraweeView的高度。

/**
     * 設置圖片view並且自適應高度
     */
    private void setImageView(SimpleDraweeView simpleDraweeView, String uri) {
        ControllerListener controllerListener = new ControllerListener() {
            @Override
            public void onSubmit(String id, Object callerContext) {
                //在提交圖像請求之前回調

            }

            @Override
            public void onFinalImageSet(String id, @Nullable Object imageInfo, @Nullable Animatable animatable) {
                //在設置最終圖像后回調
                if (imageInfo == null){
                    return;
                }
                ImageInfo info = (ImageInfo) imageInfo;
                ViewGroup.LayoutParams layoutParams = simpleDraweeView.getLayoutParams();
                layoutParams.height = info.getHeight();
                simpleDraweeView.setLayoutParams(layoutParams);

            }

            @Override
            public void onIntermediateImageSet(String id, @Nullable Object imageInfo) {
                //設置任何中間圖像后回調

            }

            @Override
            public void onIntermediateImageFailed(String id, Throwable throwable) {
                //在獲取中間圖像失敗后回調

            }

            @Override
            public void onFailure(String id, Throwable throwable) {
                //在獲取最終圖像失敗后回調

            }

            @Override
            public void onRelease(String id) {
                //在控制器釋放獲取的圖像后回調

            }
        };
        DraweeController draweeController = Fresco.newDraweeControllerBuilder()
                .setControllerListener(controllerListener)
                .setUri(uri)
                .build();
        simpleDraweeView.setController(draweeController);

    }

 

加載顯示本地圖片

類型 Scheme 示例
遠程圖片 http://, https:// HttpURLConnection 或者參考 使用其他網絡加載方案
本地文件 file:// FileInputStream
Content provider content:// ContentResolver
asset目錄下的資源 asset:// AssetManager
res目錄下的資源 res:// Resources.openRawResource
Uri中指定圖片數據 data:mime/type;base64, 數據類型必須符合 rfc2397規定 (僅支持 UTF-8)

 

 用法demo:

demo1:

Uri uri = Uri.parse("res://包名(實際可以是任何字符串甚至留空)/" + R.drawable.ic_launcher);

demo2:

Uri uri = Uri.parse("res://com.xxx.xxx/" + R.mipmap.photo);
userIcon.setImageURI(uri);

demo3:

Uri imageUri = Uri.parse("file://"+filePath);
image.setImageURI(imageUri);

demo4:

image.setImageURI("asset://android_asset/permissionimage/1.png");

另外,Fresco還有一個功能,它是支持自動顯示視頻縮略圖的.只要使用直接把視頻路徑導入就行.

清除指定路徑圖片緩存

                    ImagePipeline imagePipeline = Fresco.getImagePipeline(); //因為Fresco框架對同名文件會自動使用緩存,導致圖片會顯示之前的圖像,所以這里為了保證實時更新圖片需要清除這種圖片的緩存
                    Uri uri = Uri.parse("file://" + address);
                    imagePipeline.evictFromMemoryCache(uri);//從內存緩存中逐出
                    imagePipeline.evictFromDiskCache(uri);//從磁盤緩存中逐出
                    imagePipeline.evictFromCache(uri);//從緩存中逐出

 

設置磁盤緩存

ImagePipelineConfig.Builder imagePipelineConfigBuilder = ImagePipelineConfig.newBuilder(context);
imagePipelineConfigBuilder.setMainDiskCacheConfig(DiskCacheConfig.newBuilder(context)
.setBaseDirectoryPath(context.getExternalCacheDir())//設置磁盤緩存的路徑
.setBaseDirectoryName(BaseConstants.APP_IMAGE)//設置磁盤緩存文件夾的名稱
.setMaxCacheSize(MAX_DISK_CACHE_SIZE)//設置磁盤緩存的大小
.build());
ImagePipelineConfig config = imagePipelineConfigBuilder.build();
Fresco.initialize(context, config);//初始化


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM