How to implement carousel effect in Android: ViewFlipper and ViewAnimator

Preface

There is basically a need for carousels in current apps, such as advertising banners, latest news tips, etc.

Among them, the top ads we are familiar with generally rotate left and right, and most of this is achieved through ViewPager. The message tips that rotate up and down (usually in strip form) can be implemented using ViewFlipper.

Speaking of ViewFlipper, we have to talk about ViewAnimator first, which is the parent class of ViewFlipper, and the functions of ViewFlipper are extended on its basis.

ViewAnimator

ViewAnimator inherits FrameLayout, so its sub-Views are stacked. Its main function is to switch these subviews, and there will be animated transitions when switching.

We can add subviews to it directly in xml, or dynamically add subviews through the addView series functions. Because ViewAnimator rewrites the final addView function.

Then you can call showNextand showPreviousto switch to the next or previous subview.

You can also use setInAnimationand setOutAnimationset switching animations.

You can see that these meet the basic needs of our carousel: switching + animation.

ViewAnimator has several subclasses: TextSwitcher, ImageSwitcher, ViewSwitcher, ViewFlipper.

You can know TextSwitcher through the source code. ImageSwitcher actually strictly limits the subviews to TextView and ImageView, and at the same time provides more convenient functions to process text or image.

ViewSwitcher limits the number of subviews to no more than 2, so it just switches back and forth between two views.

ViewFlipper is the protagonist of this article, it implements the scheduled switching function.

ViewFlipper

ViewFlipper implements the function of scheduled switching based on ViewAnimator. We can set the switching time. It also supports turning on automatic switching.

This is just used to implement our up and down carousel function.

The default switching when using ViewFlipper is instantaneous, but because it inherits ViewAnimator, you can add transition animation through two functions:

flipper.setInAnimation(mContext, R.anim.in_bottom);
flipper.setOutAnimation(mContext, R.anim.out_top);

in_bottom is flying in from the 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 is flying out from the 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>

In this way, the carousel animation is implemented.

But ViewFlipper or ViewAnimator don't have any listeners for switching, so we can't listen for switching. There is a clever way to simply monitor switching, which is to achieve it by monitoring the animation under the premise of setting 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) {

        }
    });

Note: The above code must set setInAnimation, otherwise a null pointer exception will occur.

Android study notes

Android performance optimization article: Android Framework underlying principles article: Android vehicle article: Android reverse security study notes: Android audio and video article: Jetpack family bucket article (including Compose): OkHttp source code analysis notes: Kotlin article: Gradle article: Flutter article: Eight knowledge bodies of Android: Android core notes: Android interview questions from previous years: The latest Android interview questions in 2023: Android vehicle development position interview exercises: Audio and video interview questions:https://qr18.cn/FVlo89
https://qr18.cn/AQpN4J
https://qr18.cn/F05ZCM
https://qr18.cn/CQ5TcL
https://qr18.cn/Ei3VPD
https://qr18.cn/A0gajp
https://qr18.cn/Cw0pBD
https://qr18.cn/CdjtAF
https://qr18.cn/DzrmMB
https://qr18.cn/DIvKma
https://qr18.cn/CyxarU
https://qr21.cn/CaZQLo
https://qr18.cn/CKV8OZ
https://qr18.cn/CgxrRy
https://qr18.cn/FTlyCJ
https://qr18.cn/AcV6Ap