Android 实现仿网络直播弹幕功能详解及实例

Android 网络直播弹幕
最近看好多网络电视，播放器及直播都有弹幕功能，自己周末捣鼓下并实现，以下是网上的资料，大家可以看下。
现在网络直播越来越火，网络主播也逐渐成为一种新兴职业，对于网络直播，弹幕功能是必须要有的，如下图：

首先来分析一下，这个弹幕功能是怎么实现的，首先在最下面肯定是一个游戏界面View，然后游戏界面上有弹幕View，弹幕的View必须要做成完全透明的，这样即使覆盖在游戏界面的上方也不会影响到游戏的正常观看，只有当有人发弹幕消息时，再将消息绘制到弹幕的View上面就可以了，下方肯定还有有操作界面View，可以让用户来发弹幕和送礼物的功能，原理示意图如下所示：

参照原理图，下面一步一步来实现这个功能。
实现视频的播放
activity_main.xml

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#000"> <VideoView android:id="@+id/video_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true"/> </RelativeLayout>

MainActivity.java

package com.jackie.bombscreen;import android.os.Build; import android.os.Bundle; import android.os.Environment; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.VideoView;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate（Bundle savedInstanceState） { super.onCreate（savedInstanceState）; setContentView（R.layout.activity_main）; VideoView videoView = （VideoView） findViewById（R.id.video_view）; videoView.setVideoPath（Environment.getExternalStorageDirectory（） + "/xiaoxingyun.mp4"）; videoView.start（）;}@Overridepublic void onWindowFocusChanged（boolean hasFocus） { super.onWindowFocusChanged（hasFocus）; if （hasFocus && Build.VERSION.SDK_INT >= 19） {View decorView = getWindow（）.getDecorView（）;decorView.setSystemUiVisibility（View.SYSTEM_UI_FLAG_LAYOUT_STABLE| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION| View.SYSTEM_UI_FLAG_FULLSCREEN| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY）; }} }

最后别忘了设置AndroidMainfest.xml

效果如下：

、

实现弹幕的效果
接下来我们开始实现弹幕效果。弹幕其实也就是一个自定义的View，它的上面可以显示类似于跑马灯的文字效果。观众们发表的评论都会在弹幕上显示出来，但又会很快地移出屏幕，既可以起到互动的作用，同时又不会影响视频的正常观看。
我们可以自己来编写这样的一个自定义View，当然也可以直接使用网上现成的开源项目。那么为了能够简单快速地实现弹幕效果，这里我就准备直接使用由哔哩哔哩开源的弹幕效果库DanmakuFlameMaster。
DanmakuFlameMaster库的项目主页地址是：http://xiazai.jb51.net/201611/yuanma/DanmakuFlameMaster-master（jb51.net）.rar
添加build.gradle依赖

compile "com.github.ctiao:DanmakuFlameMaster:0.5.3"

<?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#000"> <VideoView android:id="@+id/video_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true"/> <master.flame.danmaku.ui.widget.DanmakuView android:id="@+id/danmaku_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>

修改MainActivity.java

