1. 程式人生 > >Fresco 使用筆記(一):載入gif圖片並播放

Fresco 使用筆記(一):載入gif圖片並播放

專案中圖文混合使用的太多太多了,但是絕大部分都是靜態圖片。

然而現在專案開發中有這麼一個需求:顯示一個出一個簡短的動畫(一般都不超過3秒)演示

比如說:一個功能提供很多步驟來教使用者做廣播體操,那麼第一步就顯示一個3秒鐘的動作圖,第二步顯示一個幾秒鐘的動作圖。(當然這個需求不是這個功能)

怎麼解決呢:一確定這個需求我的第一實現思路便是讓美工給我搞幾個連續的圖片,我使用幀動畫來輪迴播放 便實現了這個動畫。

但是幀動畫使用起來太複雜了,一套動作我要搞好久來實現。那麼就想Android中支援不支援播放gif格式的圖片呢,讓美工搞動態圖我直接拿來用多方便。

-------------------------------------------------------------------------------------------------------------------

看下官方的描述:

Fresco 是一個強大的圖片載入元件。

Fresco 中設計有一個叫做 image pipeline 的模組。它負責從網路,從本地檔案系統,本地資源載入圖片。為了最大限度節省空間和CPU時間,它含有3級快取設計(2級記憶體,1級檔案)。

Fresco 中設計有一個叫做 Drawees 模組,方便地顯示loading圖,當圖片不再顯示在螢幕上時,及時地釋放記憶體和空間佔用。

Fresco 支援 Android2.3(API level 9) 及其以上系統。

------------------------------------------------------------------------------------------------------------------

其他的不管,這篇部落格只要看Fresco特性之一:

支援 gif 動態圖片     ,也許我們會構造一些自定義的類來實現,但是太複雜了,也太麻煩了,Fresco直接幫你封裝好了

------------------------------------------------------------------------------------------------------------------

那麼開始看怎麼使用Fresco載入顯示gif格式的圖片了

1、必須要做的事,當然看官方文件也能知道,如何引入Fresco到專案中

Android Studio 或者 Gradle

dependencies {
  compile 'com.facebook.fresco:fresco:0.6.0+'
}

2、配置清單檔案新增網路許可權,這裡具體獲取網路gif圖片並展示的Demo,載入本地的gif圖片 可以不加網路許可權

<uses-permission android:name="android.permission.INTERNET"/>

3、佈局檔案中的使用

(1)xml檔案中,加入名稱空間,用於給圖片設定一些屬性

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto">

(2)既然是gif圖片,當然也就是圖片,而當我們把Fresco匯入到專案之後,就有了

com.facebook.drawee.view.SimpleDraweeView 類

1 //
 2 // Source code recreated from a .class file by IntelliJ IDEA
 3 // (powered by Fernflower decompiler)
 4 //
 5 
 6 package com.facebook.drawee.view;
 7 
 8 import android.content.Context;
 9 import android.net.Uri;
