Muti-Barrage 一個多功能的Android彈幕庫

IAmMyHero發表於2019-04-16
Android

前言

過去幾個星期每天下班後除了看視訊學習就是寫彈幕庫了，想法來源於去年看到QQ空間裡面的支援彈幕的圖片預覽，心血來潮就想實現一個，最終完成了Muti-Barrage。 先看效果： 1. 單檢視彈幕

單檢視彈幕
2. 多檢視彈幕
多檢視彈幕.gif
最後，我將它整合在我的圖片預覽庫中，一款仿QQ空間的圖片預覽庫：PhotoPagerView
彈幕功能的圖片預覽

一、功能

Muti-Barrage支援的功能：

  • 自定義多檢視
  • 設定傳送間隔
  • 碰撞檢測（多檢視情況下還存在問題）
  • 觸控事件處理
  • 支援全屏和上中下顯示

二、使用

1. 新增依賴

先在build.gradle(Project:xxx)的repositories中新增：

  allprojects {
    repositories {
        google()// 不翻牆可以註釋掉
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}
複製程式碼

然後在 build.gradle(Module:app) 的 dependencies 新增:

 dependencies {
    ...
   
    /*需要新增的依賴 這裡可以檢視一下上面的最新版本*/
    implementation 'com.jieWang:Muti-Barrage:1.0.3'
 }
複製程式碼

2. 使用

使用方法有點跟RecyclerView相似，可自由定製也造成了使用成本的上升，沒辦法～ 第一步：新增進佈局檔案

<com.orient.tea.barragephoto.ui.BarrageView
            android:id="@+id/barrage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
複製程式碼

第二步：構建自己的彈幕資料型別實現DataSource介面

public class BarrageData implements DataSource {
    		...
    		@Override
        public int getType() {
            return type;
        }
    
        // 如果需要，通常是不需要的，後續會刪除
        @Override
        public long getShowTime() {
            return 0;
        }
}
複製程式碼

第三步：獲取BarrageView並初始化引數

private BarrageView barrageView;
    
...
      
barrageView = findViewById(xxx);
BarrageView.Options options = new BarrageView.Options()
         .setGravity(BarrageView.GRAVITY_TOP)                // 設定彈幕的位置
         .setInterval(50)                                     // 設定彈幕的傳送間隔
         .setSpeed(200,29)                   // 設定速度和波動值
         .setModel(BarrageView.MODEL_COLLISION_DETECTION)     // 設定彈幕模式 隨機生成or碰撞檢測
         .setClick(false);                                    // 設定彈幕是否可以點選
barrageView.setOptions(options);
複製程式碼

第四步：建立ViewHolder，實現BarrageViewHolder介面（後面多處需要加範型）

// 在多檢視彈幕中自己需要構建多個型別ViewHolder
class ViewHolder extends BarrageAdapter.BarrageViewHolder<BarrageData> {
            public ViewHolder(View itemView) {
                super(itemView);
            }
    
            @Override
            protected void onBind(BarrageData data) {
                ...// 自己想在ViewHolder中對Ui的處理
            }
}
複製程式碼

第五步：設定介面卡建立介面卡，需要加上範型（第二部實現的資料型別）

private BarrageAdapter<BarrageData> mAdapter;
複製程式碼

單檢視

barrageView.setAdapter(mAdapter = new BarrageAdapter<BarrageData>(null, this) {
                @Override
                public BarrageViewHolder<BarrageData> onCreateViewHolder(View root, int type) {
                    return new SingleBarrageActivity.ViewHolder(root);// 返回自己建立的ViewHolder
                }
    
                @Override
                public int getItemLayout(BarrageData barrageData) {
                    return R.layout.barrage_item_normal;// 返回自己設定的佈局檔案
                }
});
複製程式碼

多檢視要麻煩一點（可以檢視示例程式碼）

// 設定介面卡 第一個引數是點選事件的監聽器
barrageView.setAdapter(mAdapter = new BarrageAdapter<BarrageData>(null, this) {
                @Override
                public BarrageViewHolder<BarrageData> onCreateViewHolder(View root, int type) {
                    switch (type) {// 這裡的type指的我們設定的子佈局檔案，然後設定ViewHolder
                        ... // 不同的佈局檔案構建不同的ViewHolder
                    }
                }
    
                @Override
                public int getItemLayout(BarrageData barrageData) {
                    switch (barrageData.getType()) {// 根據彈幕資料中的type設定子佈局檔案
                        ... // 不同的彈幕型別返回不同的佈局檔案
                    }
                }
});
複製程式碼

如果需要設定彈幕觸控事件，第三步中BarrageView.Options必須得設定可點選

// 設定監聽器
mAdapter.setAdapterListener(new AdapterListener<BarrageData>() {
                @Override
                public void onItemClick(BarrageAdapter.BarrageViewHolder<BarrageData> holder, BarrageData item) {
                  ...
                }
});
複製程式碼

三、待更

本週末會更一篇如何實現彈幕庫，敬請期待～ 如果您發現了什麼問題，還請指教。

Muti-Barrage:github.com/mCyp/Muti-B…

相關文章