Android-自定义View实现ImageView播放gif

http://blog.csdn.net/guolin_blog/article/details/11100315

总体思路是这样的

PowerImageView类继承ImageView类

给PowerImageView类添加自定义属性auto_play

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

    <com.example.customview.CounterView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true" />  

</RelativeLayout> 

构造函数中，初始化：

得到资源id，通过id获取流，判断是不是gif图片

如果是gif图片，需要得到：auto_play，图片长度，图片宽度这三个属性

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);
                }
            }
        }
    }

得到资源id的方法有两个：

1.反射

/**
     * 通过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;
    }

这个方法可以得到的不仅仅是自定义的属性，给ImageView设置的所有属性都可以一起得到。

2.通过attr的方法

for (int i = 0; i < attrs.getAttributeCount(); i++) {   　　if(attrs.getAttributeName(i).equals("src")) 　　{    　　　　System.out.println(attrs.getAttributeResourceValue(i, 0)+"=========");　　　　return attrs.getAttributeResourceValue(i, 0);    　　}    }

播放gif的方法：

保存起始时间，判断现在时间-起始时间是否大于动画长度，大于则停

下面我们来看看playMovie()方法中是怎样播放GIF图片的吧。可以看到，首先会对动画开始的时间做下记录，然后对动画持续的时间做下记录，接着使用当前的时间减去动画开始的时间，得到的时间就是此时PowerImageView应该显示的那一帧，然后借助Movie对象将这一帧绘制到屏幕上即可。之后每次调用playMovie()方法都会绘制一帧图片，连贯起来也就形成了GIF动画。注意，这个方法是有返回值的，如果当前时间减去动画开始时间大于了动画持续时间，那就说明动画播放完成了，返回true，否则返回false。

/**
     * 开始播放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;
    }

绘制gif:

onMeasure规定图片大小，gif则用setMeasuredDimension给定大小

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

onDraw绘制图片，非gir则用默认

起始时绘制开始按钮

isplaying时继续调用play_movie，再invalidate()

@Override
    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);
                }
            }
        }
    }

然后我们还可以通过修改activity_main.xml中的代码，给它加上允许自动播放的属性，代码如下所示：

<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>  

注意：

这里不能对gif的大小进行设置，gif多大，显示出来就是多大。这里主要是演示自定义view，并不是专门实现gif功能

源码下载，请点击这里