android-自定义弹幕layout的实现

以前工作中的代码，整理成一个自定义layout,写在这里，供各位大佬参考。

其中涉及到的主要困难/技术点包括：

　1) 属性动画控制控件的平移动画(控件的移动过程，用ObjectAnimator控制)

   2) RelativeLayout.LayoutParameter控制控件的初始位置(新生成的弹幕可能是 TextView 或者 ImageView，我需要在弹幕出现之前，将他们“刚好”隐藏在布局的右侧)

   3) ViewTreeObserver.OnGlobalLayoutListener监听控件树来 获取控件的真实宽高(获取控件真实宽高的方法有多种，我经过尝试，这种ViewTreeObserver的方式，对于 动态生成的弹幕控件最为准确)

下面会给出所有关键代码，一些涉及到程序思路，或者技术难点的部分代码，我加了详细注释，相信大家都能看得懂。(下面的效果图中有一个“飞机”，那是我随便下载的一个png );

先看效果：

 

使用方法也极为简单，只需要在layout.xml和MainActivity.java里面增加相关代码 。

请看下方代码：

MainActivity.java

package com.example.danmulayout;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

import com.example.danmulayout.custom.DanMu;
import com.example.danmulayout.custom.DanMuColor;
import com.example.danmulayout.custom.MyDanMuLayout;

/**
 * 本例，旨在做一个我自己的弹幕 Layout 作为开源库
 */
public class MainActivity extends AppCompatActivity {

    private MyDanMuLayout dl_my_danMu;
    private Button btn_send, btn_send_plane, btn_hide, btn_show;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        dl_my_danMu = findViewById(R.id.dl_my_danmu);
        btn_send = findViewById(R.id.btn_send);
        btn_hide = findViewById(R.id.btn_hide);
        btn_show = findViewById(R.id.btn_show);
        btn_send_plane = findViewById(R.id.btn_send_plane);

        btn_send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dl_my_danMu.sendDanMu(DanMu.getRandomDanMuContentInPresets(), DanMuColor.getRandomColorInPresets(), Color.TRANSPARENT);
            }
        });
        btn_send_plane.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dl_my_danMu.sendPlane();
            }
        });
        btn_hide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dl_my_danMu.hideDanMu();
            }
        });
        btn_show.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dl_my_danMu.showDanMu();
            }
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        dl_my_danMu.release();
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_send"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:text="发自动弹幕" />

        <Button
            android:id="@+id/btn_send_plane"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:text="送飞机" />

        <Button
            android:id="@+id/btn_hide"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:text="隐藏" />

        <Button
            android:id="@+id/btn_show"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:text="显示" />
    </LinearLayout>


    <com.example.danmulayout.custom.MyDanMuLayout
        android:id="@+id/dl_my_danmu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray"></com.example.danmulayout.custom.MyDanMuLayout>

</LinearLayout>

两个文件的代码行数总共加起来不超过200行。

 

下面列出其他关键代码：

MyDanMuLayout.java

package com.example.danmulayout.custom;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.example.danmulayout.R;

import java.util.LinkedList;
import java.util.Queue;
import java.util.Timer;
import java.util.TimerTask;

public class MyDanMuLayout extends RelativeLayout {

    private Context mContext;

    /*********************重写构造函数********************/
    public MyDanMuLayout(Context context) {
        this(context, null);
    }

