Android 自定义View（五）实现跑马灯垂直滚动效果

一、前言

最近一直巩固 Android 自定义 View 相关知识，以前都是阅读一些理论性的文章，很少抽时间自己去实现一个自定义 View，项目中遇到问题就上 github 上去找效果。其实自定义 View 涉及到很多内容，只有亲自动手完成几个案例，才能对相关知识点有深入了解。

本文是对上篇文章的一个补充，股票 APP 列表底部有一个实时更新交易的跑马灯效果，纵观市面上很多产品都应用到这个效果，决定自己动手实现一下。

二、开发准备工作

1、先看效果图

2、案例源码下载

GitHub下载地址

CSDN下载地址

3、案例应用知识点

1. ViewFlipper 控件基础知识
2. Android 动画基础知识
3. 自定义 View 基础知识
4. Activity 启动流程基础知识

三、ViewFlipper 介绍

ViewFlipper 是 Android 中的基础控件，可能在一般开发中很少有人用到，所以很多开发者感觉对这个控件很陌生，在控件圈里更远远没有 ViewPager 出名，但是 ViewFlipper 用法很简单，效果却很不错。

ViewFlipper 继承自 ViewAnimator，而 ViewAnimator 又是继承自 FrameLayout，而 FrameLayout 就是平时基本上只显示一个子视图的布局，由于 FrameLayout 下不好确定子视图的位置，所以很多情况下子视图之前存在相互遮挡，这样就造成了很多时候我们基本上只要求 FrameLayout 显示一个子视图，然后通过某些控制来实现切换。正好，ViewFlipper 帮我们实现了这个工作，我们需要做的就是，选择恰当的时机调用其恰当的方法即可实质上只是封装了一些 ViewAnimator 的方法来调用，真正执行操作的是 ViewAnimator。

ViewFlipper 相关属性介绍

方法	描述
isFlipping	判断 View 切换是否正在进行
setFilpInterval	设置 View 之间切换的时间间隔
startFlipping	开始 View 的切换，而且会循环进行
stopFlipping	停止 View 的切换
setOutAnimation	设置切换 View 的退出动画
setInAnimation	设置切换 View 的进入动画
showNext	显示 ViewFlipper 里的下一个 View
showPrevious	显示 ViewFlipper 里的上一个 View

四、代码实现

上面已经介绍了 ViewFlipper 控件基础知识，如果要实现跑马灯效果，建议自定义 ViewFlipper 实现自己的需求。本文使用自定义 ViewFlipper 的方式实现跑马灯垂直滚动效果。

1、自定义 ViewFlipper 属性

设置以下属性，建议使用自定义属性方式，便于后期修改和 XML 中使用。

/**
 * 是否单行显示
 */
private boolean isSingleLine;
/**
 * 轮播间隔
 */
private int interval = 3000;
/**
 * 动画时间
 */
private int animDuration = 1000;
/**
 * 一次性显示item数目
 */
private int itemCount = 1;

2、创建动画

• anim_marquee_in.xml 进入动画：
  • Y 轴位置从下面 100%移动到位置 0，动画持续 300 毫秒
  • 渐变透明度动画效果由 0.0 到 1.0，动画持续 500 毫秒

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromYDelta="100%p"
        android:toYDelta="0"/>
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>

• anim_marquee_out.xml 退出动画：

  • Y 轴位置从下面 0 移动到位置-100%，动画持续 400 毫秒
  • 渐变透明度动画效果由 1.0 到 0.0，动画持续 500 毫秒

<?xml version="1.0" encoding="utf-8"?>