Android下的弹幕的简单实现

Android下的弹幕的简单实现

简介

今天给大家带来一个前几天在做工程的时候写的一个有意思的Android弹幕实现，可以用来吐槽，介绍APP之类的~非常简单~几行代码~哈哈~下面是下载地址~

下载地址（记得给我星哟）：https://github.com/dayiming/BarrageView

实现

首先，因为是弹幕，为了让文字浮动于要显示的层的表面，我们需要准备一个半透明渐变的背景，所以，创建drawable_barrage_background.xml文件于drawable文件夹下，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="-90"
        android:startColor="#00333333"
        android:centerColor="#60333333"
        android:endColor="#c0333333"/>
</shape>

为了让弹幕的每一段文字可以被清晰的看见，最好给弹幕的每一个条目设置一个背景，为了优化视觉效果，这个背景最好也是有一些透明度的，创建drawable_barrage_item_background.xml与drawable文件夹下，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"           android:shape="rectangle">
    <corners android:radius="4dp"/>
    <solid android:color="#e0ffffff"/>
    <padding android:bottom="2dp" android:left="12dp" android:right="12dp" android:top="2dp"/>
</shape>

准备工作做完之后，下面就是重写控件了。

首先我们创建BarrageView继承自FrameLayout（其实继承自哪个控件都可以，只要后面的代码根据控件的不同稍作修改就可以了）。在构造函数中我们完成如下操作：

public BarrageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {

        //设置背景色
        this.setBackgroundResource(
        R.drawable.drawable_barrage_background);

        //创建一个文本标记用于展示，并添加一定的属性让它与底部居中
        tv_tag = new TextView(getContext());
        tv_tag.setTextSize(18);
        tv_tag.setTextColor(Color.WHITE);
        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        params.gravity = Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM;
        int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, getResources().getDisplayMetrics());
        params.bottomMargin = margin;
        params.leftMargin = margin;
        params.rightMargin = margin;
        tv_tag.setSingleLine(false);
        tv_tag.setLayoutParams(params);
        tv_tag.setText("没错这就是弹幕~一会就没了~");
        this.addView(tv_tag);

        //这个类是我自己写的类，用于获取屏幕的长宽的类，在源码中有
        screenParams = new ScreenParams(getContext());
        random = new Random();

        //这个类主要用于检测组件是否被绘制，为了提升效果，我们在组件被绘制的时候才开始动态添加弹幕
        ViewTreeObserver observer = getViewTreeObserver();
        observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                //防止这个函数被多次调用
                if (!isMessured) {
                    isMessured = true;
                    handler.postDelayed(playRunnable, PLAY_DURATION); //用于开始生成弹幕 PLAY_DURATION = 400
                    handler.postDelayed(disappearRunnable, DISAPPEAR_DURATION); //用于停止弹幕和隐藏组件 DISAPPEAR_DURATION 这个可以随意设置时长
                }
                return true;
            }
        });
    }

接着我们准备一些要显示的颜色和文字，放置成数组

private int[] colors = new int[] {
            Color.parseColor("#e51c23"),
            Color.parseColor("#e91e63"),
            Color.parseColor("#9c27b0"),
            Color.parseColor("#673ab7"),
            Color.parseColor("#3f51b5"),
            Color.parseColor("#5677fc"),
            Color.parseColor("#ffc107"),
            Color.parseColor("#009688"),
            Color.parseColor("#259b24"),
    };

    private String[] texts = new String[] {
            "Android上也可以有弹幕哟~",
            "是不是还挺有意思的~",
            "我也这么觉的~",
            "我们的APP特别的有意思~",
            "我只是吐槽一下产品~",
            "这个地方不要写死，以后一定会改的~",
            "***是这个世界上最好的语言!!",
            "请叫我攻城狮~~",
            "卖个萌~O(∩_∩)O~~"
    };

下面就是最重要的一步，动态随机的生成弹幕，放在一个Runnable中定时实现，代码如下：

private Runnable playRunnable = new Runnable() {
        @Override
        public void run() {
            final TextView tem = new TextView(getContext());
            //设置文字大小
            tem.setTextSize(18);
            //设置背景
            tem.setBackgroundResource(                       R.drawable.drawable_barrage_item_background);
            //设置颜色
            tem.setTextColor(
            colors[random.nextInt(colors.length)]);
            String text = texts[random.nextInt(texts.length)];
            tem.setText(text);
            //让文本框居右，因为我们要从右端开始显示
            LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            params.gravity = Gravity.RIGHT;
            tem.setLayoutParams(params);
            BarrageView.this.addView(tem);
            //随机的设置弹幕文本的Y值，让它可以呈现散乱出现的效果
            tem.setY(random.nextInt(
                      screenParams.getScreenHeight() / 4) + screenParams.getScreenHeight() / 3);
            //定义一个动画，让文本框开始移动
            ObjectAnimator animator = ObjectAnimator.ofFloat(tem, "translationX", 0, 0 - screenParams.getScreenWidth());
            animator.setDuration(2400);
            animator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    //在动画结束的时候删除这个文本框
                    BarrageView.this.removeView(tem);
                }
            });
            animator.start();

            handler.postDelayed(playRunnable, PLAY_DURATION);
        }
    };

下面是播放完毕隐藏这个组件的动画，让透明度渐变，视觉效果会好很多

ObjectAnimator animator = ObjectAnimator.ofFloat(BarrageView.this, "alpha", 1, 0);
            animator.setDuration(300);
            animator.setInterpolator(new DecelerateInterpolator());
            animator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    BarrageView.this.setVisibility(GONE);
                }
            });
            animator.start();

到这这个Android下的弹幕控件就制作完成了，如果可以的话大家还可以自己修改成自己喜欢的动画，或者每一个弹幕都是图片+文字这样的实现，都很容易修改。谢谢大家~

下载地址（记得给我星哟）：https://github.com/dayiming/BarrageView