    public MyDanMuLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyDanMuLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        setWidthObserverOfLayout();
    }

    private int measuredWidthOfDanMuView;
    private int layoutWidth, layoutHeight;
    private Handler mHandler = new Handler();

    /**
     * 全局监听，为了得出自定义layout的实际宽度和高度(这个宽度会用来计算弹幕需要移动多长距离，高度会用来计算 每条弹幕离顶部的距离)
     */
    private void setWidthObserverOfLayout() {
        //以本layout为根进行监听，当它的布局完成之后，执行逻辑，并且移除监听器
        ViewTreeObserver observer = this.getViewTreeObserver();
        observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {// 当全局布局发生变化，或者子view的可见状态发生变化时，它就会被回调

            @SuppressWarnings("deprecation")
            @Override
            public void onGlobalLayout() {//当检测到布局变化时，这个监听器就会回调
                Log.d("WidthObserverOfLayout", "执行widthObserverOfLayout");
                getViewTreeObserver().removeGlobalOnLayoutListener(this);//一旦被回调，立即移除监听,不然就会无限执行
                layoutWidth = getMeasuredWidth(); //获得当前自定义layout的实际宽度
                layoutHeight = getMeasuredHeight();//实际高度
                startDanMuLooper();//开始队列循环
            }
        });
    }


    //在这里设计一个队列机制，目的就是 将外界传进来的弹幕信息，都封装成Danmu对象，然后队列无限循环，显示弹幕
    private Queue<DanMu> danMuQueue = new LinkedList<>();
    private Timer timer;

    /**
     * 开始弹幕队列循环
     */
    private void startDanMuLooper() {
        if (null != timer) {
            timer.cancel();
            timer.purge();
        }
        timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                //这里有一个无限循环的timer，它会无限地将danmuQueue中的弹幕，
                final DanMu danmu = danMuQueue.poll();
                if (null != danmu) {
                    mHandler.post(new Runnable() {
                        @Override
                        public void run() {
                            initDanMu(mContext, danmu.content, danmu.distanceToTop, danmu.duration, danmu.textColor, danmu.bgColor, danmu.drawable);
                        }
                    });
                }
            }
        }, 50, 100);//每100毫秒检测一次队列里面有没有弹幕
    }

    /**
     * 开始对View进行动画处理
     *
     * @param danMuView
     * @param duration
     * @param distanceToTopPercent
     */
    private void animate(final View danMuView, final int duration, final float distanceToTopPercent) {
        ViewTreeObserver observer = danMuView.getViewTreeObserver();//增加监听, 为了获得弹幕view的实际宽度
        observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                danMuView.getViewTreeObserver().removeOnGlobalLayoutListener(this);//一旦被回调，立即移除监听,不然就会无限执行
                measuredWidthOfDanMuView = danMuView.getMeasuredWidth();//得出测量之后的宽度值

                // 借助RelativeLayout.LayoutParam 让它总是在右侧外围
                RelativeLayout.LayoutParams layoutParams = (LayoutParams) danMuView.getLayoutParams();
                layoutParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
                layoutParams.topMargin = (int) (distanceToTopPercent * layoutHeight);//设定离父组件最上方的距离
                layoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
                layoutParams.rightMargin = -measuredWidthOfDanMuView;
                danMuView.requestLayout();//强制刷新布局

                //然后执行动画
                startMovement(danMuView, duration);//拿到宽度之后才能进行动画执行，因为弹幕textview的移动距离依赖 layoutWidth
            }
        });
    }

    /**
     * 弹幕初始化
     */
    private void initDanMu(Context ctx, String danMuContent, final float distanceToTopPercent, final int duration, int textColor, int bgColor, Drawable drawable) {
        View danMuView;
        if (drawable == null) {//先看看有没有图，有图的话，就创建ImageView，否则就创建TextView

            TextView tv_danMuTemp = new TextView(ctx);//创建一个弹幕textView,这里的TextView是原生的，其实我可以做成自定义的TextView
            tv_danMuTemp.setText(danMuContent);//设置文字
            tv_danMuTemp.setTextColor(textColor);//设置文字颜色
            tv_danMuTemp.setBackgroundColor(bgColor);//设置边框颜色

            danMuView = tv_danMuTemp;

        } else {
            ImageView iv_danMuTemp = new ImageView(ctx);
            iv_danMuTemp.setImageDrawable(drawable);
            iv_danMuTemp.setMaxWidth(200);
            iv_danMuTemp.setMaxHeight(200);

            danMuView = iv_danMuTemp;
        }

        //下面的代码是为了将新产生的view 刚好 隐藏到本layout最右边
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);//设置初始布局
        layoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);//相对布局的参数：靠右
        layoutParams.rightMargin = -layoutWidth;//并且继续往右，直到隐藏
        addView(danMuView, layoutParams);//添加弹幕textView

        animate(danMuView, duration, distanceToTopPercent);
    }


    /**
     * 开始移动
     *
     * @param tv_danMuTemp
     */
    private void startMovement(final View tv_danMuTemp, int duration) {
        float targetDistance = layoutWidth + measuredWidthOfDanMuView;// 计算总共需要移动的距离
        ObjectAnimator animator = ObjectAnimator.ofFloat(tv_danMuTemp, "translationX", -targetDistance);//定义移动动画ObjectAnimator
        animator.setDuration(duration * 1000);//时长
        animator.setInterpolator(new LinearInterpolator());//匀速移动
        animator.addListener(new AnimatorListenerAdapter() {// 动画监听器，重写适配器
            @Override
            public void onAnimationEnd(Animator animation) {
                removeView(tv_danMuTemp);//一旦动画执行完毕，立即移除该view
                Log.d("onAnimationEnd", "getChildCount:" + getChildCount());//打印移除之后还剩下多少
            }
        });
        animator.start();//一切就绪，开始动画
    }

    /******************************************************* 以下是所有公开接口 ************************************************/

    /**
     * 向外开放一个接口，发送弹幕
     *
     * @param content   文字内容
     * @param textColor 文字颜色
     * @param bgColor   textView背景颜色
     */
    public void sendDanMu(String content, int textColor, int bgColor) {
        DanMu danmu = new DanMu();
        danmu.content = content;
        danmu.distanceToTop = (float) Math.random();
        danmu.duration = 10;
        danmu.textColor = textColor;
        danmu.bgColor = bgColor;
        danMuQueue.add(danmu);//将弹幕对象添加到队列中
    }

    /**
     * 送飞机
     */
    public void sendPlane() {
        DanMu danmu = new DanMu();
        danmu.distanceToTop = (float) Math.random();
        danmu.duration = 10;
        danmu.drawable = mContext.getResources().getDrawable(R.drawable.plane);
        danMuQueue.add(danmu);//将弹幕对象添加到队列中
    }

    /**
     * 隐藏所有弹幕view
     */
    public void hideDanMu() {
        for (int i = 0; i < getChildCount(); i++) {
            getChildAt(i).setVisibility(View.INVISIBLE);
        }
    }

    /**
     * 显示所有弹幕view
     */
    public void showDanMu() {
        for (int i = 0; i < getChildCount(); i++) {
            getChildAt(i).setVisibility(View.VISIBLE);
        }
    }

    /**
     * 引用本layout的activity，在onDestroy中一定要调用资源释放接口
     */
    public void release() {
        if (null != timer) {
            timer.cancel();
            timer.purge();
        }
    }

}

 

