Android实现炫酷的网络直播弹幕功能
现在网络直播越来越火,网络主播也逐渐成为一种新兴职业,对于网络直播,弹幕功能是必须要有的,如下图:
首先来分析一下,这个弹幕功能是怎么实现的,首先在最下面肯定是一个游戏界面view,然后游戏界面上有弹幕view,弹幕的view必须要做成完全透明的,这样即使覆盖在游戏界面的上方也不会影响到游戏的正常观看,只有当有人发弹幕消息时,再将消息绘制到弹幕的view上面就可以了,下方肯定还有有操作界面view,可以让用户来发弹幕和送礼物的功能,原理示意图如下所示:
参照原理图,下面一步一步来实现这个功能。
实现视频的播放
activity_main.xml
<relativelayout xmlns: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 { @override protected 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(); } @override public 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库的项目主页地址是:https://github.com/bilibili/danmakuflamemaster
添加build.gradle依赖
compile 'com.github.ctiao:danmakuflamemaster:0.5.3'
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns: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(); } }; @override protected 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() { @override public void prepared() { misshowdanmaku = true; mdanmakuview.start(); generatesomedanmaku(); } @override public void updatetimer(danmakutimer timer) { } @override public void danmakushown(basedanmaku danmaku) { } @override public 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() { @override public 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); } @override protected void onpause() { super.onpause(); if (mdanmakuview != null && mdanmakuview.isprepared()) { mdanmakuview.pause(); } } @override protected void onresume() { super.onresume(); if (mdanmakuview != null && mdanmakuview.isprepared() && mdanmakuview.ispaused()) { mdanmakuview.resume(); } } @override protected void ondestroy() { super.ondestroy(); misshowdanmaku = false; if (mdanmakuview != null) { mdanmakuview.release(); mdanmakuview = null; } } @override public 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"?> <relativelayout xmlns: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"> <edittext android:id="@+id/edit_text" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> <button android: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(); } }; @override protected 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() { @override public void prepared() { misshowdanmaku = true; mdanmakuview.start(); generatesomedanmaku(); } @override public void updatetimer(danmakutimer timer) { } @override public void danmakushown(basedanmaku danmaku) { } @override public 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() { @override public void onclick(view view) { if (operationlayout.getvisibility() == view.gone) { operationlayout.setvisibility(view.visible); } else { operationlayout.setvisibility(view.gone); } } }); send.setonclicklistener(new view.onclicklistener() { @override public void onclick(view view) { string content = edittext.gettext().tostring(); if (!textutils.isempty(content)) { adddanmaku(content, true); edittext.settext(""); } } }); getwindow().getdecorview().setonsystemuivisibilitychangelistener (new view.onsystemuivisibilitychangelistener() { @override public 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() { @override public 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); } @override protected void onpause() { super.onpause(); if (mdanmakuview != null && mdanmakuview.isprepared()) { mdanmakuview.pause(); } } @override protected void onresume() { super.onresume(); if (mdanmakuview != null && mdanmakuview.isprepared() && mdanmakuview.ispaused()) { mdanmakuview.resume(); } } @override protected void ondestroy() { super.ondestroy(); misshowdanmaku = false; if (mdanmakuview != null) { mdanmakuview.release(); mdanmakuview = null; } } @override public 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,里面还有很多炫酷的功能。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Java 重写与重载方法与区别详解
下一篇: Android打造流畅九宫格抽奖活动效果
推荐阅读
-
Android实现炫酷的网络直播弹幕功能
-
Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果
-
Android 实现仿网络直播弹幕功能详解及实例
-
Android实现网络加载时的对话框功能
-
Android实现网络加载时的对话框功能
-
Android实现单页显示3个Item的ViewPager炫酷切换效果
-
Android实现单页显示3个Item的ViewPager炫酷切换效果
-
Android开发实现高仿优酷的客户端图片左右滑动切换功能实例【附源码下载】
-
Android 防止抓包功能完美实现 通过判断当前网络是否配置代理的方式
-
Android自定义View实现简单炫酷的球体进度球实例代码