前言
在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<T> {
private List<View> mViewList;
private List<T> mDataList;
private DataObserver<T> mObserver;
public List<View> getChildViews() {
return mViewList;
}
public void setData(List<T> 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<View> 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，会长期维护，如有不足之处或建议还望指正，相互学习，相互进步~
网友评论