package com.jackie.bombscreen;import android.graphics.Color; import android.os.Build; import android.os.Bundle; import android.os.Environment; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.VideoView;import java.util.Random;import master.flame.danmaku.controller.DrawHandler; import master.flame.danmaku.danmaku.model.BaseDanmaku; import master.flame.danmaku.danmaku.model.DanmakuTimer; import master.flame.danmaku.danmaku.model.IDanmakus; import master.flame.danmaku.danmaku.model.android.DanmakuContext; import master.flame.danmaku.danmaku.model.android.Danmakus; import master.flame.danmaku.danmaku.parser.BaseDanmakuParser; import master.flame.danmaku.ui.widget.DanmakuView;public class MainActivity extends AppCompatActivity {private boolean mIsShowDanmaku;private DanmakuView mDanmakuView;private DanmakuContext mDanmakuContext; private BaseDanmakuParser parser = new BaseDanmakuParser（） { @Override protected IDanmakus parse（） {return new Danmakus（）; }}; @Overrideprotected void onCreate（Bundle savedInstanceState） { super.onCreate（savedInstanceState）; setContentView（R.layout.activity_main）; VideoView videoView = （VideoView） findViewById（R.id.video_view）; videoView.setVideoPath（Environment.getExternalStorageDirectory（） + "/xiaoxingyun.mp4"）; videoView.start（）;mDanmakuView = （DanmakuView） findViewById（R.id.danmaku_view）; mDanmakuView.enableDanmakuDrawingCache（true）; mDanmakuView.setCallback（new DrawHandler.Callback（） {@Overridepublic void prepared（） { mIsShowDanmaku = true; mDanmakuView.start（）; generateSomeDanmaku（）;} @Overridepublic void updateTimer（DanmakuTimer timer） { } @Overridepublic void danmakuShown（BaseDanmaku danmaku） { } @Overridepublic void drawingFinished（） { } }）;mDanmakuContext = DanmakuContext.create（）; mDanmakuView.prepare（parser, mDanmakuContext）;} /** * 向弹幕View中添加一条弹幕 * @param content弹幕的具体内容 * @param withBorder 弹幕是否有边框 */private void addDanmaku（String content, boolean withBorder） { BaseDanmaku danmaku = mDanmakuContext.mDanmakuFactory.createDanmaku（BaseDanmaku.TYPE_SCROLL_RL）; danmaku.text = content; danmaku.padding = 5; danmaku.textSize = sp2px（20）; danmaku.textColor = Color.WHITE; danmaku.setTime（mDanmakuView.getCurrentTime（））; if （withBorder） {danmaku.borderColor = Color.GREEN; } mDanmakuView.addDanmaku（danmaku）;} /** * 随机生成一些弹幕内容以供测试 */private void generateSomeDanmaku（） { new Thread（new Runnable（） {@Overridepublic void run（） { while（mIsShowDanmaku） {int time = new Random（）.nextInt（300）;String content = "" + time + time;addDanmaku（content, false）;try { Thread.sleep（time）;} catch （InterruptedException e） { e.printStackTrace（）;} }} }）.start（）;} /** * sp转px的方法。 */public int sp2px（float spValue） { final float fontScale = getResources（）.getDisplayMetrics（）.scaledDensity; return （int） （spValue * fontScale + 0.5f）;} @Overrideprotected void onPause（） { super.onPause（）; if （mDanmakuView ！= null && mDanmakuView.isPrepared（）） {mDanmakuView.pause（）; }} @Overrideprotected void onResume（） { super.onResume（）; if （mDanmakuView ！= null && mDanmakuView.isPrepared（） && mDanmakuView.isPaused（）） {mDanmakuView.resume（）; }} @Overrideprotected void onDestroy（） { super.onDestroy（）; mIsShowDanmaku = false; if （mDanmakuView ！= null） {mDanmakuView.release（）;mDanmakuView = null; }}@Overridepublic void onWindowFocusChanged（boolean hasFocus） { super.onWindowFocusChanged（hasFocus）; if （hasFocus && Build.VERSION.SDK_INT >= 19） {View decorView = getWindow（）.getDecorView（）;decorView.setSystemUiVisibility（View.SYSTEM_UI_FLAG_LAYOUT_STABLE| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION| View.SYSTEM_UI_FLAG_FULLSCREEN| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY）; }} }

效果图如下：

加入操作界面

<?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#000"> <VideoView android:id="@+id/video_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true"/> <master.flame.danmaku.ui.widget.DanmakuView android:id="@+id/danmaku_view" android:layout_width="match_parent" android:layout_height="match_parent" /> <LinearLayout android:id="@+id/operation_layout" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentBottom="true" android:background="#fff" android:visibility="gone"><EditTextandroid:id="@+id/edit_text"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1" /><Buttonandroid:id="@+id/send"android:layout_width="wrap_content"android:layout_height="match_parent"android:text="Send" /></LinearLayout> </RelativeLayout>