10 import android.util.AttributeSet;
11 import com.facebook.common.internal.Preconditions;
12 import com.facebook.common.internal.Supplier;
13 import com.facebook.drawee.generic.GenericDraweeHierarchy;
14 import com.facebook.drawee.interfaces.DraweeController;
15 import com.facebook.drawee.interfaces.SimpleDraweeControllerBuilder;
16 import com.facebook.drawee.view.GenericDraweeView;
17 import javax.annotation.Nullable;
18 
19 public class SimpleDraweeView extends GenericDraweeView {
20     private static Supplier<? extends SimpleDraweeControllerBuilder> sDraweeControllerBuilderSupplier;
21     private SimpleDraweeControllerBuilder mSimpleDraweeControllerBuilder;
22 
23     public static void initialize(Supplier<? extends SimpleDraweeControllerBuilder> draweeControllerBuilderSupplier) {
24         sDraweeControllerBuilderSupplier = draweeControllerBuilderSupplier;
25     }
26 
27     public static void shutDown() {
28         sDraweeControllerBuilderSupplier = null;
29     }
30 
31     public SimpleDraweeView(Context context, GenericDraweeHierarchy hierarchy) {
32         super(context, hierarchy);
33         this.init();
34     }
35 
36     public SimpleDraweeView(Context context) {
37         super(context);
38         this.init();
39     }
40 
41     public SimpleDraweeView(Context context, AttributeSet attrs) {
42         super(context, attrs);
43         this.init();
44     }
45 
46     public SimpleDraweeView(Context context, AttributeSet attrs, int defStyle) {
47         super(context, attrs, defStyle);
48         this.init();
49     }
50 
51     private void init() {
52         if(!this.isInEditMode()) {
53             Preconditions.checkNotNull(sDraweeControllerBuilderSupplier, "SimpleDraweeView was not initialized!");
54             this.mSimpleDraweeControllerBuilder = (SimpleDraweeControllerBuilder)sDraweeControllerBuilderSupplier.get();
55         }
56     }
57 
58     protected SimpleDraweeControllerBuilder getControllerBuilder() {
59         return this.mSimpleDraweeControllerBuilder;
60     }
61 
62     public void setImageURI(Uri uri) {
63         this.setImageURI(uri, (Object)null);
64     }
65 
66     public void setImageURI(Uri uri, @Nullable Object callerContext) {
67         DraweeController controller = this.mSimpleDraweeControllerBuilder.setCallerContext(callerContext).setUri(uri).setOldController(this.getController()).build();
68         this.setController(controller);
69     }
70 }

SimpleDraweeView.class

那麼要顯示gif圖片的控制元件的標籤便是:

<com.facebook.drawee.view.SimpleDraweeView>   </com.facebook.drawee.view.SimpleDraweeView>

注意:SimpleDraweeView 不支援wrap_content

所下載的影象可能和佔位圖尺寸不一致,如果設定出錯圖或者重試圖的話,這些圖的尺寸也可能和所下載的圖尺寸不一致。
如果大小不一致,影象下載完之後,假設如果是wrap_content,View將會重新layout,改變大小和位置。這將會導致介面跳躍。
固定寬高比
只有希望顯示的固定寬高比時,可以使用wrap_content。
如果希望顯示的圖片保持一定寬高比例,如果 4:3,則在XML中:
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="20dp"
android:layout_height="wrap_content"
<!-- other attributes -->
然後在程式碼中指定顯示比例:
mSimpleDraweeView.setAspectRatio(1.33f);

Demo程式碼:

1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2                 xmlns:tools="http://schemas.android.com/tools"
 3                 xmlns:fresco="http://schemas.android.com/apk/res-auto"
 4                 android:layout_width="match_parent"
 5                 android:layout_height="match_parent"
 6                 android:paddingLeft="@dimen/activity_horizontal_margin"
 7                 android:paddingRight="@dimen/activity_horizontal_margin"
 8                 android:paddingTop="@dimen/activity_vertical_margin"
 9                 android:paddingBottom="@dimen/activity_vertical_margin"
10                 tools:context=".MainActivity">
11 
12     <com.facebook.drawee.view.SimpleDraweeView
13             android:id="@+id/img"
14             android:layout_width="400dp"
15             android:layout_height="400dp"
16             fresco:placeholderImage="@mipmap/ic_launcher"
17             />
18 
19 </RelativeLayout>

activity_main.xml

4、然後就是圖片所在佈局對應的Activity中的使用了

(1)初始化Fresco,注意位置,用過百度地圖的應該理解這裡,記住位置就行

super.onCreate(savedInstanceState);
Fresco.initialize(this);
setContentView(R.layout.activity_main);

(2)進行網路gif圖片資源的載入並展示

Uri uri = Uri.parse("http://img.huofar.com/data/jiankangrenwu/shizi.gif");
DraweeController  draweeController =
Fresco.newDraweeControllerBuilder()
.setUri(uri)
.setAutoPlayAnimations(true) // 設定載入圖片完成後是否直接進行播放
.build();
img.setController(draweeController);

效果圖:

先給控制元件一個圖片佔位,當載入成功的時候顯示載入的圖片

就這麼簡單 ,其他的Fresco都會幫我們解決