Android專案中加入彈幕功能
阿新 • • 發佈:2019-01-27
大家好,最近的專案中需要實現彈幕的功能,於是乎就尋找了不少的材料,翻看了郭神寫的彈幕部落格,以及在github上查閱了嗶哩嗶哩開源的效果庫。整合寫了下有關彈幕的文章。
詳細的有關彈幕知識可以檢視:嗶哩嗶哩開源的效果庫:https://github.com/Bilibili/DanmakuFlameMaster
希望對大家有幫助。下面請看實現後的第一張模擬器效果圖,和第二張真機效果圖:
同時在清單檔案中需要設定網路許可權,設定為橫屏展示,軟鍵盤隨著螢幕可調節高低大小等:
然後在佈局檔案中使用
接下來初始化控制元件,播放線上視訊
由此最終實現了彈幕的簡單效果,若還需要更多的需求需要更好的研究嗶哩嗶哩提供的開源類庫,相信努力後的你一定會過的更加精彩。
詳細的有關彈幕知識可以檢視:嗶哩嗶哩開源的效果庫:https://github.com/Bilibili/DanmakuFlameMaster
希望對大家有幫助。下面請看實現後的第一張模擬器效果圖,和第二張真機效果圖:
此demo包括視訊播放,點選螢幕輸入文字,彈幕字型文字大小縮放,文字顏色設定以及軟鍵盤和螢幕的比例問題等。
下面逐步介紹專案:
首先使用AndroidStudio新建一個專案,為了更快的開發下專案使用嗶哩嗶哩的開源類庫,只需要在build.gradle中新增依賴即可:
compile 'com.github.ctiao:DanmakuFlameMaster:0.5.3'
同時在清單檔案中需要設定網路許可權,設定為橫屏展示,軟鍵盤隨著螢幕可調節高低大小等:
<uses-permissionandroid: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"> <activityandroid: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