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

Hacks动画篇-Hack2 使用ViewFlipper实现公告轮播_第1张图片
ViewFlipper

作者:李旺成

时间:2016年5月10日


UC 小说书架公告动画

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

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

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

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

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

Hacks动画篇-Hack2 使用ViewFlipper实现公告轮播_第2张图片
APIDemos中的Push动画

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

ViewFlipper 简介

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

先看官方介绍:

Hacks动画篇-Hack2 使用ViewFlipper实现公告轮播_第3张图片
ViewFlipper类

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

再看看 ViewFlipper 提供的方法:

Hacks动画篇-Hack2 使用ViewFlipper实现公告轮播_第4张图片
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

你可能感兴趣的:(Hacks动画篇-Hack2 使用ViewFlipper实现公告轮播)