Fresco 框架的基本使用

Fresco 框架下載地址:https://github.com/facebook/fresco   


首先在Android studio中導入依賴:

compile 'com.facebook.fresco:fresco:0.11.0'

在清單文件中配置網絡權限
<uses-permission android:name="android.permission.INTERNET" />


1.在application中初始化:
Fresco.initialize(this);
注意:記得在Androidmanifest.xml清單文件中聲明Aplication

2.展示圖片 ,用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/image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="10dp"
fresco:roundAsCircle="true"
fresco:placeholderImage="@mipmap/ic_launcher" />
</LinearLayout>

使用SimpleDraweeView代替ImageView,同時Fresco不支持wrap_content屬性,必須有明確的寬和高
在使用SimpleDraweeView時,最好一個imageview的屬性都不要在使用

屬性介紹展示:
fresco:placeholderImage="@mipmap/icon_placeholder"//設置佔位圖
fresco:placeholderImageScaleType="fitCenter"//設置佔位圖片縮放類型
fresco:actualImageScaleType="focusCrop"//實際圖片縮放類型
fresco:progressBarImage="@mipmap/icon_progress_bar"//正在加載的圖片
fresco:progressBarImageScaleType="centerInside"//正在加載圖片的縮放類型
fresco:progressBarAutoRotateInterval="5000"//正在加載圖的旋轉間隔,直到實際圖加載完畢
fresco:failureImage="@mipmap/icon_failure"//加載失敗顯示的圖片
fresco:failureImageScaleType="centerInside"//失敗顯示的圖片的類型
fresco:retryImage="@mipmap/icon_retry"//失敗重試的圖片------和加載失敗的圖片一起設置,當失敗一定次數後不顯示重試圖片,顯示加載失敗圖片
fresco:retryImageScaleType="centerCrop"//失敗重試的圖片的縮放類型
fresco:fadeDuration="5000"//淡進淡出動畫時間,毫秒
fresco:backgroundImage="@android:color/holo_orange_light"//背景圖
//疊加圖顯示在最上面
fresco:pressedStateOverlayImage="@android:color/holo_green_dark"//按壓下顯示的疊加圖
fresco:overlayImage="@android:color/black"//疊加圖
 
//同時設置圓形和圓角時,顯示爲圓形圖
fresco:roundAsCircle="true"//是否是圓形圖
 
fresco:roundedCornerRadius="30dp"//設置圓角半徑
//分別設置4個角是否是圓形圖
fresco:roundTopLeft="true"
fresco:roundTopRight=""
fresco:roundBottomLeft=""
fresco:roundBottomRight=""
//給圓形圖加邊框
fresco:roundingBorderWidth="10dp"//設置邊框寬度
fresco:roundingBorderColor="@android:color/black"//設置邊框顏色
 
fresco:roundWithOverlayColor="@android:color/darker_gray"//圓形和圓角圖的疊加顏色,就是在方形控件,圖片空白區域顯示的顏色
 
注意:不能直接設置實際需要顯示的圖片,但是可以設置佔位圖,作爲圖片顯示

上面的ImageScaleType有下面一些縮放類型:

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

 

3.實例化控件:
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.image);
draweeView.setImageURI(url);顯示 地址圖片

在activity中加載圖片顯示,Fresco 不支持相對路徑的URI. 所有的URI都必須是絕對路徑,並且帶上該URI的scheme。
public class MainActivity extends AppCompatActivity {
private SimpleDraweeView sdv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Fresco.initialize(this);//Fresco的初始化,必須調用在setContentView之前
setContentView(R.layout.activity_main);
sdv = (SimpleDraweeView) findViewById(R.id.main_simple_drawee_view);
Uri uri = Uri.parse("http://dynamic-image.yesky.com/740x-/uploadImages/2015/163/50/690V3VHW0P77.jpg");
// sdv.setImageURI(uri);
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)
.setAutoPlayAnimations(true)
.build();
sdv.setController(controller);
}
}

4.多圖請求

有時候需要加載很多圖片,這個時候如果網絡情況不是很好的情況下,一直顯示佔位圖,體驗也不是很好,我們可以先顯示一個低分辨率的圖片,等到大圖加載完成之後,在顯示真正的圖片。

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

5.當然如果你想監聽加載的過程,就加一個ControllerListenr
//寫一個監聽器 監聽圖片加載
ControllerListener listener = new BaseControllerListener(){
/**
* 當圖片加載成功時會執行的方法
* @param id
* @param imageInfo
* @param animatable
*/
@Override
public void onFinalImageSet(String id, Object imageInfo, Animatable animatable) {
super.onFinalImageSet(id, imageInfo, animatable);
}
/**
* 圖片加載失敗時調用的方法
* @param id
* @param throwable
*/
@Override
public void onFailure(String id, Throwable throwable) {
super.onFailure(id, throwable);
}
/**
* 如果圖片使用漸進式,這個方法將會被回調
* @param id
* @param throwable
*/
@Override
public void onIntermediateImageFailed(String id, Throwable throwable) {
super.onIntermediateImageFailed(id, throwable);
}
};
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)
.setAutoPlayAnimations(true)
.setControllerListener(listener)
.build();
sdv.setController(controller);



Fresco 框架的使用就介紹到這裏了,詳細請參考
官方文檔 https://github.com/facebook/fresco  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章