Android彈幕框架 黑暗火焰使

今天我將分享由BiliBili開源的Android彈幕框架（DanmakuFlameMaster）的學習經驗。

我是將整個框架以model的形式引入項目中的，這樣更方便的觀察源碼。也可以通過依賴的方式注入進來

 

dependencies {
    compile 'com.github.ctiao:DanmakuFlameMaster:0.5.3'
}

先放一下我要做成的效果圖：

 

頁面分析

從上圖來看，整個UI分成了三層。最下面是視頻層，中間是彈幕層，頂層是控制層。現在市場上主流的視頻直播軟件大多都是這樣分層的，不同的是直播類的話，可能還會再多一層交互層，顯示簽到信息、禮物信息什麼的。

既然是分層的話，我就直接用FrameLayout幀布局來實現了。貼一下我的布局文件：

 

<framelayout android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android">

    

    

    

</framelayout>

控制層的布局：

 

 

<framelayout android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android">

    </framelayout>

寫完布局，先寫一個初始化的方法：

 

 

        //設置最大行數
        HashMap maxLinesPair = new HashMap<>();
        maxLinesPair.put(BaseDanmaku.TYPE_SCROLL_RL,5);//滾動彈幕最大顯示5行
        //設置是否禁止重疊
        HashMap 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);//設置最大行數
        mDanmakuContext.preventOverlapping(overlappingEnablePair); //設置是否禁止重疊
        mParser = createParser(this.getResources().openRawResource(R.raw.comments));//加載彈幕資源文件
        mDvDanmaku.prepare(mParser, mDanmakuContext);
        mDvDanmaku.showFPS(true);
        mDvDanmaku.enableDanmakuDrawingCache(true);

 

再貼一下繪制填充器的實現，主要實現了將圖片和文字排列在一起的效果

 

    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文件下的，大致格式如下：

.

    chat.bilibili.com
    2962351
    0
    1500
    k-v
    我從未見過如此厚顏無恥之人

頭信息不需要太多關注，來看看d標簽下p對應參數的具體意義：

 

第一個：彈幕出現的時間

第二個：彈幕類型（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);//創建一個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); // 出現時間
                    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;
                    }
                }
            }

彈幕資源加載完畢後，就調用mDvDanmuku的prepare（）方法，執行准備。當准備完畢的時候，就會調用DrawHandler.CallBack()回調中的prepared方法。然後在這個prepared方法中正式讓彈幕啟動。調用順序如下：

 

 

mDvDanmaku.prepare(mParser, mDanmakuContext);//傳入解析完成的彈幕和上下文

 

然後執行DanmukuView下的prepare()方法

 

    private void prepare() {
        if (handler == null)
            handler = new DrawHandler(getLooper(mDrawingThreadType), this, mDanmakuVisible);//創建一個Handler
    }

通過這個Handler來實現進程間的通訊

 

 

        handler.setConfig(config);
        handler.setParser(parser);
        handler.setCallback(mCallback);
        handler.prepare();-》會讓handler發送一個message  去執行正真的准備

DrawHandler中有一個回調

    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秒後再執行
                    sendEmptyMessageDelayed(PREPARE, 100);
                } else {
                    prepare(new Runnable() {
                        @Override
                        public void run() {
                            pausedPosition = 0;
                            mReady = true;
                            if (mCallback != null) {
                                mCallback.prepared();
                            }
                        }
                    });
                }

以上是彈幕View的啟動調用流程。
那麼，怎麼添加彈幕捏？元芳，你怎麼看？（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的話，就一定會顯示  適用於本機發送的彈幕
        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;//為了區別其他彈幕與自己發的彈幕，再給自己發的彈幕加上邊框
        mDvDanmaku.addDanmaku(danmaku);
    }

以上，就是黑暗火焰使基本使用方法。