Android实现可播放GIF动画的ImageView

Android的原生控件并不支持播放GIF格式的图片。我们都知道,在Android中如果想要显示一张图片,可以借助ImageView来完成,但是如果将一张GIF图片设置到ImageView里,它只会显示这张图片的第一帧,不会产生任何的动画效果。今天我们来编写一个自定义的增强型ImageView(继承ImageView),可以播放GIF格式的图片,暂且叫做GifImageView吧。

1.自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="GifImageView">
  <attr name="auto_play" format="boolean"></attr>
 </declare-styleable>
</resources>

2.自定义View中获取属性值

 private Movie mMovie;//播放动画需要用到的,系统类
 private int mImageWidth;//动画的imageview的宽度
 private int mImageHeight;//动画imageview的高度
 private long mMovieStart = 0;// 播放开始
 private boolean isAutoPlay;//是否自动播放
 private Bitmap mStartPlay;//开始按钮
 private boolean isPlaying=false;//记录是否正在播放
 private float mScale;//图片的缩放比
 private int mMeasuredGifWidth;//缩放后图片宽
 private int mMeasuredGifHeight;//缩放后图片高
 ...

 private void init(Context context, AttributeSet attrs) {
 TypedArray attributes = context.obtainStyledAttributes(attrs,R.styleable.GifImageView);
 // 通过反射拿布局中src的资源id,所以gif文件需要放在布局的src中
 int resourceId = getResourceId(attributes, context, attrs);
 if (resourceId != 0) {
  // 说明是gif动画
  // 1.将resourcesId变成流
  // 2.用Move来decode解析流
  // 3.获得bitmap的长宽
  InputStream is = getResources().openRawResource(resourceId);
  mMovie = Movie.decodeStream(is);
  if (mMovie != null) {
  Bitmap bitmap = BitmapFactory.decodeStream(is);
  mImageWidth = bitmap.getWidth();
  mImageHeight = bitmap.getHeight();
  // 用完释放
  bitmap.recycle();
  // 获得是否允许自动播放,如果不允许自动播放,则初始化播放按钮
  isAutoPlay = attributes.getBoolean(R.styleable.GifImageView_auto_play, false);
  if (!isAutoPlay) {
   mStartPlay = BitmapFactory.decodeResource(getResources(),R.drawable.start_play);
   setOnClickListener(this);
  }
  }
 }
 //回收资源
 attributes.recycle();
 }

 /**
 * 通过反射拿布局中src的资源id
 *
 * @param attrs
 * @param context
 * @param attributes
 */
 private int getResourceId(TypedArray attributes, Context context, AttributeSet attrs) {
 try {
  Field filed = TypedArray.class.getDeclaredField("mValue");
  filed.setAccessible(true);
  TypedValue typeValue = (TypedValue) filed.get(attributes);
  return typeValue.resourceId;
 } catch (Exception e) {
  e.printStackTrace();
 }
 }
 return 0;
}

3.重写onMesure()

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 if (mMovie != null) {
  /*
   * Calculate horizontal scaling
   */
  float scaleW = 1f;
  int measureModeWidth = MeasureSpec.getMode(widthMeasureSpec);
  if (measureModeWidth != MeasureSpec.UNSPECIFIED) {
   int maximumWidth = MeasureSpec.getSize(widthMeasureSpec);
   scaleW = (float) mImageWidth / (float) maximumWidth;
  }
  /*
   * calculate vertical scaling
   */
  float scaleH = 1f;
  int measureModeHeight = MeasureSpec.getMode(heightMeasureSpec);
  if (measureModeHeight != MeasureSpec.UNSPECIFIED) {
   int maximumHeight = MeasureSpec.getSize(heightMeasureSpec);
   scaleH = (float) mImageHeight / (float) maximumHeight;
  }
  /*
   * calculate overall scale
   */
  mScale = 1f / Math.max(scaleH, scaleW);
  mMeasuredGifWidth = (int) (mImageWidth * mScale);
  mMeasuredGifHeight = (int) (mImageHeight * mScale);
  setMeasuredDimension(mMeasuredGifWidth, mMeasuredGifHeight);
 }
 }

