android ViewFlipper实现跑马灯

ViewFlipper实现跑马灯

实现跑马灯效果很简单，直接设置Textview的属性android:ellipsize="marquee" 就行了，然后主要焦点的抢占问题就行了，但这里是横向的跑马灯。
ViewFlipper可以实现竖直方法的跑马灯效果

介绍

ViewFlipper可以理解成提供多个视图直接之前切换的容器。是继承了FrameLayout的容器布局，所以是可以调用addView方法去添加子视图的，然后设置子视图进入退出动画，就能达到竖直跑马灯的效果了。
ViewFlipper提供了5个自定义属性去设置相应的效果的：

1. animateFirstView
   定义是否在首次显示ViewFlipper时为当前View设置动画。默认为flase。就是第一次显示要动画嘛。
2. flipInterval
   定义每次视图展示时间间隔。就是每个视图显示的时间，到点了就切换下一个了，默认3秒。
3. autoStart
   定义是否在准备就绪后自动开启跑马灯。默认为false。开启后，会在onAttachedToWindow回调方法开启轮播。
4. inAnimation
   定义子视图进入动画。默认没有。
5. outAnimation
   定义子视图退出动画。默认没有。

代码

package com.hujin.commonui.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;
import android.widget.ViewFlipper;


import com.hujin.commonui.R;

import java.util.List;

public class CarouselFlipperView<T> extends ViewFlipper {
    private Context mContext;
    //设置数据的bean
    private List<T> mDataList;

    public CarouselFlipperView(Context context) {
        super(context);
    }

    public CarouselFlipperView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
        mContext = context;
        // 设置enter和leave动画
        setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.carousel_notice_in));
        setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.carousel_notice_out));
    }

    public  CarouselFlipperView setInAnim(int resId) {
        if(resId == 0){
            return this;
        }

        super.setInAnimation(AnimationUtils.loadAnimation(mContext, resId));
        return this;
    }


    public  CarouselFlipperView setOutAnim(int resId) {
        if(resId == 0){
            return this;
        }
        super.setOutAnimation(AnimationUtils.loadAnimation(mContext, resId));
        return this;
    }

    public CarouselFlipperView setTimes(int times) {
        setFlipInterval(times);
        return this;
    }

    /**
     * 添加需要轮播展示文案
     */
    public CarouselFlipperView addNotice(List<T> notices,int layoutID,ItemClickCallBackInterface callBackInterface) {
        if(layoutID == 0 || !(notices!=null && notices.size() > 0) || callBackInterface == null){
            throw new RuntimeException("CarouselFlipperView: 布局未设置或者数据为空 为设置回调");
        }
        this.itemClickCallBackInterface  = callBackInterface;
        mDataList = notices;
        removeAllViews();
        for (int i = 0; i < mDataList.size(); i++) {
            View item = LayoutInflater.from(mContext).inflate(layoutID, null);
            if (itemClickCallBackInterface != null && item != null) {
                itemClickCallBackInterface.onViewInflater(item,i,notices.get(i));
            }
            item.setTag(i);
            addView(item);
            int finalI = i;
            item.setOnClickListener(view -> {
                if (itemClickCallBackInterface != null) {
                    itemClickCallBackInterface.onItemClick(notices.get(finalI));
                }
            });
        }
        return this;
    }

    public void start() {
        if (mDataList != null && mDataList.size() > 1) {
            CarouselFlipperView.this.startFlipping();
        }
    }

    public void stop() {
        if (mDataList != null && mDataList.size() > 1) {
            CarouselFlipperView.this.stopFlipping();
        }
    }

    private ItemClickCallBackInterface itemClickCallBackInterface;

    public interface ItemClickCallBackInterface<T> {
        void  onViewInflater(View view,int pos,T t);

        void onItemClick(T t);
    }

    public CarouselFlipperView setItemClickCallBack(ItemClickCallBackInterface itemClickCallBackInterface) {
        this.itemClickCallBackInterface = itemClickCallBackInterface;
        return this;
    }
}

动画代码：
carousel_notice_in：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="600"
        android:fromXDelta="0%p"
        android:fromYDelta="100%p"
        android:toXDelta="0%p"
        android:toYDelta="0%p" />
</set>

carousel_notice_out：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="600"
        android:fromXDelta="0%p"
        android:fromYDelta="100%p"
        android:toXDelta="0%p"
        android:toYDelta="0%p" />
</set>

调用：

    private void initViewFlipper() {
        ArrayList<WanHomeBannerResponse> banner = (ArrayList<WanHomeBannerResponse>) CacheDoubleUtils.getInstance().getSerializable("banner");
        cfvSeacher
                .addNotice(banner, R.layout.item_flipper_searcher, new CarouselFlipperView.ItemClickCallBackInterface<WanHomeBannerResponse>() {

                    @Override
                    public void onViewInflater(View view, int pos, WanHomeBannerResponse wanHomeBannerResponse) {
                        ((TextView) view.findViewById(R.id.tv_item_searcher)).setText(wanHomeBannerResponse.getTitle());
                    }

                    @Override
                    public void onItemClick(WanHomeBannerResponse wanHomeBannerResponse) {

                    }
                })
                .setInAnim(R.anim.carousel_notice_in)
                .setOutAnim(R.anim.carousel_notice_out)                .start();
    }

效果