Android 扩展ImageView来播放gif动画
比起一张单调的图片,动态图片明显更加的有意思。一般动态图片都是GIF格式的,浏览器中可以直接将这种格式的图片播放成动画。
不过很可惜的是,Android的原生控件并不支持播放GIF格式的图片。我们都知道,在Android中如果想要显示一张图片,可以借助ImageView控件来完成,但是如果将一张GIF图片设置到ImageView里,它只会显示这张图片的第一帧,不会产生任何的动画效果。
那么就没有办法在Android里播放GIF图片了吗?当然不是,我们可以通过自定义控件的方式来实现这个功能。ImageView无法播放GIF图片说明它的功能还不够强大,那么今天我们就来编写一个PowerImageView控件,让它既能支持ImageView控件原生的所有功能,同时还可以播放GIF图片。
下面我们就开始吧,首先新建一个项目,起名就叫PowerImageViewTest,这里使用Android 4.0的API。
由于是要自定义控件,我们还可能会用到一些自定义的属性,因此在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>
public class PowerImageView extends ImageView implements OnClickListener {/** * 播放GIF动画的关键类 */private Movie mMovie;/** * 开始播放按钮图片 */private Bitmap mStartButton;/** * 记录动画开始的时间 */private long mMovieStart;/** * GIF图片的宽度 */private int mImageWidth;/** * GIF图片的高度 */private int mImageHeight;/** * 图片是否正在播放 */private boolean isPlaying;/** * 是否允许自动播放 */private boolean isAutoPlay;/** * PowerImageView构造函数。 * * @param context */public PowerImageView(Context context) {super(context);}/** * PowerImageView构造函数。 * * @param context */public PowerImageView(Context context, AttributeSet attrs) {this(context, attrs, 0);}/** * PowerImageView构造函数,在这里完成所有必要的初始化操作。 * * @param context */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.start_play);setOnClickListener(this);}}}}@Overridepublic void onClick(View v) {if (v.getId() == getId()) {// 当用户点击图片时,开始播放GIF动画isPlaying = true;invalidate();}}@Overrideprotected 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);}}}}@Overrideprotected 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;}}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <com.example.powerimageviewtest.PowerImageView android:id="@+id/image_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/anim" /> </RelativeLayout>
<?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-sdk android:minSdkVersion="14" android:targetSdkVersion="17" /> <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.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>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:attr="http://schemas.android.com/apk/res/com.example.powerimageviewtest" android:layout_width="match_parent" android:layout_height="match_parent" > <com.example.powerimageviewtest.PowerImageView android:id="@+id/image_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/anim" attr:auto_play="true" /> </RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <com.example.powerimageviewtest.PowerImageView android:id="@+id/image_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/conan" /> </RelativeLayout>