教你写一个弹幕库，确定不了解一下？

最近刚写完了一个弹幕库 Muti-Barrage ，它具有如下功能：

• 自定义多视图（弹幕必备）
• 碰撞检测
• 检测触摸事件
• 设置发送间隔
• 设置速度生成区间
• 循环播放

花费了不少闲暇的时间，故打算在此总结一下。老规矩，在写下文之前，我们先看一下效果：

单视图弹幕应用

多视图弹幕例子

目录

一、会遇到的坑

• 多视图如何处理
• 如何防碰撞
• 触摸事件如何检测

二、总体一览

我们先看一下弹幕的产生过程：

整体并不难， BarrageAdapter 负责管理数据， BarrageView 负责管理视图，数据被加入 BarrageAdapter 后，单线程的线程池控制子View的产生速度，定时发送消息给 BarrageAdapterHandler ，生成弹幕的子View之后经过一些列操作添加进 BarrageView 中

三、代码细节

这里，我不会把整段代码都贴上，而是根据弹幕产生过程逐步展开。

1.数据定义

所有弹幕的数据都必须实现 DataSource 接口， getType() 方法可以帮我们确定视图的布局。

public interface DataSource {
    // 返回当前的类型
    int getType();
    // 返回生成的时间
    long getShowTime();
}
复制代码

2.定义 IBarrageView 接口

BarrageView 需要实现的方法，让 BarrageAdapter 调用

public interface IBarrageView {
    // 添加视图
    void addBarrageItem(View view);
    // 获取是否存在缓存
    View getCacheView(int type);
    // 发送View间隔
    long getInterval();
    // 循环的次数
    int getRepeat();
}
复制代码

3.数据添加

为了约束数据类型，我们需要在 BarrageAdapter 使用范型，也就是

public abstract class BarrageAdapter<T extends DataSource>
        implements View.OnClickListener {
}
复制代码

下面我们从数据的添加入口讲起：

/**
     * 添加一组数据
     *
     * @param dataList 一组数据
     */
  public void addList(List<T> dataList) {
        if (dataList == null || dataList.size() == 0)
            return;
        int len = dataList.size();
        mDataList.addAll(dataList);
        mService.submit(new DelayRunnable(len));
   }
复制代码

mDataList 是我们存放数据的 List ，数据添加好之后，线程池会执行我们的任务 DelayRunnable ， DelayRunnable 是什么呢？看代码：

/**
     * 延迟的Runnable
     */
    public class DelayRunnable implements Runnable {

        private int len;

        DelayRunnable(int len) {
            this.len = len;
        }

        @Override
        public void run() {
            if (repeat != -1 && repeat > 0) {
                for (int j = 0; j < repeat; j++) {
                    sendMsg(len);
                }
            } else if (repeat == -1) {
                while (!isDestroy.get()) {
                    sendMsg(len);
                }
            }
        }
    }

    private void sendMsg(int len) {
        for (int i = 0; i < len; i++) {
            Message msg = new Message();
            msg.what = MSG_CREATE_VIEW;
            msg.obj = i;
            mHandler.sendMessage(msg);
            try {
                Thread.sleep(interval * 20);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }
复制代码

可以看到， DelayRunnable 实现了 Runnable 接口， run() 方法主要控制弹幕的循环次数， sendMsg(int len) 中不断发送消息给 mHandler ，其中循环次数 repeat 和发送消息的间隔 interval 都是 IBarrageView 提供的，而 mHandler 就是生产过程中有的 BarrageAdapterHandler ，主要负责子View的生成。

4.子View的生成

我们将 BarrageAdapterHandler 设置成静态类。从数据变成 BarrageView 子View的过程直接在下面的代码体现了出来：

public static class BarrageAdapterHandler<T extends DataSource> extends Handler {
        private WeakReference<BarrageAdapter> adapterReference;

        BarrageAdapterHandler(Looper looper, BarrageAdapter adapter) {
            super(looper);
            adapterReference = new WeakReference<>(adapter);
        }

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);

            switch (msg.what) {
                case MSG_CREATE_VIEW: {
                    int pos = (int) msg.obj;
                    T data = (T) adapterReference.get().mDataList.get(pos);
                    if (data == null)
                        break;
                    if (adapterReference.get().barrageView == null)
                        throw new RuntimeException("please set barrageView,barrageView can't be null");
                    // get from cache
                    View cacheView = adapterReference.get().barrageView.getCacheView(data.getType());
                    adapterReference.get().createItemView(data, cacheView);
                }
            }
        }
    }
