Hacks动画篇-Hack2 使用ViewFlipper实现公告轮播

ViewFlipper

作者：李旺成

时间：2016年5月10日

---

UC 小说书架公告动画

记得 UC 浏览器 10.9.9 往前版本的小说书架标题栏下面有一个公告栏，在这个公告栏里面会动态展示当前的公告。

刚看到的时候觉得很不错，于是想自己动手实现一个，当时的思路是使用竖向的 ViewPager，因为这和 ViewPager 的轮播太相似了。先来看看效果：

UC浏览器小说书架公告动画

“Tips：”UC浏览器改版后这个动画已经没有了，如果你感兴趣的话可以去下载历史版本看看，这个示例里面用的是 UCBrowser_V10.8.5.689

虽然，使用竖向的 ViewPager 可以实现上面的动画效果，但是，总感觉哪里不对，是不是有更简单的办法？直到某天，在玩 APIDemos 的时候突然发现里面有个一样的动画效果：

APIDemos中的Push动画

在 APIDemos 源码里面定位了一下，原来这里使用的是 ViewFlipper。

ViewFlipper 简介

前面介绍了 ViewSwitcher 的两个子类 TextSwitcher 和 ImageSwitcher，可以用来实现 Text/Image 的切换效果。而 ViewFlipper 可以用来做多个 View 之间的切换效果，可以一次指定也可以每次切换的时候都指定单独的动画效果。

先看官方介绍：

ViewFlipper类

从继承结构看，这是个容器（FrameLayout 又出现了），并且与 ViewSwitcher 一样，都是继承自 ViewAnimator。看下它提供的属性，就两个，而且见名知义，这里就不解释了。

再看看 ViewFlipper 提供的方法：

ViewFlipper的方法

方法不多，也是可以见名知义的，直接调用看效果吧！

ViewFlipper 简单使用

我们想实现 UC 浏览器小说书架里面的公告切换效果，先看效果：

ViewFlipper动画演示

1、在布局中定义

ViewFlipper 继承了 FrameLayout（ViewFlipper 的直接父类 ViewAnimator 继承自 Framelayout），所以直接把它当作 FrameLayout 使用即可。

2、开始 Flipping
上面的布局中已经为 ViewFlipper 填充了内容，下面直接启动 Flipping 即可。

mFlipper = ((ViewFlipper) this.findViewById(R.id.flipper));
mFlipper.startFlipping();

3、设置切换动画
自己去看看上面直接启动 Flipping 之后的动画效果，有点”搓“有没有，来我们模仿 UC 的公告效果自定义一个，先看用到的动画文件：
push_up_in.xml

push_up_out.xml

为 ViewFlipper 设置动画

mFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
        R.anim.push_up_in));
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
        R.anim.push_up_out));

看到没，是不是很像了。

4、其他动画
这些动画是直接从 APIDemos 源码里面拷出来的，大家可以点击示例里面的 Spinner 来切换不同的动画看看效果，这里就不偏题了。

小结

ViewFlipper 的使用很简单，步骤如下：

1. 在布局中添加 ViewFlipper
   如果是静态数据，那么建议直接在布局中就添加到 ViewFlipper 中
2. 设置切换动画
   setInAnimation()
   setOutAnimation()
3. 启动 Flipping
   startFlipping()
4. 往 FlippingView 中动态添加 View
   创建好 View 后，调用 ViewFlipper 的 addView() 方法添加 View 即可

项目地址

AndroidHacks合集
动画篇

项目示例代码：
ViewFlipperActivity.java
activity_viewflipper.xml
push_up_out.xml
push_up_in.xml