Android 自定义View——BarrageView实现弹幕功能

现在很多应用都有弹幕的功能，虽然本人没什么兴趣使用弹幕的功能，但是对如何实现这个弹幕功能还是有兴趣的。先上效果图。

原理

在ViewGroup上不定时地添加属性不相同的TextView执行不同的动画。

BarrageView的关键代码

BarrageView所需要的属性

 /**
     * 最大的移动速度
     */
    private int maxSpeed;
    /**
     * 最小的移动速度
     */
    private int minSpeed;
    /**
     * 最大的字体尺寸
     */
    private float maxTextSize;
    /**
     * 最小的字体尺寸
     */
    private float minTextSize;
    /**
     * 最大的时间间隔
     */
    private int maxInterval;
    /**
     * 最小的时间间隔
     */
    private int minInterval;
    /**
     * 用于随机设置字体颜色
     */
    private Random random = new Random();
    /**
     * 控制是否弹幕
     */
    private boolean barrageState = true;

为了更方便地使用控件，在attrs.xml中添加控件所需要的自定义属性

  <declare-styleable name="BarrageView">
        <attr name="maxSpeed" format="integer"/>
        <attr name="minSpeed" format="integer"/>
        <attr name="maxInterval" format="integer"/>
        <attr name="minInterval" format="integer"/>
        <attr name="maxTextSize" format="dimension"/>
        <attr name="minTextSize" format="dimension"/>
    </declare-styleable>

在构造函数中获取自定义属性的值

 TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.BarrageView, defStyleAttr, 0);
        minSpeed =a.getInt(R.styleable.BarrageView_minSpeed,7000);
        maxSpeed =a.getInt(R.styleable.BarrageView_maxSpeed,4000);
        maxTextSize = a.getDimension(R.styleable.BarrageView_maxTextSize, 30);
        minTextSize = a.getDimension(R.styleable.BarrageView_minTextSize, 10);
        maxInterval = a.getInteger(R.styleable.BarrageView_maxInterval, 2000);
        minInterval = a.getInteger(R.styleable.BarrageView_minInterval, 500);
        a.recycle();

在BarrageView中需要定义Handler来控制弹幕

 private static final int MESSAGE_SHOWITEM = 1;

    private Handler barrageHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (msg.what == 1) {
                if(barrageState) {
                    addBarrageItem();
                    //随机获取时间间隔
                    int interval = (int) (Math.random() * (maxInterval - minInterval) + minInterval);
                    sendEmptyMessageDelayed(MESSAGE_SHOWITEM, interval);
                }
            }
        }
    };

添加弹幕的方法

 /**
     * 添加弹幕
     */
    private void addBarrageItem() {
        final TextView textView = new TextView(getContext());
        int textSize = (int) (Math.random() * (maxTextSize - minTextSize) + minTextSize);
        textView.setTextSize(textSize);
        textView.setSingleLine(true);
        //随机设置字体颜色
        textView.setTextColor(0xff000000 | random.nextInt(0x00ffffff));
        textView.setText(barrageContents.get((int) (Math.random() * barrageContents.size())));
        //调用measure确保measuredHeight和measuredWidth能拿到值
        textView.measure(0, 0);
        int speed = (int) (Math.random() * (maxSpeed - minSpeed) + minSpeed);
        int topMargin = (int) (Math.random() * (this.getHeight() - textView.getMeasuredHeight()));
        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        params.topMargin = topMargin;
        this.addView(textView, params);
        TranslateAnimation anim = new TranslateAnimation(this.getWidth(), -textView.getMeasuredWidth(), 0, 0);
        anim.setDuration(speed);
        anim.setFillAfter(true);
        textView.startAnimation(anim);
        anim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                textView.clearAnimation();
                BarrageView.this.removeView(textView);
            }

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

    }

设置弹幕内容

  /**
     * 设置弹幕内容
     *
     * @param barrageContents 弹幕内容
     */
    public void setBarrageContents(List<String> barrageContents) {
        this.removeAllViews();//移除之前的弹幕
        barrageHandler.removeMessages(MESSAGE_SHOWITEM);///移除之前的消息

        this.barrageContents = barrageContents;
        barrageHandler.sendEmptyMessageDelayed(MESSAGE_SHOWITEM, 0);
    }

控件弹幕

/**
     * 开始弹幕
     */
    public void startBarraging(){
        barrageState = true;
        if(!barrageHandler.hasMessages(MESSAGE_SHOWITEM)){
            barrageHandler.sendEmptyMessage(MESSAGE_SHOWITEM);
        }
    }

    /**
     * 停止弹幕
     */
    public void stopBarraging(){
        barrageState = false;
        barrageHandler.removeMessages(MESSAGE_SHOWITEM);
    }

最后是布局代码示例

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.xiaoniu.barragedemo.BarrageView
        android:id="@+id/barrageView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="#b1b1b1"
        app:maxInterval="1000"
        app:minInterval="500"
        app:maxSpeed="3000"
        app:minSpeed="5000"
        app:maxTextSize="20sp"
        app:minTextSize="10sp"/>
</RelativeLayout>

————————————————————

源码地址