ViewFlipper

作者：李旺成

時(shí)間：2016年5月10日

UC 小說(shuō)書(shū)架公告動(dòng)畫(huà)

記得 UC 瀏覽器 10.9.9 往前版本的小說(shuō)書(shū)架標(biāo)題欄下面有一個(gè)公告欄雁比，在這個(gè)公告欄里面會(huì)動(dòng)態(tài)展示當(dāng)前的公告燥狰。

剛看到的時(shí)候覺(jué)得很不錯(cuò)昌抠，于是想自己動(dòng)手實(shí)現(xiàn)一個(gè)，當(dāng)時(shí)的思路是使用豎向的 ViewPager默勾，因?yàn)檫@和 ViewPager 的輪播太相似了番电。先來(lái)看看效果：

UC瀏覽器小說(shuō)書(shū)架公告動(dòng)畫(huà)

“Tips：”UC瀏覽器改版后這個(gè)動(dòng)畫(huà)已經(jīng)沒(méi)有了，如果你感興趣的話可以去下載歷史版本看看默蚌，這個(gè)示例里面用的是 UCBrowser_V10.8.5.689

雖然冻晤，使用豎向的 ViewPager 可以實(shí)現(xiàn)上面的動(dòng)畫(huà)效果，但是绸吸，總感覺(jué)哪里不對(duì)鼻弧，是不是有更簡(jiǎn)單的辦法？直到某天锦茁，在玩 APIDemos 的時(shí)候突然發(fā)現(xiàn)里面有個(gè)一樣的動(dòng)畫(huà)效果：

APIDemos中的Push動(dòng)畫(huà)

在 APIDemos 源碼里面定位了一下攘轩，原來(lái)這里使用的是 ViewFlipper。

ViewFlipper 簡(jiǎn)介

前面介紹了 ViewSwitcher 的兩個(gè)子類 TextSwitcher 和 ImageSwitcher码俩，可以用來(lái)實(shí)現(xiàn) Text/Image 的切換效果度帮。而 ViewFlipper 可以用來(lái)做多個(gè) View 之間的切換效果，可以一次指定也可以每次切換的時(shí)候都指定單獨(dú)的動(dòng)畫(huà)效果握玛。

先看官方介紹：

ViewFlipper類

從繼承結(jié)構(gòu)看够傍，這是個(gè)容器（FrameLayout 又出現(xiàn)了），并且與 ViewSwitcher 一樣挠铲，都是繼承自 ViewAnimator冕屯。看下它提供的屬性拂苹，就兩個(gè)安聘，而且見(jiàn)名知義，這里就不解釋了瓢棒。

再看看 ViewFlipper 提供的方法：

ViewFlipper的方法

方法不多浴韭，也是可以見(jiàn)名知義的，直接調(diào)用看效果吧脯宿！

ViewFlipper 簡(jiǎn)單使用

我們想實(shí)現(xiàn) UC 瀏覽器小說(shuō)書(shū)架里面的公告切換效果念颈，先看效果：

ViewFlipper動(dòng)畫(huà)演示

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" />
    <!-- 用來(lái)切換不同的動(dòng)畫(huà) -->
    <Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

ViewFlipper 繼承了 FrameLayout（ViewFlipper 的直接父類 ViewAnimator 繼承自 Framelayout）连霉，所以直接把它當(dāng)作 FrameLayout 使用即可榴芳。

2嗡靡、開(kāi)始 Flipping
上面的布局中已經(jīng)為 ViewFlipper 填充了內(nèi)容，下面直接啟動(dòng) Flipping 即可窟感。

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

3讨彼、設(shè)置切換動(dòng)畫(huà)
自己去看看上面直接啟動(dòng) Flipping 之后的動(dòng)畫(huà)效果，有點(diǎn)”搓“有沒(méi)有柿祈，來(lái)我們模仿 UC 的公告效果自定義一個(gè)哈误，先看用到的動(dòng)畫(huà)文件：
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 設(shè)置動(dòng)畫(huà)

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

看到?jīng)]，是不是很像了躏嚎。

4蜜自、其他動(dòng)畫(huà)
這些動(dòng)畫(huà)是直接從 APIDemos 源碼里面拷出來(lái)的，大家可以點(diǎn)擊示例里面的 Spinner 來(lái)切換不同的動(dòng)畫(huà)看看效果卢佣，這里就不偏題了袁辈。

小結(jié)

ViewFlipper 的使用很簡(jiǎn)單，步驟如下：

1. 在布局中添加 ViewFlipper
   如果是靜態(tài)數(shù)據(jù)珠漂，那么建議直接在布局中就添加到 ViewFlipper 中
2. 設(shè)置切換動(dòng)畫(huà)
   setInAnimation()
   setOutAnimation()
3. 啟動(dòng) Flipping
   startFlipping()
4. 往 FlippingView 中動(dòng)態(tài)添加 View
   創(chuàng)建好 View 后，調(diào)用 ViewFlipper 的 addView() 方法添加 View 即可

項(xiàng)目地址

AndroidHacks合集
動(dòng)畫(huà)篇

項(xiàng)目示例代碼：
ViewFlipperActivity.java
activity_viewflipper.xml
push_up_out.xml
push_up_in.xml