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

时间:2021-7-21 作者:qvyue

前言

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

EasyMarquee——一个基于ViewFlipper的滚动轮播库
轮播效果图.png

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

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

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

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

效果预览

EasyMarquee——一个基于ViewFlipper的滚动轮播库
效果图.gif

 

实现思路

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

EasyMarquee——一个基于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 

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

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,可以直接调用 ViewFlipperstartFlipping 触发滚动:

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

同时本库也提供了其它的一些配置,例如 getCurrentItemsetFlipInterval 等,继承了 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,会长期维护,如有不足之处或建议还望指正,相互学习,相互进步~

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。