" />

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2016年12月26日 09:21:51   作者：代碼丶如風(fēng)  
本篇文章主要介紹了詳解Android之圖片加載框架Fresco基本使用(一) ，具有一定的參考價(jià)值，有興趣的可以了解一下。

PS：Fresco這個(gè)框架出的有一陣子了,也是現(xiàn)在非?；鸬囊豢顖D片加載框架.聽說內(nèi)部實(shí)現(xiàn)的挺牛的,雖然自己還沒研究原理.不過先學(xué)了一下基本的功能,感受了一下這個(gè)框架的強(qiáng)大之處.本篇只說一下在xml中設(shè)置屬性的相關(guān)用法.

0.引入Fresco以及相關(guān)注意事項(xiàng)。

1.PlaceHolderImage占位圖

2.FailureImage加載失敗時(shí)顯示的圖片

3.RetryImage重新加載的圖片

4.ProgressBarImage加載時(shí)顯示的進(jìn)度圖片

5.BackgroundImage背景圖

6.OverlayImage疊加圖

7.多種效果結(jié)合加載圖片

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

9.圖像邊框

 先簡(jiǎn)單的介紹一下Fresco，如果只是想對(duì)網(wǎng)絡(luò)圖片進(jìn)行加載以及顯示一些特效，那么SimpleDraweeView就基本上可以滿足我們的需求了 ,Fresco是使用Image Pipeline來實(shí)現(xiàn)對(duì)圖片的管理和獲取的，SimpleDraweeView是對(duì)ImageView的一個(gè)封裝，并且內(nèi)部使用了Image Pipeline管理圖片的思想和方式，因此我們?nèi)绻麤]什么特殊的需求，盡量使用SimpleDraweeView.這也是官網(wǎng)的一個(gè)建議。

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

  • DraweeView：子類也就是我們的SimpleDraweeView了，用于顯示在屏幕上的視圖，相當(dāng)于V。
  • DraweeHierarchy：子類是GenericDraweeHierarchy，主要用于維護(hù)和繪制Drawable對(duì)象，以及怎樣展示等等。相當(dāng)于M。
  • DraweeController：控制器，主要和ImageLoader交互，比如說為圖片設(shè)置uri，能否在失敗時(shí)重新加載等等。相當(dāng)于C。

我在這里也就基本上使用了這三個(gè)類。DraweeHierarchy，DraweeController使用了Build模式去實(shí)例化對(duì)象。核心類也就基本介紹完了，這里只是簡(jiǎn)單的介紹，不涉及原理的東西。

0.引入Fresco

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

Fresco的引入比較的簡(jiǎn)單，我們只需要在build.gradle中添加就可以，Github上提供的Demo比較的難抽取，并且實(shí)際運(yùn)行起來并沒有過多的效果，只是針對(duì)多個(gè)圖片加載框架在加載圖片時(shí)的性能進(jìn)行了對(duì)比。如果想看一下官方的運(yùn)行效果。會(huì)在文章最后提供源代碼。

 需要注意的一點(diǎn)就是，我們?cè)谑褂肍resco之前首先要進(jìn)行初始化操作。要放在布局加載之前，否則setContentView解析xml的時(shí)候會(huì)出錯(cuò)。

@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 Fresco.initialize(this);
 setContentView(R.layout.activity_simple_drawee);
}

1.PlaceHolderImage

 占位圖，理解起來也比較的簡(jiǎn)單，也就是在沒有任何圖片加載的時(shí)候顯示的默認(rèn)圖片。

<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代碼中我們需要為這個(gè)SimpleDraweeView設(shè)置相關(guān)的控制器。這里初始化了GenericDraweeHierarchy,控制圖片的淡入淡出的效果時(shí)間，同時(shí)設(shè)置控制器顯示需要加載的圖片的url.在加載這個(gè)過程中，我們可以看到占位圖會(huì)被加載的圖片替換掉。

GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());
  /**
   * 設(shè)置淡入淡出效果的顯示時(shí)間
   * */
GenericDraweeHierarchy hierarchy = builder.setFadeDuration(1000).build();
DraweeController placeHolderDraweeController = Fresco.newDraweeControllerBuilder()
    .setUri("http://avatar.csdn.net/4/E/8/1_y1scp.jpg") //為圖片設(shè)置url
    .setTapToRetryEnabled(true) //設(shè)置在加載失敗后,能否重試
    .setOldController(placeHolderImageDraweeView.getController())
    .build();
placeHolderImageDraweeView.setController(placeHolderDraweeController);
placeHolderImageDraweeView.setHierarchy(hierarchy);

2.FailureImage加載失敗時(shí)顯示的圖片

當(dāng)圖片加載失敗之后我們也是需要有默認(rèn)圖片去進(jìn)行填充的。那么SimpleDraweeView也可以實(shí)現(xiàn)這個(gè)功能，實(shí)現(xiàn)方式也非常的簡(jiǎn)單。

<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"/>

這里我們只需要設(shè)置failureImage屬性就可以完成。這里我們?nèi)匀辉O(shè)置一個(gè)控制器。

/**
 * 任意加載一個(gè)url,url是不存在的.因此顯示加載失敗的圖片.
 * */
DraweeController failureImageDraweeController = Fresco.newDraweeControllerBuilder()
    .setUri("ssss")
    .setTapToRetryEnabled(false) //同時(shí)設(shè)置不可重試.
    .setOldController(failureImageDraweeView.getController())
    .build();
failureImageDraweeView.setController(failureImageDraweeController);

這里設(shè)置一個(gè)錯(cuò)誤的url，那么肯定會(huì)加載失敗的，這時(shí)就會(huì)顯示加載失敗的圖片了。

