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