Android如何实现轮播效果:ViewFlipper 和 ViewAnimator

前言

现在的app中基本上都有轮播的需求,比如广告banner、最新消息tips等等。

其中我们熟悉的顶部广告一般左右轮播,这种情况大部分通过ViewPager实现。而那种上下轮播的消息tips(一般是条状)则可以使用ViewFlipper实现。

说到ViewFlipper,就不得不先说ViewAnimator,它是ViewFlipper的父类,ViewFlipper的功能就是在它基础上扩展出来的。

ViewAnimator

ViewAnimator继承FrameLayout,所以它的子View都是堆叠的。它的主要作用就是可以切换这些子view,且切换时有动画过渡。

我们可以直接在xml中给它添加子view,也可以通过addView系列函数动态添加子view。因为ViewAnimator重写了最终的addView函数。

然后可以调用showNextshowPrevious来切换下一个或上一个子view。

还可以使用setInAnimationsetOutAnimation设置切换动画。

可以看到这些就满足了我们轮播的基本需求:切换+动画。

ViewAnimator有几个子类:TextSwitcher,ImageSwitcher,ViewSwitcher,ViewFlipper。

通过源码可以知道TextSwitcher,ImageSwitcher其实就是严格限定子view是TextView和ImageView,同时提供更方便的函数来处理text或image。

而ViewSwitcher限制子view个数不能超过2个,所以它只是两个view来回切换。

而ViewFlipper就是本文的主角,它实现来定时切换功能。

ViewFlipper

ViewFlipper在ViewAnimator的基础上实现来定时切换的功能,我们可以设置切换时间。同时也支持开启自动切换。

这样就正好用来实现我们的上下轮播功能。

使用ViewFlipper切换时默认是瞬时的,但是因为它继承ViewAnimator,所以可以添加过渡动画,通过两个函数即可:

复制代码
flipper.setInAnimation(mContext, R.anim.in_bottom);
flipper.setOutAnimation(mContext, R.anim.out_top);

in_bottom是从底部飞入:

复制代码
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300">
    <translate
        android:fromYDelta="100%p"
        android:toYDelta="0" />
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

out_top是从顶部飞出:

复制代码
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300">
    <translate
        android:fromYDelta="0"
        android:toYDelta="-100%p" />
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

这样就实现了轮播动画。

但是ViewFlipper或ViewAnimator没有任何关于切换的监听器,所以我们无法监听切换。有一个巧妙的方法可以简单的监听切换,就是在设置了Animation的前提下,通过监听动画来实现:

复制代码
flipper.getInAnimation().setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
            //do something
        }

        @Override
        public void onAnimationEnd(Animation animation) {

        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });

注意:上面代码必须设置了setInAnimation,否则会null指针异常。

Android 学习笔录

Android 性能优化篇:https://qr18.cn/FVlo89
Android Framework底层原理篇:https://qr18.cn/AQpN4J
Android 车载篇:https://qr18.cn/F05ZCM
Android 逆向安全学习笔记:https://qr18.cn/CQ5TcL
Android 音视频篇:https://qr18.cn/Ei3VPD
Jetpack全家桶篇(内含Compose):https://qr18.cn/A0gajp
OkHttp 源码解析笔记:https://qr18.cn/Cw0pBD
Kotlin 篇:https://qr18.cn/CdjtAF
Gradle 篇:https://qr18.cn/DzrmMB
Flutter 篇:https://qr18.cn/DIvKma
Android 八大知识体:https://qr18.cn/CyxarU
Android 核心笔记:https://qr21.cn/CaZQLo
Android 往年面试题锦:https://qr18.cn/CKV8OZ
2023年最新Android 面试题集:https://qr18.cn/CgxrRy
Android 车载开发岗位面试习题:https://qr18.cn/FTlyCJ
音视频面试题锦:https://qr18.cn/AcV6Ap

相关推荐
孤鸿玉几秒前
[Flutter小试牛刀] 低配版signals,添加多层监听链
android·前端·响应式设计
雨和卡布奇诺2 分钟前
LiveData源码浅析
android
淡蓝色_justin4 分钟前
Hilt-plus 简介
android·android jetpack
app1e23425 分钟前
ctfshow web入门 命令执行(29-77)
android·前端
恋猫de小郭3 小时前
Flutter 在 Dart 3.8 开始支持 Null-Aware Elements 语法,自动识别集合里的空元素
android·前端·flutter
fatiaozhang95273 小时前
咪咕MG101_晨星MSO9380芯片_安卓5.1.1_免拆卡刷固件包
android·电视盒子·av1·机顶盒rom·魔百盒刷机
_小马快跑_4 小时前
玩转 ImageView.ScaleType:图片的缩放与裁剪技巧
android
Lei活在当下4 小时前
【现代 Android APP 架构】02. UI 层的职责与具体实现
android·架构·android jetpack
_一条咸鱼_4 小时前
揭秘 Android 高级工程师面试秘籍:从源码到实战全方位剖析
android·面试·android jetpack