Android彈幕框架 黑暗火焰使基本使用方法
今天我將分享由BiliBili開源的Android彈幕框架(DanmakuFlameMaster)的學習經(jīng)驗。
我是將整個框架以model的形式引入項目中的,這樣更方便的觀察源碼。也可以通過依賴的方式注入進來
dependencies { compile 'com.github.ctiao:DanmakuFlameMaster:0.5.3' }
先放一下我要做成的效果圖:
頁面分析
從上圖來看,整個UI分成了三層。最下面是視頻層,中間是彈幕層,頂層是控制層。現(xiàn)在市場上主流的視頻直播軟件大多都是這樣分層的,不同的是直播類的話,可能還會再多一層交互層,顯示簽到信息、禮物信息什么的。
既然是分層的話,我就直接用FrameLayout幀布局來實現(xiàn)了。貼一下我的布局文件:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <VideoView android:id="@+id/vv_video" android:layout_width="match_parent" android:layout_height="match_parent" /> <master.flame.danmaku.ui.widget.DanmakuView android:id="@+id/sv_danmaku" android:layout_width="match_parent" android:layout_height="match_parent" /> <include android:id="@+id/media_controller" android:layout_width="match_parent" android:layout_height="fill_parent" layout="@layout/media_controller" /> </FrameLayout>
控制層的布局:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="#8acc22dd" > <Button android:layout_weight="1" android:id="@+id/rotate" android:layout_width="0dp" android:layout_height="wrap_content" android:text="@string/rotate" /> <Button android:layout_width="0dp" android:layout_weight="1" android:id="@+id/btn_hide" android:layout_height="wrap_content" android:text="@string/hide_danmaku" /> <Button android:id="@+id/btn_show" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="@string/show_danmaku" /> <Button android:id="@+id/btn_pause" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="@string/pause_danmaku" /> <Button android:id="@+id/btn_resume" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="@string/resume_danmaku" /> <Button android:id="@+id/btn_send" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="@string/send_danmaku" /> <Button android:id="@+id/btn_send_image_text" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="@string/send_danmaku_image_text" /> <Button android:id="@+id/btn_send_danmakus" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="@string/send_danmakus" /> </LinearLayout> </FrameLayout>
寫完布局,先寫一個初始化的方法:
//設置最大行數(shù) HashMap<Integer,Integer> maxLinesPair = new HashMap<>(); maxLinesPair.put(BaseDanmaku.TYPE_SCROLL_RL,5);//滾動彈幕最大顯示5行 //設置是否禁止重疊 HashMap<Integer, Boolean> overlappingEnablePair = new HashMap<>(); overlappingEnablePair.put(BaseDanmaku.TYPE_SCROLL_RL, true); overlappingEnablePair.put(BaseDanmaku.TYPE_FIX_TOP, true); mDanmakuContext = DanmakuContext.create();//初始化上下文 mDanmakuContext.setDanmakuStyle(IDisplayer.DANMAKU_STYLE_STROKEN,3);//設置彈幕類型 mDanmakuContext.setDuplicateMergingEnabled(false);//設置是否合并重復彈幕 mDanmakuContext.setScrollSpeedFactor(1.2f);//設置彈幕滾動速度 mDanmakuContext.setScaleTextSize(1.2f);//設置彈幕字體大小 mDanmakuContext.setCacheStuffer(new SpannedCacheStuffer(),mCacheStufferAdapter);//設置緩存繪制填充器 圖文混排使用SpannedCacheStuffer mDanmakuContext.setMaximumLines(maxLinesPair);//設置最大行數(shù) mDanmakuContext.preventOverlapping(overlappingEnablePair); //設置是否禁止重疊 mParser = createParser(this.getResources().openRawResource(R.raw.comments));//加載彈幕資源文件 mDvDanmaku.prepare(mParser, mDanmakuContext); mDvDanmaku.showFPS(true); mDvDanmaku.enableDanmakuDrawingCache(true);
再貼一下繪制填充器的實現(xiàn),主要實現(xiàn)了將圖片和文字排列在一起的效果
private SpannableStringBuilder createSpannable(Drawable drawable) { String text = "bitmap"; SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder(text); ImageSpan span = new ImageSpan(drawable); spannableStringBuilder.setSpan(span, 0, text.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE); spannableStringBuilder.append("圖文混排"); spannableStringBuilder.setSpan(new BackgroundColorSpan(Color.parseColor("#8A2233B1")), 0, spannableStringBuilder.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE); return spannableStringBuilder; }
在BaseDanmaku這個類下,定義了彈幕的基本運動形式:TYPE_SCROLL_RL、TYPE_SCROLL_LR、TYPE_FIX_TOP、TYPE_FIX_BOTTOM和TYPE_SPECIAL。也就是從右入左出、左入右出(逆向彈幕)、頂部彈幕、底部彈幕以及高級彈幕。(除此之外還有腳本彈幕)
在初始化的時候,需要傳入一個特有的彈幕上下文DanmukuContext,通過上下文來初始化一些設置。彈幕資源是保存在xml文件下的,大致格式如下:
.
<i> <chatserver>chat.bilibili.com</chatserver> <chatid>2962351</chatid> <mission>0</mission> <maxlimit>1500</maxlimit> <source>k-v</source> <d p="145.91299438477,1,25,16777215,1422201001,0,D6673695,757075520">我從未見過如此厚顏無恥之人</d> </i>
頭信息不需要太多關注,來看看d標簽下p對應參數(shù)的具體意義:
第一個:彈幕出現(xiàn)的時間
第二個:彈幕類型(1、從右至左;6、從左至右;5、頂部彈幕;4、底部彈幕;7、高級彈幕;8、腳本彈幕')
第三個:字號
第四個:顏色
第五個:時間戳
第六個:彈幕池ID
第七個:用戶hash值
第八個:彈幕id
以下是彈幕具體解析代碼
/** * 從彈幕文件中提起彈幕 * @param stream * @return */ private BaseDanmakuParser createParser(InputStream stream) { if (stream == null) { return new BaseDanmakuParser() { @Override protected Danmakus parse() { return new Danmakus(); } }; } ILoader loader = DanmakuLoaderFactory.create(DanmakuLoaderFactory.TAG_BILI);//創(chuàng)建一個BiliDanmakuLoader實例來加載彈幕流文件 try { loader.load(stream); } catch (IllegalDataException e) { e.printStackTrace(); } BaseDanmakuParser parser = new BiliDanmukuParser();//彈幕解析者 IDataSource<?> dataSource = loader.getDataSource(); parser.load(dataSource); return parser; }
具體解析方案:
String tagName = localName.length() != 0 ? localName : qName; tagName = tagName.toLowerCase(Locale.getDefault()).trim(); if (tagName.equals("d")) { String pValue = attributes.getValue("p"); // parse p value to danmaku String[] values = pValue.split(","); if (values.length > 0) { long time = (long) (Float.parseFloat(values[0]) * 1000); // 出現(xiàn)時間 int type = Integer.parseInt(values[1]); // 彈幕類型 float textSize = Float.parseFloat(values[2]); // 字體大小 int color = Integer.parseInt(values[3]) | 0xFF000000; // 顏色 item = mContext.mDanmakuFactory.createDanmaku(type, mContext); if (item != null) { item.setTime(time); item.textSize = textSize * (mDispDensity - 0.6f); item.textColor = color; item.textShadowColor = color <= Color.BLACK ? Color.WHITE : Color.BLACK; } } }
彈幕資源加載完畢后,就調(diào)用mDvDanmuku的prepare()方法,執(zhí)行準備。當準備完畢的時候,就會調(diào)用DrawHandler.CallBack()回調(diào)中的prepared方法。然后在這個prepared方法中正式讓彈幕啟動。調(diào)用順序如下:
mDvDanmaku.prepare(mParser, mDanmakuContext);//傳入解析完成的彈幕和上下文
然后執(zhí)行DanmukuView下的prepare()方法
private void prepare() { if (handler == null) handler = new DrawHandler(getLooper(mDrawingThreadType), this, mDanmakuVisible);//創(chuàng)建一個Handler }
通過這個Handler來實現(xiàn)進程間的通訊
handler.setConfig(config);
handler.setParser(parser);
handler.setCallback(mCallback);
handler.prepare();-》會讓handler發(fā)送一個message 去執(zhí)行正真的準備
DrawHandler中有一個回調(diào)
public interface Callback { public void prepared(); public void updateTimer(DanmakuTimer timer); public void danmakuShown(BaseDanmaku danmaku); public void drawingFinished(); }
真正的準備
mTimeBase = SystemClock.uptimeMillis(); if (mParser == null || !mDanmakuView.isViewReady()) {//沒有準備好,延時0.1秒后再執(zhí)行 sendEmptyMessageDelayed(PREPARE, 100); } else { prepare(new Runnable() { @Override public void run() { pausedPosition = 0; mReady = true; if (mCallback != null) { mCallback.prepared(); } } }); }
以上是彈幕View的啟動調(diào)用流程。
那么,怎么添加彈幕捏?元芳,你怎么看?(TM我怎么知道我怎么看)看下面
private void addDanmaku(boolean islive) { BaseDanmaku danmaku = mDanmakuContext.mDanmakuFactory.createDanmaku(BaseDanmaku.TYPE_SCROLL_RL);//添加一條從右到左的滾動彈幕 if (danmaku == null || mDvDanmaku == null) { return; } danmaku.text = "這是一條彈幕" + System.nanoTime(); danmaku.padding = 5; danmaku.priority = 0; // 可能會被各種過濾器過濾并隱藏顯示 設置為1的話,就一定會顯示 適用于本機發(fā)送的彈幕 danmaku.isLive = islive; danmaku.setTime(mDvDanmaku.getCurrentTime() + 1200); danmaku.textSize = 25f * (mParser.getDisplayer().getDensity() - 0.6f); danmaku.textColor = Color.RED;//默認設置為紅色字體 danmaku.textShadowColor = Color.WHITE; danmaku.borderColor = Color.GREEN;//為了區(qū)別其他彈幕與自己發(fā)的彈幕,再給自己發(fā)的彈幕加上邊框 mDvDanmaku.addDanmaku(danmaku); }
以上所述是小編給大家介紹的Android彈幕框架 黑暗火焰使,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- Android自定義View實現(xiàn)彈幕效果
- Android雙重SurfaceView實現(xiàn)彈幕效果
- Android實現(xiàn)視頻彈幕功能
- Android自制精彩彈幕效果
- Android EasyBarrage實現(xiàn)輕量級彈幕效果
- Android編程實現(xiàn)簡易彈幕效果示例【附demo源碼下載】
- 很棒的Android彈幕效果實例
- Android 實現(xiàn)仿網(wǎng)絡直播彈幕功能詳解及實例
- Android實現(xiàn)炫酷的網(wǎng)絡直播彈幕功能
- Android仿斗魚直播的彈幕效果
- Android實現(xiàn)自定義的彈幕效果
- 實例解析如何在Android應用中實現(xiàn)彈幕動畫效果
- Android簡單實現(xiàn)彈幕效果
相關文章
Android用注解與反射實現(xiàn)Butterknife功能
Butterknife是一個在android上實現(xiàn)ioc(控制反轉(zhuǎn))的一個庫。ioc的核心是解耦。解耦的目的是修改耦合對象時不影響另外一個對象,降低模塊之間的關聯(lián)。在Spring中ioc更多的是依靠xml的配置。而android上的IOC框架可以不使用xml配置2022-11-11Android中使用ZXing生成二維碼(支持添加Logo圖案)
ZXing是谷歌的一個開源庫,可以用來生成二維碼、掃描二維碼。接下來通過本文給大家介紹Android中使用ZXing生成二維碼(支持添加Logo圖案),需要的朋友參考下2017-01-01Android RecyclerView實現(xiàn)吸頂動態(tài)效果流程分析
RecyclerView是Android一個更強大的控件,其不僅可以實現(xiàn)和ListView同樣的效果,還有優(yōu)化了ListView中的各種不足。其可以實現(xiàn)數(shù)據(jù)縱向滾動,也可以實現(xiàn)橫向滾動(ListView做不到橫向滾動)。接下來講解RecyclerView的用法2022-12-12Android顏色處理SweepGradient掃描及梯度渲染示例
這篇文章主要為大家介紹了Android顏色處理SweepGradient掃描渲染及梯度渲染示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06Android 優(yōu)化之卡頓優(yōu)化的實現(xiàn)
這篇文章主要介紹了Android 優(yōu)化之卡頓優(yōu)化的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07Android中SharedPreference詳解及簡單實例
這篇文章主要介紹了 Android中SharedPreference詳解及簡單實例的相關資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09解決VSCode調(diào)試react-native android項目錯誤問題
這篇文章主要介紹了VSCode調(diào)試react-native android項目錯誤解決辦法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12Android開發(fā)基礎實現(xiàn)音頻文件的播放詳解
這篇文章主要為大家介紹了Android開發(fā)基礎實現(xiàn)音頻文件的播放詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02