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、在布局中定义

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dip">
    <ViewFlipper
        android:id="@+id/flipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dip"
        android:flipInterval="2000">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="@string/animation_2_text_1"
            android:textSize="26sp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="@string/animation_2_text_2"
            android:textSize="26sp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="@string/animation_2_text_3"
            android:textSize="26sp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="@string/animation_2_text_4"
            android:textSize="26sp" />
    </ViewFlipper>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dip"
        android:text="@string/animation_2_instructions" />
    <!-- 用来切换不同的动画 -->
    <Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromYDelta="100%p"
        android:toYDelta="0" />
    <alpha
        android:duration="300"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

push_up_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromYDelta="0"
        android:toYDelta="-100%p" />
    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

为 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