天天看點

Fresco之初識

Fresco是FaceBook推出的網絡圖檔加載庫。如果隻是簡單的使用的話,三步就可以完成加載

其實官方是有中文文檔的Fresco中文文檔,寫本文隻是讓文字不那麼冷冰冰

  • 第一步:在andorid studio配置一下
// 在工程中初始化
  Fresco.initialize(this);
           
  • 第二步:寫Xml
<com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/id_simple_drawee_view"
        android:layout_width="300dp"
        android:layout_height="300dp"
        />
           
  • 第三步 :添加網絡位址
Uri uri = Uri.parse("http://ww4.sinaimg.cn/mw600/0063NJppgw1ez2p0f6852j31kw0v9aom.jpg");
simpleDraweeView.setImageURI(uri);
           

是的,就這麼簡單。Fresco就完成了網絡圖檔的加載。它還會自動緩存到記憶體和本地。

那麼如果想給它配置未加載,加載時,加載錯誤的顯示圖檔呢,先學會在Xml中配置吧

<com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/id_simple_drawee_view"
        android:layout_width="300dp"
        android:layout_height="300dp"
        fresco:placeholderImage="@drawable/default"
        fresco:failureImage="@drawable/error"
        fresco:progressBarImage="@drawable/loading"
        fresco:roundAsCircle="true"
      />
           

可以看到

  • placeholderImage 是 預設顯示的圖檔
  • failureImage 是 錯誤顯示的圖檔
  • progressBarImage 是 加載顯示的圖
  • fresco:roundAsCircle 圖檔以圓形式圖檔

那麼傳說中的加載動圖呢,其實也很簡單

Uri uriGif = Uri.parse("http://ww1.sinaimg.cn/mw1024/b592d3a5gw1ez16ya6ui8g206q08tb29.gif");
ImageRequest imageRequest2 = ImageRequestBuilder.newBuilderWithSource(uriGif).build();
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setImageRequest(imageRequest2)//圖檔請求配置
                .setAutoPlayAnimations(true)//自動播放
                .build();
        simpleDraweeView.setController(controller);
           

這裡突然多出一些新的概念ImageRequest和DraweeController

DraweeController 是對進行控制圖檔控制,如setAutoPlayAnimations(true)就是讓gif加載完後自動播放

ImageRequest 是DraweeController其中一項配置,由ImageRequestBuilder生成

好,先使用在深入後了解!

貼上SimpleDraweeView的關鍵屬性

<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"
    fresco:roundedCornerRadius="1dp"
    fresco:roundTopLeft="true"
    fresco:roundTopRight="false"
    fresco:roundBottomLeft="false"
    fresco:roundBottomRight="true"
    fresco:roundWithOverlayColor="@color/corner_color"
    fresco:roundingBorderWidth="2dp"
    fresco:roundingBorderColor="@color/border_color"
  />