1. 程式人生 > >Android專案中加入彈幕功能

Android專案中加入彈幕功能

大家好,最近的專案中需要實現彈幕的功能,於是乎就尋找了不少的材料,翻看了郭神寫的彈幕部落格,以及在github上查閱了嗶哩嗶哩開源的效果庫。整合寫了下有關彈幕的文章。
詳細的有關彈幕知識可以檢視:嗶哩嗶哩開源的效果庫:https://github.com/Bilibili/DanmakuFlameMaster
希望對大家有幫助。下面請看實現後的第一張模擬器效果圖,和第二張真機效果圖






此demo包括視訊播放,點選螢幕輸入文字,彈幕字型文字大小縮放,文字顏色設定以及軟鍵盤和螢幕的比例問題等。

下面逐步介紹專案:

首先使用AndroidStudio新建一個專案,為了更快的開發下專案使用嗶哩嗶哩的開源類庫,只需要在build.gradle中新增依賴即可:

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

同時在清單檔案中需要設定網路許可權,設定為橫屏展示,軟鍵盤隨著螢幕可調節高低大小等:

<uses-permission 
android:name="android.permission.INTERNET" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/Theme.AppCompat.NoActionBar"> <activity
android:name=".MainActivity" android:screenOrientation="landscape" android:configChanges="orientation|keyboardHidden|screenLayout|screenSize" android:windowSoftInputMode="stateVisible|adjustResize"> <intent-filter> <action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application>


然後在佈局檔案中使用

<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:visibility="gone">
        <EditText
android:id="@+id/edit_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="50dp"
android:layout_weight="1"
android:imeOptions="flagNoExtractUi" />
        <Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#00000000"
android:text="傳送" />
    </LinearLayout>
</RelativeLayout>

接下來初始化控制元件,播放線上視訊
public class MainActivity extends AppCompatActivity {
    private boolean showDanmaku;
    private DanmakuView danmakuView;
    private DanmakuContext danmakuContext;
    private LinearLayout operationLayout;
    private Button send;
    private EditText editText;
    private VideoView videoView;
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);
initView();
initListner();
}

    private void initView() {
        videoView = (VideoView) findViewById(R.id.video_view);
//設定videoView播放線上視訊的路徑
videoView.setVideoPath("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
videoView.start();
operationLayout = (LinearLayout) findViewById(R.id.operation_layout);
send = (Button) findViewById(R.id.send);
editText = (EditText) findViewById(R.id.edit_text);
danmakuView = (DanmakuView) findViewById(R.id.danmaku_view);
}

接下來就需要新增彈幕以及關聯的邏輯操作了:在initListener()中呼叫setCallBack()方法設定回撥函式,接著呼叫DanmakuContext.create()方法建立例項,查閱原始碼後瞭解到可以對彈幕各種全域性配置,如字型大小,顏色,顯示彈幕多少行等等。
generateSomeDanmaku()方法為了測試彈幕的資料,addDanmaku()方法是為了向DanmakuView中新增一條資料,向左滾動,可以設定文字間距,大小,顏色,邊框等等。
然後點選螢幕顯示輸入框,同時在佈局檔案中設定軟鍵盤佔據螢幕半屏顯示,便於輸入文字查閱彈幕,點擊發送後軟體盤隱藏。

private void initListner() {
    //呼叫了setCallback()方法來設定回撥函式
danmakuView.setCallback(new DrawHandler.Callback() {
        @Override
public void prepared() {
            showDanmaku = true ;
danmakuView.start();
generateSomeDanmaku();
}
        @Override
public void updateTimer(DanmakuTimer timer) {}
        @Override
public void danmakuShown(BaseDanmaku danmaku) {}
        @Override
public void drawingFinished() {}
    });
danmakuContext = DanmakuContext.create();
danmakuContext.setScaleTextSize(2.0f);
danmakuView.prepare(parser,danmakuContext);
//設定點選後屏幕後輸入框顯示或者隱藏
danmakuView.setOnClickListener(new View.OnClickListener() {
        @Override
public void onClick(View v) {
            if(operationLayout.getVisibility() == View.GONE){
                operationLayout.setVisibility(View.VISIBLE);
}else {
                operationLayout.setVisibility(View.GONE);
}
        }
    });
//點擊發送按鈕後邏輯的操作
send.setOnClickListener(new View.OnClickListener() {
        @Override
public void onClick(View v) {
            String content = editText.getText().toString();
            if(!TextUtils.isEmpty(content)){
                addDanmaku(content);
InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(editText.getWindowToken(),0);
editText.setText("");
operationLayout.setVisibility(View.GONE);
}
        }
    });
}

//向彈幕view中新增一條彈幕
private  void  addDanmaku(String content){
    BaseDanmaku danmaku = danmakuContext.mDanmakuFactory.createDanmaku(BaseDanmaku.TYPE_SCROLL_RL);
danmaku.text = content;
danmaku.padding = 5;
danmaku.textSize  = 25;
danmaku.textColor = Color.argb(new Random().nextInt(256), new Random().nextInt(256),
            new Random().nextInt(256),new Random().nextInt(256));
danmaku.setTime(danmakuView.getCurrentTime());
danmakuView.addDanmaku(danmaku);
}

//隨機生成一些彈幕內容以供測試
private void generateSomeDanmaku() {
    new Thread(new Runnable() {
        BaseDanmaku danmaku = danmakuContext.mDanmakuFactory.createDanmaku(BaseDanmaku.TYPE_SCROLL_RL);
@Override
public void run() {
            while (showDanmaku){
                int time = new Random().nextInt(100);
String content = time +"" ;
addDanmaku(content);
                try {
                    Thread.sleep(time);
} catch (InterruptedException e) {
                    e.printStackTrace();
}
            }
        }
    }).start();
}


最後我們還需要在onPause(),onResume(),onDestroy()中進行一些邏輯處理,保證DanmakuView資源得到釋放。

@Override
protected void onPause() {
    super.onPause();
    if (danmakuView != null && danmakuView.isPrepared()) {
        danmakuView.pause();
}
}
@Override
protected void onResume() {
    super.onResume();
    if (danmakuView != null && danmakuView.isPrepared() && danmakuView.isPaused()) {
        danmakuView.resume();
}
}
@Override
protected void onDestroy() {
    super.onDestroy();
showDanmaku = false;
    if (danmakuView != null) {
        danmakuView.release();
danmakuView = null;
}
}

由此最終實現了彈幕的簡單效果,若還需要更多的需求需要更好的研究嗶哩嗶哩提供的開源類庫,相信努力後的你一定會過的更加精彩。


原始碼下載:http://download.csdn.net/download/lou_liang/10154828