Android項目實戰（三十）：Fresco加載gif圖片並播放

前言：

項目中圖文混合使用的太多太多了，但是絕大部分都是靜態圖片。

然而項目開發中有這么一個需求：顯示一個出一個簡短的動畫（一般都不超過3秒）演示

比如說：一個功能提供很多步驟來教用戶做廣播體操，那么第一步就顯示一個3秒鍾的動作圖，第二步顯示一個幾秒鍾的動作圖。（當然這個需求不是這個功能）

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

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

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

然后我就發現了Fresco，官方網址：http://www.fresco-cn.org/  ，中文文檔，很方便查閱

看下官方的描述：

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+'
}

 IDEA 和 Eclipse 就是別的方法了，具體看下 http://www.fresco-cn.org/docs/index.html#_

 

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 類 

//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by Fernflower decompiler)
//

package com.facebook.drawee.view;

import android.content.Context;
import android.net.Uri;
import android.util.AttributeSet;
import com.facebook.common.internal.Preconditions;
import com.facebook.common.internal.Supplier;
import com.facebook.drawee.generic.GenericDraweeHierarchy;
import com.facebook.drawee.interfaces.DraweeController;
import com.facebook.drawee.interfaces.SimpleDraweeControllerBuilder;
import com.facebook.drawee.view.GenericDraweeView;
import javax.annotation.Nullable;

public class SimpleDraweeView extends GenericDraweeView {
    private static Supplier<? extends SimpleDraweeControllerBuilder> sDraweeControllerBuilderSupplier;
    private SimpleDraweeControllerBuilder mSimpleDraweeControllerBuilder;

    public static void initialize(Supplier<? extends SimpleDraweeControllerBuilder> draweeControllerBuilderSupplier) {
        sDraweeControllerBuilderSupplier = draweeControllerBuilderSupplier;
    }

    public static void shutDown() {
        sDraweeControllerBuilderSupplier = null;
    }

    public SimpleDraweeView(Context context, GenericDraweeHierarchy hierarchy) {
        super(context, hierarchy);
        this.init();
    }

    public SimpleDraweeView(Context context) {
        super(context);
        this.init();
    }

    public SimpleDraweeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.init();
    }

    public SimpleDraweeView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        this.init();
    }

    private void init() {
        if(!this.isInEditMode()) {
            Preconditions.checkNotNull(sDraweeControllerBuilderSupplier, "SimpleDraweeView was not initialized!");
            this.mSimpleDraweeControllerBuilder = (SimpleDraweeControllerBuilder)sDraweeControllerBuilderSupplier.get();
        }
    }

    protected SimpleDraweeControllerBuilder getControllerBuilder() {
        return this.mSimpleDraweeControllerBuilder;
    }

    public void setImageURI(Uri uri) {
        this.setImageURI(uri, (Object)null);
    }

    public void setImageURI(Uri uri, @Nullable Object callerContext) {
        DraweeController controller = this.mSimpleDraweeControllerBuilder.setCallerContext(callerContext).setUri(uri).setOldController(this.getController()).build();
        this.setController(controller);
    }
}

那么要顯示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代碼：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                xmlns:fresco="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin"
                tools:context=".MainActivity">

    <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/img"
            android:layout_width="400dp"
            android:layout_height="400dp"
            fresco:placeholderImage="@mipmap/ic_launcher"
            />

</RelativeLayout>

 

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都會幫我們解決

顯示占位圖直到加載完成；
下載圖片；
緩存圖片；
圖片不再顯示時，從內存中移除