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弹幕功能实现,模仿斗鱼直播的弹幕效果

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

Android仿网络直播弹幕功能的实现

现在网络直播越来越火,网络主播也逐渐成为一种新兴职业,对于网络直播,弹幕功能是必须要有的,如下图: 首先来分析一下,这个弹幕功能是怎么实现的,首先在最下面肯定是一个游戏界面View,然后游戏界面上...

Android弹幕效果实现

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

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Android开发之APP弹幕功能

本文来自红黑联盟,主要介绍一下Android 的弹幕功能,请看文章!

Android实现弹幕效果

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

Android弹幕编程设计实现的解决方案(一)

 Android弹幕编程设计实现的解决方案(一) 在现在的一些视频类网站、视频类直播网站,比如A站和B站,当视频在播放的时候,会在屏幕上出现一些滚动的字幕,这些字幕是UGC,通常是用户的评论,...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

【Android效果集】弹幕效果

之前在网上有看到过iOS的弹幕效果实现,搜了一下发现Android实现弹幕效果的帖子比较少,而且写得都不是很好理解,于是尝试自己做了一下,写成这篇博客,分享出来。最终效果展示: 实现思路:1.自定义...

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

现在很多应用都有弹幕的功能,虽然本人没什么兴趣使用弹幕的功能,但是对如何实现这个弹幕功能还是有兴趣的。先上效果图。原理在ViewGroup上不定时地添加属性不相同的TextView执行不同的动画。Ba...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android下的弹幕的简单实现
举报原因:
原因补充:

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