Android下的弹幕的简单实现

原创 2015年11月19日 15:26:16

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android弹幕功能实现,模仿斗鱼直播的弹幕效果

大家好,感觉好像已经很久没更新博客了。前段时间主要是忙于新书的事情,时间比较紧张。而现在新书已经完稿,剩下的事情就都是出版社的工作了,那么我又可以抽出时间来写写博客了。 记得之前有位朋友在我的公众号...
  • sinyu890807
  • sinyu890807
  • 2016年10月18日 08:01
  • 57608

Android弹幕效果实现

在B站或者其他视频网站看视频时候,常常会打开弹幕效果,边看节目边看大家的吐槽。弹幕效果看起来很有意思,今天我们就来实现一个简单的弹幕效果。 直观的看,弹幕效果就是在一个ViewGroup上增加一些V...
  • goodlixueyong
  • goodlixueyong
  • 2016年02月25日 15:08
  • 11449

Android实现弹幕效果

相信大家看视频的时候都会有弹幕效果,这似乎已经成为视频软件的标配,接下来让我们来看看如何实现这个弹幕效果。 一.弹幕效果分析 我可以看到,弹幕效果是在屏幕上方飘过,...
  • m0_37136295
  • m0_37136295
  • 2017年05月18日 15:44
  • 866

Android集成B站弹幕库Danmaku

DanmaKu简介 弹幕库是B站开发的一款开源的弹幕库引擎,非常火爆,号称烈焰弹幕使! 项目的github开源网址 特点 使用多种方式(View/SurfaceView/TextureVie...
  • u013366008
  • u013366008
  • 2017年08月14日 13:28
  • 334

Android项目中加入弹幕功能

大家好,最近的项目中需要实现弹幕的功能,于是乎就寻找了不少的材料,翻看了郭神写的弹幕博客,以及在github上查阅了哔哩哔哩开源的效果库。整合写了下有关弹幕的文章。 详细的有关弹幕知识可以查看:htt...
  • lou_liang
  • lou_liang
  • 2017年12月12日 00:00
  • 136

Android端弹幕效果实现

  • 2016年10月16日 18:10
  • 875KB
  • 下载

android开源弹幕库,强力推荐

  • 2014年06月19日 16:17
  • 1.62MB
  • 下载

安卓实时弹幕demo(一)弹幕效果

//////////2016/08/03/////////// /////////by  XBW/////////////// /////////android studio////// 先上图,看效...
  • xbw12138
  • xbw12138
  • 2016年08月03日 15:08
  • 10885

Android实现视频弹幕效果功能

  • 2015年06月10日 10:58
  • 2.93MB
  • 下载

Android弹幕实现:基于B站弹幕开源系统(3)-文本弹幕的完善和细节调整

Android弹幕实现:基于B站弹幕开源系统(3)本文在附录1,2的基础上再次对异步获取弹幕并显示弹幕完善逻辑和代码,集中在上层Java代码部分:package zhangphil.danmaku; ...
  • zhangphil
  • zhangphil
  • 2017年03月30日 12:33
  • 1560
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android下的弹幕的简单实现
举报原因:
原因补充:

(最多只允许输入30个字)