Android显示gif --摘自陈丰尧老师博客160304

最新推荐文章于 2021-08-05 15:17:47 发布

chulongzong9355

最新推荐文章于 2021-08-05 15:17:47 发布

阅读量110

点赞数

原文链接：https://my.oschina.net/u/2531415/blog/647075

版权

原文地址：http://blog.csdn.net/cfy137000/article/details/50536764

Android为我们提供的组件里没有能显示Gif图片的,那么我们要想实现播放的话就需要自己封装一个组件来显示Gif图片

需求分析

我们们在写代码之前,首先需要分析一下我们所需要的功能:

1.可以自定义GIF图片是否在加载的时候就播放,如果在加载的时候不播放的话,就点击一次再播放

2.可以自定义我们的GIF图片是播放一次就停止,还是一直循环播放

自定义属性

分析完了我们的需求之后,我们知道,我们至少需要为我们的自定义控件定义2条属性

首先在values里新建一个名为attrs的xml文件,代码如下

[html] view plain copy

<span style="font-size:14px;"><resources>
<declare-styleable name="GifImageView">
<attr name="auto_play" format="boolean" />
<attr name="is_loop" format="boolean" />
</declare-styleable>
</resources></span>

这里的declare-styleable name 就是你这一组自定义属性的名字,这里我们通常是和自定义组件的类名一致即可

attr name 就是我们在xml里使用的时候所能显示的名字

而 format属性则代表的是该条属性的格式它有以下几种:

reference：参考某一资源ID
color：颜色值
boolean：布尔值
dimension：尺寸值。
float：浮点值。
integer：整型值。
string：字符串
fraction：百分数。
enum：枚举值
flag：位或运算

需要注意的是,一条属性可以指定几种格式,使用 | 连接

GifImageView

接下来我们创建一个自定义组件的类GifImageView

该类继承自ImageView 因为我们除了播放动画的功能外,其他的大部分功能都和ImageView是有重叠的,我们只需要改造它即可,再继承了之后,我们重写它的构造方法,重写前三个参数的代码如下:

[java] view plain copy

public class GifImageView extends ImageView {
public GifImageView(Context context) {
this(context,null);
}
public GifImageView(Context context, AttributeSet attrs) {
this(context,attrs,0);
}
public GifImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
}

构造方法

这里需要简单说明以下这几个构造方法的用途

一个参数的是在Java代码里new出来的时候使用的,两个参数的是在xml文件里生命的时候会调用的,而三个参数的则是我们调用自定义属性的时候会调用的.

在创建完该类了之后,我们就可以先去xml文件里将我们的组件声明了.代码如下:

[html] view plain copy

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.lanou.chenfengyao.designdemo.MainActivity">
<com.lanou.chenfengyao.designdemo.GifImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:auto_play="true"
app:is_loop="true"
android:src="@mipmap/testgif"/>
</RelativeLayout>

值得注意的是我们自定义的属性前面的命名空间是app,当我们写app的时候,系统会默认上我们当前app的位置去找我们的自定义属性,当然,你也可以自己起一个名字,但是在最外层的命名空间上就需要手动指向属性文件的位置了,一般情况下,写app比较简洁

这里可以看到:我们让该控件自动播放,并且循环.在xml里我们的所有代码就编写完毕了,接下来回到Java代码里看看是如何播放GIF的.

首先先上代码:

[java] view plain copy

public class GifImageView extends ImageView {
private Movie movie;
private long mMovieStart;
private int mImageWidth;
private int mImageHeight;
private boolean isAutoPlay;
private boolean isLoop;
public GifImageView(Context context) {
this(context,null);
}
public GifImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public GifImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.GifImageView);
int resourceId = getResourceId(attrs);
if (resourceId != 0) {
InputStream is = getResources().openRawResource(resourceId);
movie = Movie.decodeStream(is);
if (movie != null) {
isLoop = typedArray.getBoolean(R.styleable.GifImageView_is_loop, true);
isAutoPlay = typedArray.getBoolean(R.styleable.GifImageView_auto_play, true);
Bitmap bitmap = BitmapFactory.decodeStream(is);
mImageWidth = bitmap.getWidth();
mImageHeight = bitmap.getHeight();
bitmap.recycle();
}
}
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
isAutoPlay = true;
invalidate();
}
});
}
@Override
protected void onDraw(Canvas canvas) {
if (movie == null || !isAutoPlay) {
super.onDraw(canvas);
} else {
if (playMovie(canvas)) {
invalidate();
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (movie != null) {
setMeasuredDimension(mImageWidth, mImageHeight);
}
}
private boolean playMovie(Canvas canvas) {
long now = SystemClock.uptimeMillis();
if (mMovieStart == 0) {//这是第一次绘制
mMovieStart = now;
}
int duration = movie.duration();
int relTime = (int) ((now - mMovieStart) % duration);
movie.setTime(relTime);
movie.draw(canvas, 0, 0);
if (((now - mMovieStart) >= duration)) {
mMovieStart = 0;
return isLoop;
}
return true;
}
@Override
public void setImageResource(@RawRes int resId) {
if (resId != 0) {
InputStream is = getResources().openRawResource(resId);
movie = Movie.decodeStream(is);
}
super.setImageResource(resId);
invalidate();
}
//获取资源ID
private int getResourceId(AttributeSet attrs){
for (int i = 0; i < attrs.getAttributeCount(); i++){
if (attrs.getAttributeName(i).equals("src")){
return attrs.getAttributeResourceValue(i,0);
}
}
return 0;
}
}

之后我们来分析一下上面的代码

我们播放GIF图片需要用到的核心类是Movie类,该类可以接受一个流,并且根据时间刷新每一帧的画面,这样就可以将GIF图片播放出来了

首先看我们的构造方法

[java] view plain copy

public GifImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.GifImageView);
int resourceId = getResourceId(attrs);
if (resourceId != 0) {
InputStream is = getResources().openRawResource(resourceId);
movie = Movie.decodeStream(is);
if (movie != null) {
isLoop = typedArray.getBoolean(R.styleable.GifImageView_is_loop, true);
isAutoPlay = typedArray.getBoolean(R.styleable.GifImageView_auto_play, true);
Bitmap bitmap = BitmapFactory.decodeStream(is);
mImageWidth = bitmap.getWidth();
mImageHeight = bitmap.getHeight();
bitmap.recycle();
}
}
<span style="white-space:pre"> </span>typedArray.recycle();
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
isAutoPlay = true;
invalidate();
}
});
}

