Android之圖片加載框架Fresco基本使用(一)

時間  2019-11-06
標籤 android 圖片 加載 框架 fresco 基本 使用 欄目 Android 简体版
原文   原文鏈接

PS：Fresco這個框架出的有一陣子了,也是如今很是火的一款圖片加載框架.據說內部實現的挺牛逼的,雖然本身還沒研究原理.不過先學了一下基本的功能,感覺了一下這個框架的強大之處.本篇只說一下在xml中設置屬性的相關用法.android

 

0.引入Fresco以及相關注意事項。網絡

1.PlaceHolderImage佔位圖app

2.FailureImage加載失敗時顯示的圖片框架

3.RetryImage從新加載的圖片ide

4.ProgressBarImage加載時顯示的進度圖片佈局

5.BackgroundImage背景圖性能

6.OverlayImage疊加圖學習

7.多種效果結合加載圖片gradle

8.圓形頭像，圓角頭像以及背景疊加ui

9.圖像邊框

 

  先簡單的介紹一下Fresco，若是隻是想對網絡圖片進行加載以及顯示一些特效，那麼SimpleDraweeView就基本上能夠知足咱們的需求了 ,Fresco是使用Image Pipeline來實現對圖片的管理和獲取的，SimpleDraweeView是對ImageView的一個封裝，而且內部使用了Image Pipeline管理圖片的思想和方式，所以咱們若是沒什麼特殊的需求，儘可能使用SimpleDraweeView.這也是官網的一個建議。

  核心類：DraweeView(子類：SimpleDraweeView),DraweeHierarchy(子類：GenericDraweeHierarchy),DraweeController。(相似MVC)

  DraweeView：子類也就是咱們的SimpleDraweeView了，用於顯示在屏幕上的視圖，至關於V。

  DraweeHierarchy：子類是GenericDraweeHierarchy，主要用於維護和繪製Drawable對象，以及怎樣展現等等。至關於M。

  DraweeController：控制器，主要和ImageLoader交互，好比說爲圖片設置uri，可否在失敗時從新加載等等。至關於C。

  我在這裏也就基本上使用了這三個類。DraweeHierarchy，DraweeController使用了Build模式去實例化對象。核心類也就基本介紹完了，這裏只是簡單的介紹，不涉及原理的東西。

0.引入Fresco

compile 'com.facebook.fresco:fresco:0.14.0'

  Fresco的引入比較的簡單，咱們只須要在build.gradle中添加就能夠，Github上提供的Demo比較的難抽取，而且實際運行起來並無過多的效果，只是針對多個圖片加載框架在加載圖片時的性能進行了對比。若是想看一下官方的運行效果。會在文章最後提供源代碼。

 須要注意的一點就是，咱們在使用Fresco以前首先要進行初始化操做。要放在佈局加載以前，不然setContentView解析xml的時候會出錯。

@Override
protected 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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程