EasyMarquee——一个基于ViewFlipper的滚动轮播库

前言

在Android中经常会遇到多条广播或者多条消息轮播的业务场景，一般的交互是在有限的空间里面自动上下滚动或者左右滚动，如下：

轮播效果图.png

有多种方式可以实现这种效果，本文基于Android的一个视图切换控件——ViewFlipper来实现，ViewFlipper顾名思义就是视图的翻转，有点类似于ViewPager，但又有点区别，Google的解释如下：

可以看到，ViewFlipper 本质也是一个View，继承于 ViewAnimator，ViewAnimator 是 FrameLayout 的一个子类，用来做View之间的切换。它是一个变换控件的元素，帮助我们很方便地在View之间进行变换。

因此基于 ViewFlipper 实现合适不过，在 ViewFlipper 的基础上封装切换的动画，并且基于适配器的形式来填充 ViewFlipper 的数据（毕竟是个Androider都能习惯RecyclerView的使用姿势），正好巩固一下设计模式，温故而知新~
 

效果预览

效果图.gif

 

实现思路

由于 ViewFlipper 本身是采用 addView 的方式，将子View一个个填充进去，这样的话每次都要对每个子View去做各自的填充操作，不方便统一管理和刷新，于是自定义了一个Adapter层级，作为 ViewFlipper 与外界对接数据的中间者，就类似于 RecyclerView 那样 onCreateView 创建子视图，onBindView 绑定子视图数据，使用方只需要继承于Adapter，重写方法返回子视图布局。然后在 ViewFlipper 中持有Adapter实例，通过这个实例获取到使用方传过来的View，再添加到 ViewFlipper 中即可：

Adapter作为桥接角色

具体步骤如下：

1.定义抽象Adapter，封装绑定数据逻辑
2.自定义ViewFlipper，通过Adapter获取数据
3.触发滚动和停止滚动
4.自定义滚动动画
5.设置滚动监听

 

实现步骤

1.定义抽象Adapter，封装绑定数据逻辑

public abstract class MarqueeAdapter {

    private List mViewList;
    private List mDataList;
    private DataObserver mObserver;

    public List getChildViews() {
        return mViewList;
    }

    public void setData(List data) {
        mDataList.clear();
        mDataList.addAll(data);
        for (int index = 0; index < mDataList.size(); index++) {
            View itemView;
            if (index < mViewList.size()) {
                itemView = mViewList.get(index);
            } else {
                itemView = onCreateView(index, data.get(index));
                mViewList.add(itemView);
            }
            onBindView(index, itemView, mDataList.get(index));
        }
        notifyDataSetChanged();
    }

    public void notifyDataSetChanged() {
        if (mObserver != null) {
            mObserver.onDataChange();
        }
    }

    public abstract View onCreateView(int position, T data);

    public abstract void onBindView(int position, View view, T data);

}

由于篇幅有限，此处只抽取出关键代码，由于要给具体调用方继承，所以这里定义为抽象类，抽象出两个方法：

public abstract View onCreateView(int position, T data)： 返回类型为View，具体调用方通过重写该方法返回自定义布局
public abstract void onBindView(int position, View view, T data)： 为视图填充数据时调用，具体调用方通过重写该方法，将具体的数据绘制在子视图的具体控件上，实现每个子视图各自的业务逻辑

这里定义了一个setData 方法，外界通过这个方法将数据传进来，遍历数据，如果当前下标的子视图还没创建，就调用 onCreateView 新建一个子视图，如果当前下标已有视图，则不再重复创建，然后调用 onBindView 通知外界填充子视图数据。
 

2.自定义ViewFlipper，通过Adapter获取数据

public class EasyMarqueeView extends ViewFlipper {

    private MarqueeAdapter marqueeAdapter;

    @SuppressWarnings("rawtypes")
    private DataObserver dataObserver = new DataObserver() {
        @Override
        public void onDataChange() {
            //adapter中setData的时候会回调这里
            notifyChange();
        }
    };

    //.....此处忽略部分代码

    public void setMarqueeAdapter(MarqueeAdapter adapter) {
        marqueeAdapter = adapter;
        marqueeAdapter.registerDataSetObserver(dataObserver);
    }