复制代码

先获取 msg.obj 中的序号，从而从 mDataList 中取出具体数据，接着从 IBarrageView 中的 getCacheView(data.getType()) 获取缓存视图，我们先抛开 BarrageAdapter ，从 BarrageView 中继续挖掘，在 BarrageView 中，我们利用 SparseArray<LinkedList<View>> 进行缓存弹幕子View的管理，根据不同的 DataSource 中的 type ，将缓存弹幕子View存进不同的 LinkedList<View> 中，我们需要缓存弹幕子View的时候直接从 SparseArray<LinkedList<View>> 里面取出一个子View。现在可以回到 BarrageAdapter 了，我们来看 createItemView(data, cacheView) 方法，这里就很像我们平时对 RecyclerView 中 RecyclerAdapter 的封装了：

/**
     * 创建子视图的过程
     *
     * @param cacheView 缓存视图
     */
    public void createItemView(T data, View cacheView) {
        // 1.获取子布局
        // 2. 创建ViewHolder
        // 3. 绑定ViewHolder
        // 4. 返回视图
        int layoutType = getItemLayout(data);
        BarrageViewHolder<T> holder = null;
        if (cacheView != null) {
            holder = (BarrageViewHolder<T>) cacheView.getTag(R.id.barrage_view_holder);
        }
        if (null == holder) {
            holder = createViewHolder(mContext, layoutType);
            mTypeList.add(data.getType());
        }
        bindViewHolder(holder, data);
        if (barrageView != null)
            barrageView.addBarrageItem(holder.getItemView());
    }

    /**
     * 创建ViewHolder
     *
     * @param type 布局类型
     * @return ViewHolder
     */
    private BarrageViewHolder<T> createViewHolder(Context context, int type) {
        View root = LayoutInflater.from(context).inflate(type, null);
        BarrageViewHolder<T> holder = onCreateViewHolder(root, type);

        // 设置点击事件
        root.setTag(R.id.barrage_view_holder, holder);
        root.setOnClickListener(this);
        return holder;
    }

    public abstract static class BarrageViewHolder<T> {
        public T mData;
        private View itemView;

        public BarrageViewHolder(View itemView) {
            this.itemView = itemView;
        }

        public View getItemView() {
            return itemView;
        }

        void bind(T data) {
            mData = data;
            onBind(data);
        }

        protected abstract void onBind(T data);
    }
复制代码

在子View的生成过程中:

• 先获取子布局文件， getItemLayout(T t) 是抽象方法，主要根据不同的数据类型确定不同的布局文件。
• 接着判断缓存View cacheView 是否为空，不为空则利用 getTag(R.id.barrage_view_holder) 方法获取缓存View中绑定的 BarrageViewHolder 。
• holder 即 BarrageViewHolder 为空的情况下就重新创建弹幕的子View，这里我们可以从 createViewHolder(mContext, layoutType) 中得处结论，子View就是在这里根据不同的布局文件创建的， Tag 和弹幕的触摸事件的设置也是在这里设置的，这也就解决了上面的两个问题， 如何设置多视图 和 触摸事件的检测 。
• bindViewHolder(holder, data); 将 holder 和具体的数据进行绑定。最终调用 BarrageViewHolder 中的抽象 onBind(T data) 方法，从而进行UI的设置。
• 最后， IBarrageView 将子弹幕子View添加进去。

