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

96
作者 diygreen
2016.05.10 12:01 字数 1198
ViewFlipper
ViewFlipper

作者:李旺成

时间:2016年5月10日


UC 小说书架公告动画

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

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

UC%u6D4F%u89C8%u5668%u5C0F%u8BF4%u4E66%u67B6%u516C%u544A%u52A8%u753B
UC浏览器小说书架公告动画

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

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

APIDemos%u4E2D%u7684Push%u52A8%u753B
APIDemos中的Push动画

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

ViewFlipper 简介

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

先看官方介绍:

ViewFlipper%u7C7B
ViewFlipper类

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

再看看 ViewFlipper 提供的方法:

ViewFlipper%u7684%u65B9%u6CD5
ViewFlipper的方法

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

ViewFlipper 简单使用

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

ViewFlipper%u52A8%u753B%u6F14%u793A
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

AndroidHacks