    private void notifyChange() {
        List children = marqueeAdapter.getChildViews();
        if (children != null && children.size() > 0) {
            removeAllViews();
            for (View view: children) {
                addView(view);
            }
        }
    }
}

继承于 ViewFlipper，并且提供 setMarqueeAdapter(MarqueeAdapter adapter) 方法，获取外界传进来的具体的adapter子类，同时设置注册adapter的监听，等到外界设置新数据的时候，由adapter触发回调 onDataChange() ，此刻Adapter里面的子视图已经创建好了，因此可以开始遍历获取子视图并 addView 了。
 

3.触发滚动和停止滚动

上面两步已经准备好了子视图的布局和数据，接着就可以开始滚动了，由于是继承 ViewFlipper，可以直接调用 ViewFlipper 的 startFlipping 触发滚动：

public void startFlip() {
    if (!isFlipping()) {
        startFlipping();
    }
}

相应的提供停止滚动的方法，在需要退出页面销毁或者主动停止的时候调用：

public void stopFlip() {
    if (isFlipping()) {
        stopFlipping();
    }
}

 

4.自定义滚动动画

ViewFlipper 本身已经提供了设置进场动画和出场动画的方法：

public void setInAnimation(Animation inAnimation)
public void setOutAnimation(Animation outAnimation)

可以看到都是基于 Animation ，我们可以通过定义anim类型的xml配置生成 Animation也可以直接在代码里初始化构造 Animation：

Animation enterAnimation = AnimationUtils.loadAnimation(getContext(), R.anim.xxx);
Animation exitAnimation = AnimationUtils.loadAnimation(getContext(), R.anim.xxx);
enterAnimation.setDuration(mDuration);
exitAnimation.setDuration(mDuration);
setInAnimation(enterAnimation);
setOutAnimation(exitAnimation);

当然，由于我们是继承于 ViewFlipper， 所以也可以由外界来自定义anim对象设置给 ViewFlipper。

 

5.设置滚动监听

ViewFlipper 本身是没有滚动监听方法的，但我们可以通过每次滚动时退场动画的结束监听，来代表每一轮的滚动，利用 Animation 对象提供的 setAnimationListener 方法：

Animation outAnimation = getOutAnimation();
if (outAnimation != null) {
    outAnimation.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {}

        @Override
        public void onAnimationEnd(Animation animation) {
            if (mListener != null) {
                mListener.onMarquee(getCurrentItem());
            }
        }

        @Override
        public void onAnimationRepeat(Animation animation) {}
    });
}

//滚动监听接口
public interface MarqueeListener {
    void onMarquee(int position);
}

 

结语

本文所涉及的所有代码均已上传到GitHub，传送门：EasyMarquee
取名为 EasyMarquee，简而言之就是为了更方便更灵活地定义滚动轮播效果，目前支持的属性如下：

1）基于ViewFlipper实现，继承ViewFlipper的所有方法
2）支持设置滚动方向和滚动时长
3）支持自定义每个滚动项的样式
4）支持动态更新滚动数据
5）支持添加滚动监听
6）支持AndroidX

同时本库也提供了其它的一些配置，例如 getCurrentItem、 setFlipInterval 等，继承了 ViewFlipper 的所有方法，滚动轮播效果已经基本满足需求，后续会再针对视图的复用和其它拓展属性继续更新，提升组件的性能，欢迎issue和star~
 

欢迎关注 Android小Y 的，更多Android精选自定义View

『Android自定义View实战』实现一个小清新的弹出式圆环菜单
『Android自定义View实战』玩转PathMeasure之自定义支付结果动画
『Android自定义View实战』自定义弧形旋转菜单栏——卫星菜单
『Android自定义View实战』Android自定义带侧滑菜单的二维表格控件

GitHub：GitHubZJY
简 书：Android小Y
在GitHub上建了一个炫酷自定义View的集合ZJYWidget，主要是平时实现的一些实用的自定义View源码及demo，会长期维护，如有不足之处或建议还望指正，相互学习，相互进步~