5. BarrageView 对子View的处理

子View添加来之后， BarrageView 会对子View进行高度和宽度的测量，测量完之后进行最佳弹幕航道的选择和速度的设置，最后进行属性动画的创建，我们逐个分析。

宽度和高度的设置

@Override
    public void addBarrageItem(final View view) {
        // 获取高度和宽度
        int w = View.MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        int h = View.MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        view.measure(w, h);
        final int itemWidth = view.getMeasuredWidth();
        final int itemHeight = view.getMeasuredHeight();

        if (singleLineHeight == -1) {
            // 如果没有设置高度 启用添加的第一个Item作为行数
            // 建议使用最小的Item的高度
            singleLineHeight = itemHeight;
            initBarrageListAndSpeedArray();
        }
        // 先省略后面代码
    }

    /**
     * 初始化一个空的弹幕列表和速度列表
     */
    private void initBarrageListAndSpeedArray() {
        barrageDistance = DeviceUtils.dp2px(getContext(), 12);
        barrageLines = height / (singleLineHeight + barrageDistance);
        for (int i = 0; i < barrageLines; i++) {
            barrageList.add(i, null);
        }
        speedArray = new int[barrageLines];
        for (int i = 0; i < barrageLines; i++) {
            speedArray[i] = 0;
        }
    }
复制代码

在上面代码中，我们获取了子View的高度和宽度，如果是第一次添加子View，同时用户也没有对弹幕的高度进行设置，这个时候只能由 BarrageView 自身进行 barrageList 和 speedArray 进行初始化， barrageList 是 List<View> ，用来管理每个弹幕航道最新弹幕的子View， speedArray 是 int[] ，则用于管理最新弹幕子View的速度，他们可以用来干嘛，这里先卖个关子。

获取最佳弹幕航道

获取最佳航道的代码比较多，这里就不写了，首先会根据弹幕的布局（可以将弹幕放在顶部、中间、底部和全屏）进行行数的过滤，接着从 barrageList 获取每一行的子View从而获取 getX() ，最终得出哪一行剩余的空间大，你可能会有疑问，当前航道没有子View呢？这种情况就简单了，直接返回该航道啊。

获取速度

/**
     * 获取速度
     * 
     * @param line 最佳弹道
     * @param itemWidth 子View的宽度
     * @return 速度
     */
    private int getSpeed(int line, int itemWidth) {
        if (model == MODEL_RANDOM) {
            return speed - speedWaveValue + random.nextInt(2 * speedWaveValue);
        } else {
            int lastSpeed = speedArray[line];
            View view = barrageList.get(line);
            int curSpeed;
            if (view == null) {
                curSpeed = speed - speedWaveValue + random.nextInt(2 * speedWaveValue);
                Log.e(TAG, "View:null" + ",line:" + line + ",speed:" + curSpeed);
                // 如果当前为空 随机生成一个滑动时间
                return curSpeed;
            }
            int slideLength = (int) (width - view.getX());
            if (view.getWidth() > slideLength) {
                // 数据密集的时候跟上面的时间间隔相同
                Log.e(TAG, "View:------" + ",line:" + line + ",speed:" + lastSpeed);
                return lastSpeed;
            }
            // 得到上个View剩下的滑动时间
            int lastLeavedSlidingTime = (int) ((view.getX() + view.getWidth() ) / (float) lastSpeed)+1;
            //Log.e(TAG,"lastLeavedSlidingTime:"+lastLeavedSlidingTime+",lastLeavedSlidingTime:"+);
            int fastestSpeed = (width) / lastLeavedSlidingTime;
            fastestSpeed = Math.min(fastestSpeed, speed + speedWaveValue);
            if (fastestSpeed <= speed - speedWaveValue) {
                curSpeed = speed - speedWaveValue;
            } else
                curSpeed = speed - speedWaveValue + random.nextInt(fastestSpeed - (speed - speedWaveValue));
            Log.e(TAG, "view:" + view.getX() + ",lastLeavedSlidingTime:" + lastLeavedSlidingTime + ",line:" + line + ",speed:" + curSpeed);
            return curSpeed;
        }
    }