4.重写onDraw()

 @Override
 protected void onDraw(Canvas canvas) {
 if (mMovie == null) {
  // mMovie等于null,说明是张普通的图片,则直接调用父类的onDraw()方法
  super.onDraw(canvas);
 } else {
  // mMovie不等于null,说明是张GIF图片
  if (isAutoPlay) {
  // 如果允许自动播放,就播放
  playMovie(canvas);
  invalidate();
  } else {
  // 不允许自动播放的话
  // 1.判断是否正在播放
  // 2.获得第一帧的图像
  // 3.然后添加播放按钮
  if (isPlaying) {
   // 如果正在播放就playmoive继续播放
   if (playMovie(canvas)) {
   isPlaying = false;
   }
   invalidate();
  } else {
   // 第一帧
   mMovie.setTime(0);
   canvas.save(Canvas.MATRIX_SAVE_FLAG);
   canvas.scale(mScale, mScale);
   mMovie.draw(canvas, 0, 0);// 画
   canvas.restore();
   // 绘制开始按钮
   int offsetW = (mMeasuredGifWidth - mStartPlay.getWidth()) / 2;
   int offsetH = (mMeasuredGifHeight - mStartPlay.getHeight()) / 2;
   canvas.drawBitmap(mStartPlay, offsetW, offsetH, null);
  }
  }
 }
 }

 /**
 * 播放gif动画
 *
 * @param canvas
 */
 private boolean playMovie(Canvas canvas) {
 // 1.获取播放的时间
 // 2.如果开始start=0,则认为是开始
 // 3.记录播放的时间
 // 4.设置进度
 // 5.画动画
 // 6.如果时间大于了播放的时间,则证明结束
 long now = SystemClock.uptimeMillis();
 if (mMovieStart == 0) {
  mMovieStart = now;
 }
 int duration = mMovie.duration();
 if (duration == 0) {
  duration = 1000;
 }
 //记录gif播放了多少时间
 int relTime = (int) ((now - mMovieStart) % duration);
 mMovie.setTime(relTime);// 设置时间
 canvas.save(Canvas.MATRIX_SAVE_FLAG);
 canvas.scale(mScale, mScale);
 mMovie.draw(canvas, 0, 0);// 画
 canvas.restore();
 if ((now - mMovieStart) >= duration) {
  // 结束
  mMovieStart = 0;
  return true;
 }
 return false;
 }

5.添加点击事件

 @Override
 public void onClick(View v) {
 if(v.getId()==getId()){
  isPlaying=true;
  invalidate();
 }
 }

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

--------------------------------------------------------------------------------

现在我们来看看运行后效果如何吧,
布局文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:attr="http://schemas.android.com/apk/res/com.hx.gifimageview"
 android:id="@+id/container"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >

 <com.hx.gifimageview.GifImageView
  android:layout_width="150dip"
  android:layout_height="150dip"
  android:layout_margin="10dp"
  android:src="@drawable/shulan"
  attr:auto_play="false" />

 <com.hx.gifimageview.GifImageView
  android:layout_width="150dip"
  android:layout_height="150dip"
  android:layout_margin="10dp"
  android:src="@drawable/shulan"
  attr:auto_play="true" />

 <com.hx.gifimageview.GifImageView
  android:layout_width="150dip"
  android:layout_height="150dip"
  android:layout_margin="10dp"
  android:src="@drawable/jingtai"
  attr:auto_play="true" />
</LinearLayout>

图一的auto_play属性为false,会显示第一帧和一个播放按钮,点击后Gif图片会自动运行。
图二的auto_play属性为true,会自动循环播放Gif。
图三我们给的资源是静态图片,因为自定义View继承ImageView,所以具备ImageView所有特性,因此也能显示静态图片。

