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

更新时间：2016年11月07日 11:57:34 作者：shineflowers

这篇文章主要为大家详细介绍了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，里面还有很多炫酷的功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

一文详解Jetpack Android新一代导航管理Navigation
这篇文章主要为大家介绍了Jetpack Android新一代导航管理Navigation详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
Android聊天工具基于socket实现
这篇文章主要介绍了基于socket实现的一个简单的Android聊天工具，实现方法简单，具有一定的参考价值，感兴趣的朋友可以参考一下
2016-02-02
Android 三种动画详解及简单实例
这篇文章主要介绍了Android 三种动画详解及简单实例的相关资料,需要的朋友可以参考下
2017-04-04
OpenGL ES纹理详解
这篇文章主要为大家详细介绍了OpenGL ES纹理的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-05-05
Android App设计规范深入讲解
随着安卓智能手机不停的更新换代,安卓手机系统越来越完美,屏幕尺寸也越来越大啦,下面这篇文章主要给大家介绍了关于Android App设计规范的相关资料,需要的朋友可以参考下
2022-10-10
Android实现全局悬浮框
这篇文章主要为大家详细介绍了Android实现全局悬浮框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
Android实现流动的渐变色边框效果
本文将带大家学习一下如何利用toast中的motion_toast组件实现一个流动的渐变色边框效果，文中的示例代码讲解详细，快跟随小编一起学习学习吧
2022-06-06
Android使用Kotlin实现多节点进度条
这篇文章主要为大家详细介绍了Android使用Kotlin实现多节点进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
Android自定义View中Paint、Rect、Canvas介绍（一）
这篇文章主要为大家详细介绍了Android自定义View中Paint、Rect、Canvas的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
微信小程序在安卓的白屏问题原因及改进讲解
今天小编就为大家分享一篇关于微信小程序在安卓的白屏问题原因及改进讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-02-02