PS：Fresco這個框架出的有一陣子了,也是現在非常火的一款圖片加載框架.聽說內部實現的挺牛逼的,雖然自己還沒研究原理.不過先學了一下基本的功能,感受了一下這個框架的強大之處.本篇只說一下在xml中設置屬性的相關用法.
0.引入Fresco以及相關注意事項。
1.PlaceHolderImage占位圖
2.FailureImage加載失敗時顯示的圖片
3.RetryImage重新加載的圖片
4.ProgressBarImage加載時顯示的進度圖片
5.BackgroundImage背景圖
6.OverlayImage疊加圖
7.多種效果結合加載圖片
8.圓形頭像，圓角頭像以及背景疊加
9.圖像邊框
先簡單的介紹一下Fresco，如果只是想對網絡圖片進行加載以及顯示一些特效，那么SimpleDraweeView就基本上可以滿足我們的需求了 ,Fresco是使用Image Pipeline來實現對圖片的管理和獲取的，SimpleDraweeView是對ImageView的一個封裝，并且內部使用了Image Pipeline管理圖片的思想和方式，因此我們如果沒什么特殊的需求，盡量使用SimpleDraweeView.這也是官網的一個建議。
核心類：DraweeView(子類：SimpleDraweeView),DraweeHierarchy(子類：GenericDraweeHierarchy),DraweeController。(類似MVC)
我在這里也就基本上使用了這三個類。DraweeHierarchy，DraweeController使用了Build模式去實例化對象。核心類也就基本介紹完了，這里只是簡單的介紹，不涉及原理的東西。
0.引入Fresco
compile 'com.facebook.fresco:fresco:0.14.0'
Fresco的引入比較的簡單，我們只需要在build.gradle中添加就可以，Github上提供的Demo比較的難抽取，并且實際運行起來并沒有過多的效果，只是針對多個圖片加載框架在加載圖片時的性能進行了對比。如果想看一下官方的運行效果。會在文章最后提供源代碼。
需要注意的一點就是，我們在使用Fresco之前首先要進行初始化操作。要放在布局加載之前，否則setContentView解析xml的時候會出錯。
@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Fresco.initialize(this); setContentView(R.layout.activity_simple_drawee);}1.PlaceHolderImage
占位圖，理解起來也比較的簡單，也就是在沒有任何圖片加載的時候顯示的默認圖片。
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/placeHolderImageDraweeView" android:layout_margin="5dp" android:layout_width="40dp" android:layout_height="40dp" fresco:placeholderImage="@drawable/placeholder_image" fresco:placeholderImageScaleType="fitCenter"/>
Java代碼中我們需要為這個SimpleDraweeView設置相關的控制器。這里初始化了GenericDraweeHierarchy,控制圖片的淡入淡出的效果時間，同時設置控制器顯示需要加載的圖片的url.在加載這個過程中，我們可以看到占位圖會被加載的圖片替換掉。
GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources()); /** * 設置淡入淡出效果的顯示時間 * */GenericDraweeHierarchy hierarchy = builder.setFadeDuration(1000).build();DraweeController placeHolderDraweeController = Fresco.newDraweeControllerBuilder() .setUri("http://avatar.csdn.net/4/E/8/1_y1scp.jpg") //為圖片設置url .setTapToRetryEnabled(true) //設置在加載失敗后,能否重試 .setOldController(placeHolderImageDraweeView.getController()) .build();placeHolderImageDraweeView.setController(placeHolderDraweeController);placeHolderImageDraweeView.setHierarchy(hierarchy);2.FailureImage加載失敗時顯示的圖片
當圖片加載失敗之后我們也是需要有默認圖片去進行填充的。那么SimpleDraweeView也可以實現這個功能，實現方式也非常的簡單。
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/failureImageDraweeView" android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:failureImage="@drawable/error" fresco:failureImageScaleType="centerInside"/>
這里我們只需要設置failureImage屬性就可以完成。這里我們仍然設置一個控制器。
/** * 任意加載一個url,url是不存在的.因此顯示加載失敗的圖片. * */DraweeController failureImageDraweeController = Fresco.newDraweeControllerBuilder() .setUri("ssss") .setTapToRetryEnabled(false) //同時設置不可重試. .setOldController(failureImageDraweeView.getController()) .build();failureImageDraweeView.setController(failureImageDraweeController);這里設置一個錯誤的url，那么肯定會加載失敗的，這時就會顯示加載失敗的圖片了。
3.RetryImage重新加載的圖片
RetryImage表示的是圖片加載失敗之后，可以顯示一個圖片，用于重試操作，如果多次重試還是加載不出圖片，那么顯示加載失敗的圖片。
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/retryImageDraweeView" android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:retryImage="@drawable/retry" fresco:retryImageScaleType="centerCrop" fresco:failureImage="@drawable/error"/>
重新加載顯示的圖片只需要改成上面的屬性即可，這里控制器基本和failureImage的控制器基本是相同的，我們只需要將重試的屬性設置為ture就可以了。這里如果圖片加載失敗，那么Image Pipeline能夠重試四次，如果仍然無法加載成功，那么顯示加載失敗的圖片。
/** * 任意加載一個url,顯示重新加載時圖片的點擊,加載失敗的時候,Image pipeline會重試四次, * 如果還是加載不出圖像,那么顯示加載失敗圖片. * */DraweeController retryImageDraweeController = Fresco.newDraweeControllerBuilder() .setUri("aaaa") .setTapToRetryEnabled(true) .setOldController(retryImageDraweeView.getController()) .build();retryImageDraweeView.setController(retryImageDraweeController); 4.ProgressBarImage
進度顯示圖片，圖片在加載的時候往往是需要顯示進度的，或者顯示一個加載進度的圖片與用戶進行交互，那么Fresco的ProgressBarImage可以幫助我們完成這個功能，在顯示圖片的同時，圖片同時也是旋轉顯示的。
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/progressBarImageDraweeView" android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:progressBarImage="@drawable/progress_image" fresco:progressBarAutoRotateInterval="5000" fresco:progressBarImageScaleType="centerInside"/>
這里只需要設置ProgressBarImage屬性就可以了，這里progressBarAutoRotateInterval表示的是自動旋轉的間隔。設置的數值越小，旋轉的速度越快。控制器的代碼就沒必要貼出來了，和上面的控制器基本是相同的，只需要設置一個正確的uri就可以了。
5.BackGroundImage
背景圖一般就是底色，感覺和placeHolderImage效果差不多，雖然還是有區別的，只是圖片在加載過程中會始終顯示背景圖，一旦圖片加載成功之后，那么后續的圖片將直接覆蓋背景圖，并且沒有疊加的效果，也就是說我們加載的圖片不會收到背景圖片影響。他和疊加圖是有區別的.
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/backgroundImageDraweeView" android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:backgroundImage="@color/blue"/>
這里控制器的代碼也不進行粘貼了，沒有特殊要求的話，都和上面的控制器基本是相同的。
6.OverlayImage
疊加圖和BackGroundImage就有區別了，疊加圖是會影響加載的圖片的，比如說我們為SimpleDraweeView設置了一個加載的圖片，同時設置了一個疊加圖，那么加載后的圖片會收到疊加圖的影響的，二者會產生疊加效果。
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/overlayImageDraweeView" android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:overlayImage="@color/overlay"/>
7.多種效果加載圖片
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/multiEffectSuccessSimpleDraweeView" android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:placeholderImage="@drawable/placeholder_image" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@drawable/progress_image" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@drawable/error" fresco:failureImageScaleType="centerInside" fresco:retryImage="@drawable/retry" fresco:retryImageScaleType="centerCrop" />
這里使用了多種效果結合來完成圖片的顯示，首先有一個占位圖，然后設置圖片在加載時顯示的圖片，用于和用戶完成交互功能，如果成功那么顯示加載后的圖片，如果失敗，那么顯示重新加載的圖片，如果重復了四次仍然無法完成加載，那么就顯示加載失敗的圖片。相關的控制器也比較的簡單，和上面差不多。簡單貼一下。
/** * 多種效果結合：加載圖片成功和失敗 * */DraweeController multiEffectSuccessController = Fresco.newDraweeControllerBuilder() .setUri("http://avatar.csdn.net/4/E/8/1_y1scp.jpg") //想要看到失敗效果,設置一個錯誤的uri就可以了 .setTapToRetryEnabled(true) .setOldController(multiEffectSuccessSimpleDraweeView.getController()) .build();multiEffectSuccessSimpleDraweeView.setController(multiEffectSuccessController);8.圓形頭像的實現
我們在寫app的時候，經常會使用到圓形頭像這一個功能，因此我們一般不得不自定義View或者是使用其他框架等等，有了Fresco那么他會幫助你完成這個功能，而且輕快又簡便只需要添加一行代碼就可以完成了。
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/circleImageDraweeView" android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:placeholderImage="@drawable/placeholder_image" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@drawable/progress_image" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@drawable/error" fresco:failureImageScaleType="centerInside" fresco:retryImage="@drawable/retry" fresco:retryImageScaleType="centerCrop" fresco:roundAsCircle="true" fresco:roundingBorderWidth="2dp" fresco:roundingBorderColor="@color/colorAccent"/>
雖然看著挺多，其實實現圓形頭像只需要添加roundAsCircle這個屬性為true就搞定了，我這里添加了roundingBorderWidth其實是為這個圖片加上邊框和相關的邊框顏色而已。這里也就順便把邊框線這個功能直接說了。
9.圓角圖片
圓角圖片和圓形圖片的區別大家肯定是知道的，并且也比較的常用，在Fresco中也只需要設置具體屬性就可以了。
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/roundCornerImageDraweeView" android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:roundedCornerRadius="10dp" fresco:roundTopLeft="true" fresco:roundTopRight="true" fresco:roundBottomLeft="true" fresco:roundBottomRight="true" fresco:roundWithOverlayColor="@color/overlay"/>
我們只需要設置roundCornerRadius的大小，表示的是圓角的圓形程度，剩下的四個屬性表示四個角都需要設置成圓角，如果希望那個邊角不是圓角，那么主要設置為false就可以了。roundWithOverlayColor表示的是圓形頭像或者是圓角頭像底部的疊加顏色。
這里也就通過了XML設置了基本所有的效果，雖然沒有截圖，但是在這里提供一個源代碼，具體的效果大家去運行加深一下印象就可以了，都是一些基本的東西，這篇博客也沒什么難點，算是學習Fresco的一個基本入門。提供個大家參考一下就可以了。
源代碼：Demo
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
