Android使用PowerImageView实现播放强大的ImageView动画效果

我个人是比较喜欢逛贴吧的,贴吧里总是会有很多搞笑的动态图片,经常看一看就会感觉欢乐很多,可以释放掉不少平时的压力。确实,比起一张单调的图片,动态图片明显更加的有意思。一般动态图片都是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> 

完成了这个文件之后,下面我们来开始编写最最重要的PowerImageView类,由于这个类要支持ImageView的所有功能,因此需要让PowerImageView继承自ImageView,代码如下所示:

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);
    }
   }
  }
 }
 @Override
 public void onClick(View v) {
  if (v.getId() == getId()) {
   // 当用户点击图片时,开始播放GIF动画
   isPlaying = true;
   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);
    }
   }
  }
 }
 @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;
 }
} 

这个类的代码注释已经非常详细了,我再来简单地解释一下。可以看到,我们重写了ImageView中所有的构建函数,使得PowerImageView的用法可以和ImageView完全相同。在构造函数中,则是对所有必要的数据进行了初始化操作。首先,我们调用了getResourceId()方法去获取图片资源对应的id值,在getResourceId()方法内部是通过Java的反射机制来进行获取的。得到了图片资源的id后,我们将它转换成InputStream,然后传入到Movie.decodeStream()方法中以解码出Movie对象。如果得到的Movie对象等于null,说明这是一张普通的图片资源,就不再进行任何特殊处理,因为父类ImageView都帮我们处理好了。如果得到的Movie对象不等于null,则说明这是一张GIF图片,接着就要去获取是否允许自动播放、图片的宽高等属性的值。如果不允许自动播放,还要给播放按钮注册点击事件,默认是不允许自动播放的。

接下来会进入到onMeasure()方法中。在这个方法中我们进行判断,如果这是一张GIF图片,则需要将PowerImageView的宽高重定义,使得控件的大小刚好可以放得下这张GIF图片。

再往后就会进入到onDraw()方法中。在这个方法里同样先判断当前是一张普通的图片还是GIF图片,如果是普通的图片就直接调用super.onDraw()方法交给ImageView去处理就好了。如果是GIF图片,则先判断该图是否允许自动播放,允许的话就调用playMovie()方法去播放GIF图片就好,不允许的话则会先在PowerImageView中绘制该GIF图片的第一帧,并在图片上绘制一个播放按钮,当用户点击了播放按钮时,再去调用playMovie()方法去播放GIF图片。

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

完成了PowerImageView的编写,下面我们就来看一看如何使用它吧,其实非常简单,打开或新建activity_main.xml,代码如下所示:

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

可以看到,PowerImageView的用法和ImageView几乎完全一样,使用android:src属性来指定一张图片即可,这里指定的anim就是一张GIF图片。然后我们让PowerImageView在布局里居中显示。

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

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

现在可以来运行一下代码了,一打开程序你就会看到GIF图片的第一帧,点击图片之后就可以播放GIF动画了,如下图所示:

然后我们还可以通过修改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>

这里使用了刚才我们自定义的属性,通过attr:auto_play来启用和禁用自动播放功能。现在将auto_play属性指定成true后,PowerImageView上就不会再显示一个播放按钮,而是会循环地自动播放动画。现在重新运行一下程序,效果如下图所示:

怎么样?效果还不错吧。不仅如此,PowerImageView还继承了ImageView原生的所有功能,只要指定的不是GIF图片,PowerImageView表现的结果就和ImageView完全一致,让我们来放一张普通的PNG图片看看吧,修改activity_main.xml中的代码,如下所示:

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

这里在src属性里面指定了一张名字为conan的图片,这是一张PNG图片,效果如下图所示:

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

好了,今天的讲解到此结束,有疑问的朋友请在下面留言。

源码下载,请点击这里

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

您可能感兴趣的文章:

  • Android属性动画实现炫酷的登录界面
  • Android属性动画实现布局的下拉展开效果
  • Android加载Gif动画实现代码
  • android imageview图片居中技巧应用
  • ImageView简单加载网络图片实例代码
  • Android控件系列之ImageView使用方法
  • Android开发ImageView图片无法显示解决过程
  • Android实现ImageView图片双击放大及缩小
  • android ImageView 的几点经验总结
(0)