获得图片ID

在构造方法里我们首先获得了TypedArray 的对象,这对象里就存放着我们所有的在xml里声明的自定义属性.接下来我们调用了一个自定义的方法来获取在xml文件里声明的src属性,也就是我们的这张图片.来看一下这个方法

[java] view plain copy

//获取资源ID
private int getResourceId(AttributeSet attrs){
for (int i = 0; i < attrs.getAttributeCount(); i++){
if (attrs.getAttributeName(i).equals("src")){
return attrs.getAttributeResourceValue(i,0);
}
}
return 0;
}

通常在网上找到的方法都是利用反射从attrs里拿到src的属性值,但是利用反射获得的Id有个问题,即当在xml里没有给src属性的时候,通过反射一样会拿到一个数字,所以很难通过返回的数字判断Id是否为空.

接着看构造方法,在拿到了资源ID之后我们就将这张图片转换成输入流,然后再给到movie对象中去,接下来,获取一下自动播放和是否循环这两个属性,默认值我们都给它true; 之后我们将gif图片转换成bitmap,主要是为了拿到它的宽高,去设置给我们的自定义组件,因为Movie在播放的时候没法设置宽高,为了保证一致性,将宽高保持一致.最后设置监听,当点击的时候调用invalidate();这个方法就是重新绘制.

onDraw

之后我们看看onDraw方法,这个方法就是去绘制图片的

[java] view plain copy

@Override
protected void onDraw(Canvas canvas) {
if (movie == null || !isAutoPlay) {
super.onDraw(canvas);
} else {
if (playMovie(canvas)) {
invalidate();
}
}
}

可以看到,当不播放,或者不是一张GIF的时候,就直接调用父类的绘制方法,否则,会判断一下,判断里的方法是我们自己写的,来看一下

[java] view plain copy

private boolean playMovie(Canvas canvas) {
long now = SystemClock.uptimeMillis();
if (mMovieStart == 0) {//这是第一次绘制
mMovieStart = now;
}
int duration = movie.duration();
int relTime = (int) ((now - mMovieStart) % duration);
movie.setTime(relTime);
movie.draw(canvas, 0, 0);
if (((now - mMovieStart) >= duration)) {
mMovieStart = 0;
return isLoop;
}
return true;
}

该方法就是播放的核心代码,首先获得当前的时间,给到mMovieStart,接下来获取整个播放Gif动画的时长,那么relTime就是当前播放到什么时间,通过调用movie.setTime方法,就使得movie拿到了这个时间的图片,然后画出来就可以了.之后是判断是否循环的方法,当时间过了持续时间的话,就会去返回isLoop,也就是当只有设置不循环的时候会返回false,那么,在onDraw方法里,当playMovie发挥true的时候,就会持续的去执行invalidate();去刷新当前显示的图片,这样,就实现了播放Gif动画.

其他方法

最后再补充上 Java代码里手动设置Gif图片的方法就可以了.

总结

到此播放Gif图片的自定义组件就基本实现了.

主要参考了

阿瞾的博客

http://blog.csdn.net/XieYupeng520/article/details/46807629#quote

同时改进了它的获取图片ID的部分

转载于:https://my.oschina.net/u/2531415/blog/647075

chulongzong9355

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android显示gif --摘自陈丰尧老师博客160304

原文地址：http://blog.csdn.net/cfy137000/article/details/50536764 Android为我们提供的组件里没有能显示Gif图片的,那么我们要想实现播放的话就需要自己封装一个组件来显示Gif图片需求分析我们们在写代码之前,首先需要...
复制链接

扫一扫