Android扩展ImageView播放gif动画

引用http://www.myexception.cn/image/1474108.htmlAndroid的原生控件并不支持播放GIF格式的图片。我们都知道，在Android中如果想要显示一张图片，可以借助ImageView控件来完成，但是如果将一张GIF图片设置到ImageView里，它只会显示这张图片的第一帧，不会产生任何的动画效果。那么就没有办法在Android里播放GIF图片了吗？当然不是，我们可以通过自定义控件的方式来实现这个功能。ImageView无法播放GIF图片说明它的功能还不够强大，那么今天我们就来编写一个PowerImageView控件，让它既能支持ImageView控件原生的所有功能，同时还可以播放GIF图片。1.新建一个项目名为PowerImageViewTest的项目，这里使用Android 4.4的API。2.由于是要自定义控件，我们还可能会用到一些自定义的属性，因此在values目录下新建一个attrs.xml的文件，可以在这个文件中添加任何需要自定义的属性。这里我们目前只需要一个auto_play属性，代码如下所示：<?xml version="1.0" encoding="utf-8"?><resources><declare-styleable name="PowerImageView"><attr name = "auto_play" format = "boolean"></attr></declare-styleable></resources>3.新建PowerImageView类，由于这个类要支持ImageView的所有功能，因此需要让PowerImageView继承自ImageView，代码如下所示：

<pre name="code" class="java">package com.example.powerimageviewtest;

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.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;

public class PowerImageView extends ImageView implements OnClickListener{
private Movie mMovie; //播放GIF关键类
private Bitmap mStartButton; //开始播放图片
private long mMovieStart; //开始时间
private int mImageWidth; //GIF宽度
private int mImageHeight; //GIF高度
private boolean isPlaying; //图片是否在播放
private boolean isAutoPlay; //是否允许自动播放

public PowerImageView(Context context) {
super(context);
}

public PowerImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public PowerImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.PowerImageView);
int resourceId = getResourceId(a, context, attrs);
if (resourceId != 0) {
// 当资源id不等于0时，就去获取该资源的流
InputStream is = getResources().openRawResource(resourceId);
// 使用Movie类对流进行解码
mMovie = Movie.decodeStream(is);
if (mMovie != null) {
// 如果返回值不等于null，就说明这是一个GIF图片，下面获取是否自动播放的属性
isAutoPlay = a.getBoolean(R.styleable.PowerImageView_auto_play, false);
Bitmap bitmap = BitmapFactory.decodeStream(is);
mImageWidth = bitmap.getWidth();
mImageHeight = bitmap.getHeight();
bitmap.recycle();
if (!isAutoPlay) {
// 当不允许自动播放的时候，得到开始播放按钮的图片，并注册点击事件
mStartButton = BitmapFactory.decodeResource(getResources(),
R.drawable.mygif);
setOnClickListener(this);
}
}
}
}

@Override
public void onClick(View v) {
if (v.getId() == getId()) {
// 当用户点击图片时，开始播放GIF动画
isPlaying = true;
invalidate();
}
}

protected void onDraw(Canvas canvas) {
if (mMovie == null) {
// mMovie等于null，说明是张普通的图片，则直接调用父类的onDraw()方法
super.onDraw(canvas);
} else {
// mMovie不等于null，说明是张GIF图片
if (isAutoPlay) {
// 如果允许自动播放，就调用playMovie()方法播放GIF动画
playMovie(canvas);
invalidate();
} else {
// 不允许自动播放时，判断当前图片是否正在播放
if (isPlaying) {
// 正在播放就继续调用playMovie()方法，一直到动画播放结束为止
if (playMovie(canvas)) {
isPlaying = false;
}
invalidate();
} else {
// 还没开始播放就只绘制GIF图片的第一帧，并绘制一个开始按钮
mMovie.setTime(0);
mMovie.draw(canvas, 0, 0);
int offsetW = (mImageWidth - mStartButton.getWidth()) / 2;
int offsetH = (mImageHeight - mStartButton.getHeight()) / 2;
canvas.drawBitmap(mStartButton, offsetW, offsetH, null);
}
}
}
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mMovie != null) {
// 如果是GIF图片则重写设定PowerImageView的大小
setMeasuredDimension(mImageWidth, mImageHeight);
}
}