package com.jackie.bombscreen;import android.graphics.Color; import android.os.Build; import android.os.Bundle; import android.os.Environment; import android.support.v7.app.AppCompatActivity; import android.text.TextUtils; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.LinearLayout; import android.widget.VideoView;import java.util.Random;import master.flame.danmaku.controller.DrawHandler; import master.flame.danmaku.danmaku.model.BaseDanmaku; import master.flame.danmaku.danmaku.model.DanmakuTimer; import master.flame.danmaku.danmaku.model.IDanmakus; import master.flame.danmaku.danmaku.model.android.DanmakuContext; import master.flame.danmaku.danmaku.model.android.Danmakus; import master.flame.danmaku.danmaku.parser.BaseDanmakuParser; import master.flame.danmaku.ui.widget.DanmakuView;public class MainActivity extends AppCompatActivity {private boolean mIsShowDanmaku;private DanmakuView mDanmakuView;private DanmakuContext mDanmakuContext; private BaseDanmakuParser parser = new BaseDanmakuParser（） { @Override protected IDanmakus parse（） {return new Danmakus（）; }}; @Overrideprotected void onCreate（Bundle savedInstanceState） { super.onCreate（savedInstanceState）; setContentView（R.layout.activity_main）; VideoView videoView = （VideoView） findViewById（R.id.video_view）; videoView.setVideoPath（Environment.getExternalStorageDirectory（） + "/xiaoxingyun.mp4"）; videoView.start（）;mDanmakuView = （DanmakuView） findViewById（R.id.danmaku_view）; mDanmakuView.enableDanmakuDrawingCache（true）; mDanmakuView.setCallback（new DrawHandler.Callback（） {@Overridepublic void prepared（） { mIsShowDanmaku = true; mDanmakuView.start（）; generateSomeDanmaku（）;} @Overridepublic void updateTimer（DanmakuTimer timer） { } @Overridepublic void danmakuShown（BaseDanmaku danmaku） { } @Overridepublic void drawingFinished（） { } }）;mDanmakuContext = DanmakuContext.create（）; mDanmakuView.prepare（parser, mDanmakuContext）;final LinearLayout operationLayout = （LinearLayout） findViewById（R.id.operation_layout）; final Button send = （Button） findViewById（R.id.send）; final EditText editText = （EditText） findViewById（R.id.edit_text）; mDanmakuView.setOnClickListener（new View.OnClickListener（） {@Overridepublic void onClick（View view） { if （operationLayout.getVisibility（） == View.GONE） {operationLayout.setVisibility（View.VISIBLE）; } else {operationLayout.setVisibility（View.GONE）; }} }）;send.setOnClickListener（new View.OnClickListener（） {@Overridepublic void onClick（View view） { String content = editText.getText（）.toString（）; if （！TextUtils.isEmpty（content）） {addDanmaku（content, true）;editText.setText（""）; }} }）;getWindow（）.getDecorView（）.setOnSystemUiVisibilityChangeListener （new View.OnSystemUiVisibilityChangeListener（） {@Overridepublic void onSystemUiVisibilityChange（int visibility） { if （visibility == View.SYSTEM_UI_FLAG_VISIBLE） {onWindowFocusChanged（true）; }} }）;} /** * 向弹幕View中添加一条弹幕 * @param content弹幕的具体内容 * @param withBorder 弹幕是否有边框 */private void addDanmaku（String content, boolean withBorder） { BaseDanmaku danmaku = mDanmakuContext.mDanmakuFactory.createDanmaku（BaseDanmaku.TYPE_SCROLL_RL）; danmaku.text = content; danmaku.padding = 5; danmaku.textSize = sp2px（20）; danmaku.textColor = Color.WHITE; danmaku.setTime（mDanmakuView.getCurrentTime（））; if （withBorder） {danmaku.borderColor = Color.GREEN; } mDanmakuView.addDanmaku（danmaku）;} /** * 随机生成一些弹幕内容以供测试 */private void generateSomeDanmaku（） { new Thread（new Runnable（） {@Overridepublic void run（） { while（mIsShowDanmaku） {int time = new Random（）.nextInt（300）;String content = "" + time + time;addDanmaku（content, false）;try { Thread.sleep（time）;} catch （InterruptedException e） { e.printStackTrace（）;} }} }）.start（）;} /** * sp转px的方法。 */public int sp2px（float spValue） { final float fontScale = getResources（）.getDisplayMetrics（）.scaledDensity; return （int） （spValue * fontScale + 0.5f）;} @Overrideprotected void onPause（） { super.onPause（）; if （mDanmakuView ！= null && mDanmakuView.isPrepared（）） {mDanmakuView.pause（）; }} @Overrideprotected void onResume（） { super.onResume（）; if （mDanmakuView ！= null && mDanmakuView.isPrepared（） && mDanmakuView.isPaused（）） {mDanmakuView.resume（）; }} @Overrideprotected void onDestroy（） { super.onDestroy（）; mIsShowDanmaku = false; if （mDanmakuView ！= null） {mDanmakuView.release（）;mDanmakuView = null; }}@Overridepublic void onWindowFocusChanged（boolean hasFocus） { super.onWindowFocusChanged（hasFocus）; if （hasFocus && Build.VERSION.SDK_INT >= 19） {View decorView = getWindow（）.getDecorView（）;decorView.setSystemUiVisibility（View.SYSTEM_UI_FLAG_LAYOUT_STABLE| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION| View.SYSTEM_UI_FLAG_FULLSCREEN| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY）; }} }

效果图如下：

自己发的弹幕有绿色边框，很容易区分。
基本上实现了弹幕的功能，当然，里面的知识点还有很多，这只是最基本的功能。有时间的话，建议学学DanmakuFlameMaster，里面还有很多炫酷的功能。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！