复制代码

speed 和 speedWaveValue 分别是速度初始值和速度波动值， [speed-speedWaveValue,speed+speedWaveValue] 代表弹幕的速度区间。这里 BarrageView 会先判断当前弹幕的模式，如果是 MODEL_RANDOM 模式，我们直接随机生成弹幕速度就好了，不过需要在速度区间中生成；如果是防碰撞模式，我们需要：

• 通过我们上面提到的 barrageList 和 speedArray 分别获取之前该航道前一个子View和其速度。
• 如果前子View为空，跟随机模式生成速度的规则一样。
• 如果前子View不为空，我们需要获取前子View已经滑动的距离，并且根据它的速度计算剩下滑动的时间，用剩下滑动时间下我们计算当前子View在不碰撞的前提下能够设置最快的速度，计算好之后再在用户设置的速度区间和不超过最快速度的前提下随机生成一个速度。

当然，这并不是绝对的，如果弹幕生成间隔设置不理想的情况下，较短的时间内会产生大量的子View，肯定会发生碰撞的，这个时候我们就直接设置前一个子View的速度。

弹幕滑动

这个我们利用属性动画完成即可：

@Override
    public void addBarrageItem(final View view) {
        // 省略前面代码
        // 生成动画
        final ValueAnimator valueAnimator = ValueAnimator.ofInt(width, -itemWidth);

        // 获取最佳的行数
        final int line = getBestLine(itemHeight);
        int curSpeed = getSpeed(line, itemWidth);
        long duration = (int)((float)(width+itemWidth)/(float)curSpeed+1) * 1000;
        Log.i(TAG,"duration:"+duration);
        valueAnimator.setDuration(duration);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                //Log.e(TAG, "value:" + value);
                if(cancel){
                    valueAnimator.cancel();
                    BarrageView.this.removeView(view);
                }
                view.layout(value, line * (singleLineHeight + barrageDistance) + barrageDistance / 2, value + itemWidth, line * (singleLineHeight + barrageDistance) + barrageDistance / 2 + itemHeight);
            }
        });
        valueAnimator.addListener(new SimpleAnimationListener() {

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);

                BarrageView.this.removeView(view);
                BarrageAdapter.BarrageViewHolder holder = (BarrageAdapter.BarrageViewHolder) view.getTag(R.id.barrage_view_holder);
                DataSource d = (DataSource) holder.mData;
                int type = d.getType();
                addViewToCaches(type, view);
                // 通知内存添加缓存
                mHandler.sendEmptyMessage(0);
            }
        });
        addView(view);
        speedArray[line] = curSpeed;
        // 因为使用缓存View，必须重置位置
        view.layout(width, line * (singleLineHeight + barrageDistance) + barrageDistance / 2, width + itemWidth, line * (singleLineHeight + barrageDistance) + barrageDistance / 2 + itemHeight);
        barrageList.set(line, view);
        valueAnimator.start();
    }
复制代码

这里就比较简单了，当前速度获取以后，直接利用当前屏幕宽度加子View宽度除以当前速度计算弹幕子View执行属性动画的时间。这里需要注意的是：

• 动画执行结束或者 BarrageView 销毁的时候，需要将当前子View从 BarrageView 中移除。
• 动画执行结束的时候，当前View被移除后会被添加到缓存，之后执行 mHandler.sendEmptyMessage(0) ，在 mHandler 中，如果缓存View过多的时候就会清理缓存，这里的细节不会过多描述，具体的可以看代码。

到这儿，我们 BarrageView 对子View的处理就结束了～