Android實現炫酷的網絡直播彈幕功能

2019-12-12 04:46:26

字體：大中小

來源：轉載

供稿：網友

現在網絡直播越來越火，網絡主播也逐漸成為一種新興職業，對于網絡直播，彈幕功能是必須要有的，如下圖：

首先來分析一下，這個彈幕功能是怎么實現的，首先在最下面肯定是一個游戲界面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);   }  } }

效果圖如下：