相关推荐

  • Android加载Gif动画实现代码

    Android加载Gif动画如何实现?相信大家都很好奇,本文就为大家揭晓,内容如下 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_he

  • Android开发ImageView图片无法显示解决过程

    今天碰到一个非常奇怪的问题: 在Android中ImageView无法显示加载的本地SDCard图片. 具体过程是:先调用本地照相机程序摄像,然后将拍摄的图片加载在ImageView中显示. 复制代码 代码如下: public class ActiEnvi extends Activity { static final String TAG = "ActiEnvi"; private static final int REQ_CODE_CAMERA = 0x1; private Str

  • Android控件系列之ImageView使用方法

    学习目的: 1.掌握在Android中如何插入图片 图片的加入可以立刻让您的程序增色不少,我们样例选用一张Android机器人(picture.jpg),您可以使用自己的任何图片进行试验 一般建议您程序中的图片加入资源,而不是放在SD卡中用流的方式去读取,毕竟嵌入的资源比较安全,不容易被篡改. 1.导入图片到资源 将图片拖拽到项目res\drawable开头的3个文件夹下,他们分别代表了高.中.低分辨度的图片.Android读取图片时自动优化,选用合适的一个图片显示,比如高分辨率可以存放128*

  • ImageView简单加载网络图片实例代码

    复制代码 代码如下: private void loadImage() { mImageView = (ImageView) findViewById(R.id.imageView); try { URL url = new URL("http://images.csdn.net/20130609/zhuanti.jpg"); mImageView.setImageBitmap(BitmapFactory.decodeStream(url.openStream())); } catch

  • Android属性动画实现布局的下拉展开效果

    在Android的3.0之后,google又提出了属性动画的这样一个框架,他可以更好的帮助我们实现更丰富的动画效果.所以为了跟上技术的步伐,今天就聊一聊属性动画. 这一次的需求是这样的:当点击一个View的时候,显示下面隐藏的一个View,要实现这个功能,需要将V iew的visibility属性设置gone为visible即可,但是这个过程是一瞬间的,并不能实现我们要的效果.所以,属性动画是个不错的方案. 先把效果贴上 第一个:  第二个: 前面的这个是隐藏着,后面这个是显示的.当点击这个箭头

  • Android属性动画实现炫酷的登录界面

    我们聊聊我们常写的登录界面,这个界面我相信很多人都写过,而且也没什么难度,但是如果要实现比较不一般的效果,那就要花点心思了,先看看项目的效果吧: 我一直都不知道怎么在编辑框连设置图片大小,所以这个图不怎么样适配编辑框了,大家先凑合着看看. 我先讲讲思路,当我们输入完账号跟密码之后,点击登录,那这个输入框就慢慢的消失,在消失后,紧接着就出现这个进度的界面. 思路有了,那我们就开始编码了: 新建一个项目,然后系统生成了一个MainActivity.java文件和activity_main.xml文件

  • android imageview图片居中技巧应用

    做UI布局,尤其是遇到比较复杂的多重LinearLayout嵌套,常常会被一些比较小的问题困扰上半天,比如今天在使用ImageView的时候,想让其居中显示,可是无论怎样设置layout_gravity属性,都无法达到效果,部分代码如下: [java] 复制代码 代码如下: <LinearLayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:

  • android ImageView 的几点经验总结

    最近作图片的显示,遇到了些问题,简单总结1)可以用ImageSwicher和ImageView结合在来做,这样会用到setFectory(),华而不实最要命的是如果图片的大小超过屏幕,实现比较困难,目前是没有找到方法 2)最简单的方法是用ImageView,图片直接FIT_CENTER,android会根据图片的大小自动调节保持图片的比例.如果图片分辨率超过屏幕,android也会自动的调整到屏幕能放下整张的图片在放大图片的时候,可以用ImageView的SetFrame() 和setScale

  • Android实现ImageView图片双击放大及缩小

    本文实例介绍了Android实现ImageView图片双击放大及缩小的相关技巧,分享给大家供大家参考,具体内容如下 public class DoubleScaleImageView extends ImageView implements OnTouchListener, OnGlobalLayoutListener { private boolean isFirst = false; private float doubleScale;// 双击放大的值 private Matrix mSc

  • Android使用PowerImageView实现播放强大的ImageView动画效果

    我个人是比较喜欢逛贴吧的,贴吧里总是会有很多搞笑的动态图片,经常看一看就会感觉欢乐很多,可以释放掉不少平时的压力.确实,比起一张单调的图片,动态图片明显更加的有意思.一般动态图片都是GIF格式的,浏览器中可以直接将这种格式的图片播放成动画. 不过很可惜的是,Android的原生控件并不支持播放GIF格式的图片.我们都知道,在Android中如果想要显示一张图片,可以借助ImageView控件来完成,但是如果将一张GIF图片设置到ImageView里,它只会显示这张图片的第一帧,不会产生任何的动画

  • Android 中从屏幕左下角弹出Dialog动画效果的实现代码

    MainActivity代码: import android.app.Dialog; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.Window; import androi

  • Android Flutter实现五种酷炫文字动画效果详解

    目录 前言 波浪涌动效果 波浪线跳动文字组 彩虹动效 滚动广告牌效果 打字效果 其他效果 自定义效果 总结 前言 偶然逛国外博客,看到了一个介绍文字动画的库,进入 pub 一看,立马就爱上这个动画库了,几乎你能想到的文字动画效果它都有!现在正式给大家安利一下这个库:animated_text_kit.本篇我们介绍几个酷炫的效果,其他的效果大家可以自行查看官网文档使用. 波浪涌动效果 波浪涌动 上面的动画效果只需要下面几行代码,其中loadUntil用于控制波浪最终停留的高度,取值是0-1.0,如

  • Android 使用 Path 实现搜索动态加载动画效果

    今天实现一个搜索动态加载数据的动画效果,还是先看效果吧,用文字描述干巴巴的,看图说话什么都明白了, 实现这个就是使用Path中的getSegment()不断的去改变它截取片段的start和stop,再结合动画,今天就分步骤实现它,看完以后你也会觉的不是很难,只是没想到这么实现而已,所以要多见识,所谓眼界决定你的高度,还是延续我写博客的习惯,一步步分析,第一步就是绘制如下图: 如果单纯的绘制这个图很简单很简单的,绘制一个圆,然后再绘制一根线就搞定,但是要考虑这里的效果,就不能这么干了,如果你看了上

  • Android实现仿iOS菊花加载圈动画效果

    常见的实现方式 切图,做旋转动画 自定义View,绘制效果 gif图 1.切图会增加体积,但相对简单,不过在换肤的场景下,会使用不同颜色,需要准备多张图,不够灵活. 2.由于自定义的好处,不同颜色只需要提供自定义属性,换肤时切换属性设置即可,比较灵活. 3.gif图普遍比较大,而且加载gif没有原生支持,需要引入第三方库,而且消耗内存比较大,不推荐. 效果图: 完整代码 自定义属性: <?xml version="1.0" encoding="utf-8"?&

  • Android实现微信聊天语言点击喇叭动画效果

    微信聊天界面点击语音时,喇叭的动画效果,下面上代码,该类是控制背景变化的工具类,不涉及语音录制和播放. 图片资源: package xxx; import android.os.Handler; import android.widget.ImageView; import xxx.R; import java.util.Timer; import java.util.TimerTask; public class VoicePlayingBgUtil { private Handler han

  • Android仿京东顶部搜索框滑动伸缩动画效果

    最近使用京东发现,京东顶部的搜索框有一个新的伸缩效果,根据用户的手势滑动,伸缩搜索框.觉得效果还不错,就看了下其他的应用有没有这种伸缩的效果,发现安居客也使用了类似的一种效果,然后就想着实现这样的一种动画效果. 首先看下第三方的效果图: 京东效果: 安居客效果: 我们最终实现的效果: 仿京东效果: 仿安居客效果: 看完效果图,接下来,我们开始具体实现上面的效果: 布局文件的编写 根据效果我们可以分析我的要做的功能布局效果,首先,整个布局存在一个头部的滑动操作区域,包括标题栏和搜索栏,然后整个布局

  • Android中的popupwindow进入和退出的动画效果

    废话不多说了直接给大家贴代码了,具体代码如下所示: <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="0" andro

  • Android自定义view仿QQ的Tab按钮动画效果(示例代码)

    话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的错位感,代码很简单: import android.content.Context import android.graphics.* import android.util.AttributeSet import android.view.MotionEvent import android.vi

  • Android基础知识之tween动画效果

    Android中一共提供了两种动画,其一便是tween动画,tween动画通过对view的内容进行一系列的图像变换(包括平移,缩放,旋转,改变透明度)来实现动画效果,动画效果的定义可以使用xml,也可以使用编码来实现. 下面我们逐一查看tween能够实现的动画效果. 先看看工程的整体结构吧: 我们要实现的效果图如图 点击按钮则执行相应的动画操作. 布局文件activity_main.xml <LinearLayout xmlns:android="http://schemas.androi

随机推荐