3.RetryImage重新加載的圖片

  RetryImage表示的是圖片加載失敗之后，可以顯示一個(gè)圖片，用于重試操作，如果多次重試還是加載不出圖片，那么顯示加載失敗的圖片。

<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的控制器基本是相同的，我們只需要將重試的屬性設(shè)置為ture就可以了。這里如果圖片加載失敗，那么Image Pipeline能夠重試四次，如果仍然無法加載成功，那么顯示加載失敗的圖片。

/**
 * 任意加載一個(gè)url,顯示重新加載時(shí)圖片的點(diǎn)擊,加載失敗的時(shí)候,Image pipeline會(huì)重試四次,
 * 如果還是加載不出圖像,那么顯示加載失敗圖片.
 * */
DraweeController retryImageDraweeController = Fresco.newDraweeControllerBuilder()
    .setUri("aaaa")
    .setTapToRetryEnabled(true)
    .setOldController(retryImageDraweeView.getController())
    .build();
retryImageDraweeView.setController(retryImageDraweeController);

 4.ProgressBarImage

進(jìn)度顯示圖片，圖片在加載的時(shí)候往往是需要顯示進(jìn)度的，或者顯示一個(gè)加載進(jìn)度的圖片與用戶進(jìn)行交互，那么Fresco的ProgressBarImage可以幫助我們完成這個(gè)功能，在顯示圖片的同時(shí)，圖片同時(shí)也是旋轉(zhuǎn)顯示的。

 <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"/>

這里只需要設(shè)置ProgressBarImage屬性就可以了，這里progressBarAutoRotateInterval表示的是自動(dòng)旋轉(zhuǎn)的間隔。設(shè)置的數(shù)值越小，旋轉(zhuǎn)的速度越快。控制器的代碼就沒必要貼出來了，和上面的控制器基本是相同的，只需要設(shè)置一個(gè)正確的uri就可以了。

5.BackGroundImage

 背景圖一般就是底色，感覺和placeHolderImage效果差不多，雖然還是有區(qū)別的，只是圖片在加載過程中會(huì)始終顯示背景圖，一旦圖片加載成功之后，那么后續(xù)的圖片將直接覆蓋背景圖，并且沒有疊加的效果，也就是說我們加載的圖片不會(huì)收到背景圖片影響。他和疊加圖是有區(qū)別的.

<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"/>

這里控制器的代碼也不進(jìn)行粘貼了，沒有特殊要求的話，都和上面的控制器基本是相同的。

6.OverlayImage

 疊加圖和BackGroundImage就有區(qū)別了，疊加圖是會(huì)影響加載的圖片的，比如說我們?yōu)镾impleDraweeView設(shè)置了一個(gè)加載的圖片，同時(shí)設(shè)置了一個(gè)疊加圖，那么加載后的圖片會(huì)收到疊加圖的影響的，二者會(huì)產(chǎn)生疊加效果。

<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" />

這里使用了多種效果結(jié)合來完成圖片的顯示，首先有一個(gè)占位圖，然后設(shè)置圖片在加載時(shí)顯示的圖片，用于和用戶完成交互功能，如果成功那么顯示加載后的圖片，如果失敗，那么顯示重新加載的圖片，如果重復(fù)了四次仍然無法完成加載，那么就顯示加載失敗的圖片。相關(guān)的控制器也比較的簡(jiǎn)單，和上面差不多。簡(jiǎn)單貼一下。

/**
 * 多種效果結(jié)合：加載圖片成功和失敗
 * */
DraweeController multiEffectSuccessController = Fresco.newDraweeControllerBuilder()
    .setUri("http://avatar.csdn.net/4/E/8/1_y1scp.jpg") //想要看到失敗效果,設(shè)置一個(gè)錯(cuò)誤的uri就可以了
    .setTapToRetryEnabled(true)
    .setOldController(multiEffectSuccessSimpleDraweeView.getController())
    .build();
multiEffectSuccessSimpleDraweeView.setController(multiEffectSuccessController);

8.圓形頭像的實(shí)現(xiàn)

 我們?cè)趯慳pp的時(shí)候，經(jīng)常會(huì)使用到圓形頭像這一個(gè)功能，因此我們一般不得不自定義View或者是使用其他框架等等，有了Fresco那么他會(huì)幫助你完成這個(gè)功能，而且輕快又簡(jiǎn)便只需要添加一行代碼就可以完成了。

<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"/>

雖然看著挺多，其實(shí)實(shí)現(xiàn)圓形頭像只需要添加roundAsCircle這個(gè)屬性為true就搞定了，我這里添加了roundingBorderWidth其實(shí)是為這個(gè)圖片加上邊框和相關(guān)的邊框顏色而已。這里也就順便把邊框線這個(gè)功能直接說了。

9.圓角圖片

 圓角圖片和圓形圖片的區(qū)別大家肯定是知道的，并且也比較的常用，在Fresco中也只需要設(shè)置具體屬性就可以了。

<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"/>

我們只需要設(shè)置roundCornerRadius的大小，表示的是圓角的圓形程度，剩下的四個(gè)屬性表示四個(gè)角都需要設(shè)置成圓角，如果希望那個(gè)邊角不是圓角，那么主要設(shè)置為false就可以了。roundWithOverlayColor表示的是圓形頭像或者是圓角頭像底部的疊加顏色。

 這里也就通過了XML設(shè)置了基本所有的效果，雖然沒有截圖，但是在這里提供一個(gè)源代碼，具體的效果大家去運(yùn)行加深一下印象就可以了，都是一些基本的東西，這篇博客也沒什么難點(diǎn)，算是學(xué)習(xí)Fresco的一個(gè)基本入門。提供個(gè)大家參考一下就可以了。

源代碼：Demo

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論