作者 | xiaoyanger
地址 | http://www.jianshu.com/p/bad444ecc28b
声明 | 本文是 xiaoyanger 原创,已获授权发布, 未经原作者允许请勿转载
分析
手机京东 app 首页的京东快报有一个无限轮播的公告栏,先看效果:
公告内容大概每 3s 从中间向上滑出,同时下一条内容从底部向上滑动进入。整个过程还伴随有内容的渐变消失。
开始想这样的效果可以通过自绘控件来实现,后面再想想采用 ViewFlipper 来实现更为简单。
看看 ViewFlipper 类官方注释:
Simple {@link ViewAnimator} that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.
大概意思就是 ViewFlipper 是一个容器,能够将添加在里面的两个或更多子 View 动画的切换,在一个时间点只有一个 child 展示出来。并且可以自动的在每隔一个时间段切换到一个child。
要实现京东快报的切换效果,我们只需要将需要根据轮播的公告内容设置到 TextView 并添加到 ViewFlipper,同时设置他们之间的切换动画就可以了。
自定义 NoticeView
为了方便在项目中直接使用,我们将其自定义为一个继承自 ViewFlipper 的控件 NoticeView。
公告内容进入动画 notice_in.xml
公告内容滑出动画 notice_out.xml
在 Activity 中使用
最终效果
最终效果(布局代码就不贴了,比较简单)
源码:https://github.com/xiaoyanger0825/NoticeView
关键词:code小生
长按识别二维码关注!