DanMu.java

package com.example.danmulayout.custom;


import android.graphics.drawable.Drawable;

/**
 *
 */
public class DanMu {
    public String content;//弹幕的文字内容
    public float distanceToTop;//距离顶端的比例（0-1）
    public int duration;//显示时长，单位是秒
    public int textColor;//文字颜色
    public int bgColor;//边框颜色
    public Drawable drawable;


    public static String getRandomDanMuContentInPresets(){
        String result;

        int n = (int) (10 * Math.random());
        switch (n) {
            case 1:
            case 2:
                result = "6666666";
                break;
            case 3:
            case 4:
                result = "不要放弃，加油，你是最胖的！";
                break;
            case 5:
            case 6:
                result = "一条大河啊啊啊啊向西流";
                break;
            case 7:
            case 8:
                result = "冷静冷静";
                break;
            case 9:
                result = "卧槽什么鬼，吓我一跳";
                break;
            default:
                result = "2333333";
        }
        return result;
    }
}

DanMuColor.java

package com.example.danmulayout.custom;

import android.graphics.Color;

public class DanMuColor {
    public static final int RED = Color.RED;
    public static final int BLUE = Color.BLUE;
    public static final int YELLOW = Color.YELLOW;
    public static final int GREEN = Color.GREEN;
    public static final int ORANGE = Color.parseColor("#FFAA00");

    /**
     * 返回上面预设中的任意一个颜色
     *
     * @return
     */
    public static int getRandomColorInPresets() {
        int result;

        int n = (int) (10 * Math.random());
        switch (n) {
            case 1:
            case 2:
                result = RED;
                break;
            case 3:
            case 4:
                result = BLUE;
                break;
            case 5:
            case 6:
                result = YELLOW;
                break;
            case 7:
            case 8:
                result = GREEN;
                break;
            case 9:
                result = ORANGE;
                break;
            default:
                result = BLUE;
        }
        return result;
    }

}

 本文只为 弹幕layout的实现提供一种思路。在上面代码的基础上，我们可以拓展，优化，或者做成独立第三方“弹幕控件库”。

大佬们有啥看法的，欢迎留言交流。