簡介
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);//初始化
