前言
过去几个星期每天下班后除了看视频学习就是写弹幕库了,想法来源于去年看到QQ空间里面的支持弹幕的图片预览,心血来潮就想实现一个,最终完成了Muti-Barrage。
先看效果:
1. 单视图弹幕
2. 多视图弹幕
最后,我将它集成在我的图片预览库中,一款仿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.4'
}
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碰撞检测
.setRepeat(-1) // 循环播放次数 默认为1次 -1 为无限循环
.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:https://github.com/mCyp/Muti-Barrage
如果觉得还不错,欢迎Star,如果发现有什么问题,也欢迎提交issues。