源码下载:http://xiazai.jb51.net/201609/yuanma/GifImageView(jb51.net).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-09-03

Android自定义View播放Gif动画的示例

前言 GIF是一种很常见的动态图片格式,在Android中它的使用场景非常多,大到启动页动画.小到一个Loading展示,都可以用GIF动画来完成,使用也很方便,直接从美工那边拿过来用就成.如果项目赶时间或者自定义原生动画太麻烦,GIF都是一个很好的选择,相比于最新的WEBP格式的动画,也有更好的兼容性(毕竟已经出现很多年了). 关于图片加载我一直用的是Google推荐的 Glide,图片加载和缓存都做的很好,同样也支持GIF动画.不过Glide默认就是循环播放Gif,没有开放相关的接口来控制G

Android使用glide加载gif动画设置播放次数

在使用glide加载gif动画,有时需要设置播放的次数,然后播放玩一次或者几次之后,需要在播放完做一些其他的操作,直接看代码: Glide.with(this) .load(R.drawable.xiaoguo) .diskCacheStrategy(DiskCacheStrategy.SOURCE) .listener(new RequestListener<Integer, GlideDrawable>() { @Override public boolean onException(Ex

Android中播放Gif动画取巧的办法

由于做的项目,要有个动画的等待效果,第一时间想到的就是Gif(懒,省事),但是试了好多据说能播放Gif的控件,也写过,但是放到魅族手机上就是不能播放,所有就想了个招,既然Gif能在浏览器上播放,那android 的 WebView 也能播放,写了个Demo,果然能播放. 1.将gif的文件放到android的资源文件夹里面 2.写个html,将android的gif源放到WebView里面去加载 <RelativeLayout xmlns:android="http://schemas.a

android播放gif格式图片示例

复制代码 代码如下: import android.content.Context;import android.graphics.Canvas;import android.graphics.Movie;import android.util.AttributeSet;import android.view.View;import android.view.ViewGroup.LayoutParams; import com.nmbs.R; public class GifView exten

Android中GIF动图的播放控制和监听详解

前言 最近接手的项目里涉及到了 GIF 动图的播放与监听,在上一版本中对于 GIF 的处理是由 H5 来实现的,因为考虑到用户体验,因此现在的需求是将这块儿原生化,途中差点误入歧途!下面来看看详细的介绍吧. Android 中 GIF 动图处理与监听 刚开始第一个想到的便是 glide , 但是自认为 glide 不能够控制 GIF 以及去监听它,所以网上去搜寻别的方法.看到有一个方案是将图片分帧,一张张的去用逐帧动画来实现. 我开始怀疑给这个解决方案的人了,都什么时代了还做这种费力不讨好,大量

Android中系统自带锁WalkLock与KeyguardLock用法实例详解

本文实例讲述了Android中系统自带锁WalkLock与KeyguardLock用法.分享给大家供大家参考,具体如下: WalkLock - 顾名思义 唤醒锁 点亮屏幕用的 KeyguardLock - 顾名思义 键盘锁 解锁键盘用的 详细介绍: 1: WalkLock 唤醒锁 - WalkLock真的能点亮屏幕吗? 答案是肯定的. 可是有时候为什么不点亮屏幕,这个就是参数设置的问题了. 复制代码 代码如下: PowerManager.newWakeLock(PowerManager.FULL

Android中wifi与数据流量的切换监听详解

最近在做一个wifi和移动数据的监控功能,来来回回折腾了一阵子,这个模块的主要功能是监听整个APP的wifi与数据流量的切换,让用户使用专用流量,而不是用wifi,给一个弹窗,点击确认,自动切换数据流量,关闭wifi.我的思路是写一个静态广播,监听在广播里面进行监听,启用系统弹窗,点击确认,自动切换网络,这里面有一个坑就是弹窗会在广播中多次被调用,其实只调用了一次,但是实际上多次调用系统的弹窗会一个叠加一个,搞了好久,终于搞好了,原来是系统广播导致的叠加,详情看代码: 网络封装类Connecti

Android中可以作为Log开关的一些操作及安全性详解

前言 本文主要给大家介绍了关于Android中能够作为Log开关的一些操作及安全性的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 自定义常量 开发阶段利用 Log 日志方便代码调试是再常见不过的事情.出于安全考虑,这种做法仅限于 Debug 模式,Release 模式下打包发布时一定要关掉.所以在我们的项目中,一定会有一个工具类或者方法来控制 Log 日志的使用,比如: public class LogUtils { public static final Bool

Android中使用am命令实现在命令行启动程序详解

在Android中,除了从界面上启动程序之外,还可以从命令行启动程序,使用的是命令行工具am. 复制代码 代码如下: usage: am [subcommand] [options] start an Activity: am start [-D]         -D: enable debugging send a broadcast Intent: am broadcast start an Instrumentation: am instrument [flags]         -r

Android中一种效果奇好的混音方法详解

初识音频 从初中物理上我们就学到,声音是一种波.计算机只能处理离散的信号,通过收集足够多的离散的信号,来不断逼近波形,这个过程我们叫做采样.怎么样才能更好的还原声音信息呢?这里很自然引出两个概念了. 采样频率(Sample Rate):每秒采集声音的数量,它用赫兹(Hz)来表示. 采样率越高越靠近原声音的波形,常见的采样率有以下几种: 8khz:电话等使用,对于记录人声已经足够使用. 22.05khz:广播使用频率. 44.1kb:音频CD. 48khz:DVD.数字电视中使用. 96khz-1

Android中使用socket通信实现消息推送的方法详解

原理 最近用socket写了一个消息推送的demo,在这里和大家分享一下. 主要实现了:一台手机向另外一台手机发送消息,这两台手机可以随时自由发送文本消息进行通信,类似我们常用的QQ. 效果图: 原理:手机通过socket发送消息到服务器,服务器每接收到一条消息之后,都会把这条消息放进一个messageList里面,服务器会不停地检测messageList是否含有消息,如果有的话就会根据messageList里面item的数据,推送到相应的另一端手机上面. 下面简单画了一个图来说明这个原理: 演

基于Android中Webview使用自定义的javascript进行回调的问题详解

先说为什么需要讨论这个问题. 现在很多的手机应用,都可能会直接嵌入一个web页面.这样做的好处:一个是功能更新方便,维护起来容易,只需要维护服务器的页面即可,不需要更新客户端:另一个是功能通用,不仅android可以用,ios也可以用,symbian也可以直接用. 那为什么现在很多手机应用并不做成web方式的呢?原因很多.一个是现阶段web方式展现能力相对较弱,如果对于应用的美观程度要求比较高,就无法使用web方式:一个是web方式速度相对较慢,用户体验会受一些影响:一个是现阶段流量还是相对宝贵

Android开发之基本控件和四种布局方式详解

Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方式Android和iOS还是区别挺大的,在iOS中有Frame绝对布局和AutoLayout相对布局.而在Android中的布局方式就比较丰富了,今天博客中会介绍四种常用的布局方式.先总结一下控件,然后再搞一搞基本方式,开发环境还是用的Mac下的Android Studio.开始今天的正题, 虽然A

Android 实现抖音小游戏潜艇大挑战的思路详解

<潜水艇大挑战>是抖音上的一款小游戏,以面部识别来驱动潜艇通过障碍物,最近特别火爆,相信很多人都玩过. 一时兴起自己用Android自定义View也撸了一个,发现只要有好的创意,不用高深的技术照样可以开发出好玩的应用.开发过程现拿出来与大家分享一下. 项目地址: https://github.com/vitaviva/ugame 基本思路 整个游戏视图可以分成三层: camera(相机):处理相机的preview以及人脸识别 background(后景):处理障碍物相关逻辑 foregroun