Android的開發框架為我們的開發提供了不少很棒的控制元件，我們在開發的時候不需要太多的編碼就能輕鬆方便的使用這些控制元件，不過有些時候這些系統自帶的控制元件並不能夠完全滿足我們的需求。這時就需要我們發揮自己的想象力來實現我們特定需求的控制元件。

       今天為大家帶來一款可以展示Gif圖片的控制元件，實現播放Gif圖片的方法不止這一種，你也可以選擇其他的方式來實現（比如自己寫一個庫利用JNI呼叫或者直接用WebView來做展示），不過那就比較麻煩了，Android提供了可以展示類似這樣的檔案的方法，利用這些方法可以降低實現難度而且效果不會變差。

       展示圖片的過程實際上就是我們把圖片解碼到螢幕上的過程。Android為我們提供了一個叫做Movie的類可以幫我們實現解碼。這個控制元件不但可以用作展示Gif圖片也可以當做普通的ImageView控制元件來使用。下面我們通過程式碼來詳細解釋如何實現的

       首先看一下Demo的目錄結構

       目錄結構非常簡單，主要用到的類就只有GIFView一個。下面貼出其中的程式碼為大家詳細解釋

package com.example.gifview;


import java.io.InputStream;
import java.lang.reflect.Field;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Movie;
import android.os.SystemClock;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.widget.ImageView;


public class GifView extends ImageView {

	/**
	 * Movie物件用來解析gif圖片
	 */
	private Movie gifMovie;

	/**
	 * 開始時間，用來和當前時間比較，得出什麼時間播放gif
	 */
	private long mMovieStart;

	/**
	 * gif圖片的寬
	 */
	private int gifImageWidth;

	/**
	 * gif圖片的高
	 */
	private int gifImageHeight;

	
	/**
	 * 訪問attrs
	 */
	private AttributeSet attrs;

	/**
	 * 複寫GifView的構造方法
	 * 
	 * @param context
	 */
	public GifView(Context context) {
		super(context);
		
	}

	/**
	 * 複寫的GifView的構造方法
	 * 
	 * @param context
	 * @param attrs
	 */
	public GifView(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.attrs = attrs;
		loadGifImage();
	}
	
	private void loadGifImage(){
		AttributeSet attrs = getContext().getResources().getXml(R.id.gifView);
		
		//生成一個TypedArray物件
		TypedArray array = getContext().obtainStyledAttributes(attrs,
				R.styleable.weatherView);
		
		//得到資源id
		int resourceId = getResourceId(array);
		
//檢查資源id
if(resourceId == -1){
	System.out.println("沒有獲取到圖片Id，請檢查是否在xml檔案裡設定了src屬性");
}

		// 以流的方式得到gif檔案
		InputStream is = getResources().openRawResource(resourceId);

		// 用Movie的decodeStream方法解碼檔案
		gifMovie = Movie.decodeStream(is);
		if (gifMovie != null) {
			Bitmap bitmap = BitmapFactory.decodeStream(is);
			gifImageWidth = bitmap.getWidth();
			gifImageHeight = bitmap.getHeight();
			bitmap.recycle();
		}
		
		
	}

	/**
	 *  複寫onDraw方法用於繪製View
	 */
	@Override
	protected void onDraw(Canvas canvas) {
		if (gifMovie == null) {
			// 如果Movie為空說明不是一個gif影象，不是則呼叫父類方法，此時該控制元件等同於ImageView
			super.onDraw(canvas);
		} else {
			// 如果Movie不為空則說明是一個gif影象則展示gif影象
			showGifImage(canvas);
			// 重新整理
			invalidate();
		}
	}

	/**
	 *  複寫onMeasure方法，用來設定Gif寬高
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		if (gifMovie != null) {
			// 設定尺寸
			setMeasuredDimension(gifImageWidth, gifImageHeight);
		}
	}

	// 封裝的展示gif的方法
	private boolean showGifImage(Canvas canvas) {
		//得到系統時間
		long now = SystemClock.uptimeMillis();
		if (mMovieStart == 0) {
			// 把開始時間設定為當前時間
			mMovieStart = now;
		}
		int duration = gifMovie.duration();
		if (duration == 0) {
			// 如果沒有持續時間就設定為100
			duration = 100;
		}

		// 設定間隔時間
		int relTime = (int) ((now - mMovieStart) % duration);
		gifMovie.setTime(relTime);
		
		//在指定的位置進行繪製，這裡是左上角
		gifMovie.draw(canvas, 0, 0);
		if ((now - mMovieStart) >= duration) {
			mMovieStart = 0;
			return true;
		}
		return false;
	}

	/**
	 * 解析xml檔案裡的src傳來的引數，需要傳入一個TypeArray，Context，和引數陣列AttributeSet
	 * 
	 * @param array
	 * @param context
	 * @param attrs
	 * @return
	 */
	private int getResourceId(TypedArray array
			) {
		try {

			// 得到一個TypedArray裡的域
			Field field = TypedArray.class.getDeclaredField("mValue");

			// 設定可訪問性為true
			field.setAccessible(true);

			// 從類中取得域值
			TypedValue typeValueObject = (TypedValue) field.get(array);
			
			return typeValueObject.resourceId;
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			array.recycle();
		}
		return -1;
	}
	
}


 

       我們先宣告一個Movie的物件，準備用來解析Gif圖片，然後我們需要一個變數來記錄開始播放的時間，用兩個整形變數來記錄需要播放的Gif圖片的寬高，最後我們實現播放Gif的基類是ImageView，相當於ImageView+Movie來實現的這個功能。需要順便一提的是，這裡用到一點關於Java反射的內容，為的是拿到配置檔案裡的Gif圖片ID。程式碼如下：

                //生成一個TypedArray物件
		TypedArray array = getContext().obtainStyledAttributes(attrs,
				R.styleable.weatherView);
		
		//得到資源id
		int resourceId = getResourceId(array);
 

        首先用loadImage（）來載入Gif圖片，載入的時候需要得到圖片的寬高。

        自己實現控制元件除了繼承之外實現onMeasure和onDraw方法也是必要的。在onMeasure裡可以設定尺寸，同時可以判斷Movie物件是否為空，來決定這次展示是作為普通圖片還是Gif圖片來展示。

         在showGifImage方法裡就是實現展示Gif圖片的關鍵部分，這裡需要對Movie的duration屬性進行設定。用來控制播放週期。

       之後的過程就比較容易了，像普通的控制元件一樣來使用就可以了。下面是佈局檔案

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

	<com.example.gifview.GifView 
	    android:id="@+id/gifView"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:src="@drawable/weather_gif"/>
	
	<TextView 
	    android:id="@+id/textView1"
	    android:layout_below="@id/gifView"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="演示gif控制元件"/>
</RelativeLayout>

        這裡<com.example.gifview.GifView>就是我們需要的Gif控制元件。

        然後是在Activity裡設定佈局檔案

package com.example.gifview;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

順便需要提一下，在使用這個空間時可能需要設定硬體加速為false

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.gifview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme"
        android:hardwareAccelerated="false" >
        <activity
            android:name="com.example.gifview.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>