/**
* 开始播放GIF动画，播放完成返回true，未完成返回false。
*
* @param canvas
* @return 播放完成返回true，未完成返回false。
*/
private boolean playMovie(Canvas canvas) {
long now = SystemClock.uptimeMillis();
if (mMovieStart == 0) {
mMovieStart = now;
}
int duration = mMovie.duration();
if (duration == 0) {
duration = 1000;
}
int relTime = (int) ((now - mMovieStart) % duration);
mMovie.setTime(relTime);
mMovie.draw(canvas, 0, 0);
if ((now - mMovieStart) >= duration) {
mMovieStart = 0;
return true;
}
return false;
}

/**
* 通过Java反射，获取到src指定图片资源所对应的id。
*
* @param a
* @param context
* @param attrs
* @return 返回布局文件中指定图片资源所对应的id，没有指定任何图片资源就返回0。
*/
private int getResourceId(TypedArray a, Context context, AttributeSet attrs) {
try {
Field field = TypedArray.class.getDeclaredField("mValue");
field.setAccessible(true);
TypedValue typedValueObject = (TypedValue) field.get(a);
return typedValueObject.resourceId;
} catch (Exception e) {
e.printStackTrace();
} finally {
if (a != null) {
a.recycle();
}
}
return 0;
}
}

代码解释：<span style="font-family: Tahoma; font-size: 14px; line-height: 24px;">重写了ImageView中所有的构建函数，使得PowerImageView的用法可以和ImageView完全相同。在构造函数中，则是对所有必要的数据进行了初始化操作。首先，我们调用了getResourceId()方法去获取图片资源对应的id值，在getResourceId()方法内部是通过Java的反射机制来进行获取的。得到了图片资源的id后，我们将它转换成InputStream，然后传入到Movie.decodeStream()方法中以解码出Movie对象。如果得到的Movie对象等于null，说明这是一张普通的图片资源，就不再进行任何特殊处理，因为父类ImageView都帮我们处理好了。如果得到的Movie对象不等于null，则说明这是一张GIF图片，接着就要去获取是否允许自动播放、图片的宽高等属性的值。如果不允许自动播放，还要给播放按钮注册点击事件，默认是不允许自动播放的。</span><br style="margin: 0px; padding: 0px; font-family: Tahoma; font-size: 14px; line-height: 24px;" /><br style="margin: 0px; padding: 0px; font-family: Tahoma; font-size: 14px; line-height: 24px;" /><span style="font-family: Tahoma; font-size: 14px; line-height: 24px;">接下来会进入到onMeasure()方法中。在这个方法中我们进行判断，如果这是一张GIF图片，则需要将PowerImageView的宽高重定义，使得控件的大小刚好可以放得下这张GIF图片。</span><br style="margin: 0px; padding: 0px; font-family: Tahoma; font-size: 14px; line-height: 24px;" /><br style="margin: 0px; padding: 0px; font-family: Tahoma; font-size: 14px; line-height: 24px;" /><span style="font-family: Tahoma; font-size: 14px; line-height: 24px;">再往后就会进入到onDraw()方法中。在这个方法里同样先判断当前是一张普通的图片还是GIF图片，如果是普通的图片就直接调用super.onDraw()方法交给ImageView去处理就好了。如果是GIF图片，则先判断该图是否允许自动播放，允许的话就调用playMovie()方法去播放GIF图片就好，不允许的话则会先在PowerImageView中绘制该GIF图片的第一帧，并在图片上绘制一个播放按钮，当用户点击了播放按钮时，再去调用playMovie()方法去播放GIF图片。</span><br style="margin: 0px; padding: 0px; font-family: Tahoma; font-size: 14px; line-height: 24px;" /><br style="margin: 0px; padding: 0px; font-family: Tahoma; font-size: 14px; line-height: 24px;" /><span style="font-family: Tahoma; font-size: 14px; line-height: 24px;">下面我们来看看playMovie()方法中是怎样播放GIF图片的吧。可以看到，首先会对动画开始的时间做下记录，然后对动画持续的时间做下记录，接着使用当前的时间减去动画开始的时间，得到的时间就是此时PowerImageView应该显示的那一帧，然后借助Movie对象将这一帧绘制到屏幕上即可。之后每次调用playMovie()方法都会绘制一帧图片，连贯起来也就形成了GIF动画。注意，这个方法是有返回值的，如果当前时间减去动画开始时间大于了动画持续时间，那就说明动画播放完成了，返回true，否则返回false。</span>

4.编辑activity_main.xml，代码如下所示：

<span style="font-family: Tahoma; font-size: 14px; line-height: 24px;"></span><pre name="code" class="java"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><com.example.powerimageviewtest.PowerImageViewandroid:id="@+id/image_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:src="@drawable/mygif"/></LinearLayout>

<span style="font-family: Tahoma; font-size: 14px; line-height: 24px;"></span>

5.在AndroidManifest.xml中还有一点需要注意，有些4.0以上系统的手机启动了硬件加速功能之后会导致GIF动画播放不出来，因此我们需要在AndroidManifest.xml中去禁用硬件加速功能，可以通过指定android:hardwareAccelerated属性来完成，代码如下所示：

<span style="font-family: Tahoma; font-size: 14px; line-height: 24px;"></span><pre name="code" class="java"><?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.example.powerimageviewtest"android:versionCode="1"android:versionName="1.0" ><uses-sdkandroid:minSdkVersion="15"android:targetSdkVersion="19" /><applicationandroid:allowBackup="true"android:icon="@drawable/ic_launcher"android:label="@string/app_name"android:theme="@style/AppTheme"android:hardwareAccelerated="false"><activityandroid:name="com.example.powerimageviewtest.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>

大功告成！现在可以来运行一下代码了，一打开程序你就会看到GIF图片的第一帧，点击图片之后就可以播放GIF动画了。

<span style="font-family: Tahoma; font-size: 14px; line-height: 24px;"><span style="font-family: Tahoma; font-size: 14px; line-height: 24px;"></span></span>

<span style="font-family: Tahoma; font-size: 14px; line-height: 24px;"><span style="font-family: Tahoma; font-size: 14px; line-height: 24px;">文件目录：</span></span>

<span style="font-family: Tahoma; font-size: 14px; line-height: 24px;"><span style="font-family: Tahoma; font-size: 14px; line-height: 24px;"><img src="https://img-blog.csdn.net/20140712200022872?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVFBTMjA0Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" /></span></span>

<span style="font-family: Tahoma; font-size: 14px; line-height: 24px;"></span>

<span style="font-family: Tahoma; font-size: 14px; line-height: 24px;"><span style="font-family: Tahoma; font-size: 14px; line-height: 24px;">我们还可以通过修改activity_main.xml中的代码，给它加上允许自动播放的属性，代码如下所示：</span></span><pre name="code" class="java"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:attr="http://schemas.android.com/apk/res/com.example.powerimageviewtest"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><com.example.powerimageviewtest.PowerImageViewandroid:id="@+id/image_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:src="@drawable/mygif"attr:auto_play="true"/></RelativeLayout>

<span style="font-family: Tahoma; font-size: 14px; line-height: 24px;"></span>

一张图片在布局正中央显示出来了，正是普通ImageView所具备的功能。你还可以在PowerImageView中指定android:scaleType等属性，用法和原生的ImageView完全一样。怎么样，是不是确实算得上是Power版的ImageView了？

<span style="font-family: Tahoma; font-size: 14px; line-height: 24px;"></span>

<span style="font-family: Tahoma; font-size: 14px; line-height: 24px;">归纳自http://www.myexception.cn/image/1474108.html  以上代码经本人测试可用</span>