前言
更多代码，请查看我的github：https://github.com/shuaijia/JsPlayer ，喜欢的话就给个star！^_^
现在越来越多的视频网站或者客户端支持弹幕功能，弹幕功能似乎也成了很多人的爱好，发弹幕，看弹幕成了大家吐槽、搞笑、发表看法的一种方式。
而国内弹幕的鼻祖应该就算A站和B站了。
弹幕（barrage），中文流行词语，原意指用大量或少量火炮提供密集炮击。而弹幕，顾名思义是指子弹多而形成的幕布，大量吐槽评论从屏幕飘过时效果看上去像是飞行射击游戏里的弹幕。
最近一直在写视频播放器，那弹幕怎么能少得了呢！所以把自己开发弹幕功能的思路写出来与大家分享。
依旧还是先上效果图：
大体思路
我们的目标是将各式各样的itemView展示到播放器上方，并且使之滚动起来，itemView支持自定义，这样看起来和ListView的功能很相像，但与之不一样的是，弹幕是多行多列，需要计算每个itemView的位置，且一直在滚动。
所以，我采用适配器模式，仿ListView的Adapter来实现弹幕功能。 想到这里，很多人就会觉得这不典型的横向瀑布流嘛，用RecyclerView或者flexbox很轻松就实现了。
但我想自己从设计模式、实现原理来考虑、设计，从而也可以更深刻地理解适配器模式和ListView的原理，如果您想使用RecyclerView来实现，可以自己试试。
关键：
- 使用适配器模式将各式各样的itemView进行适配、处理、展示
- 使用hadler定时发送消息使itemView滚动
- itemView最佳位置的计算
- 滚动区域的设置
接下来就一起来实现：
1、实体类
实体类当然不能少了：
代码语言：javascript复制/**
* Description: 弹幕实体类
* Created by jia on 2017/9/25.
* 人之所以能，是相信能
*/
public class DanmuModel {
private int type;
public int getType() {
return type;
}
public void setType(int type) {
this.type = type;
}
}其中的type是model实体类的类型，因为弹幕的itemView中会有多种类型，对应不同type的实体类。
使用时可以自己定义实体类，继承自DanmuModel ，也可以不继承，只要能区分不同类型就可以：因为自己稍后的adapter中没有像ListView的Adapter一样定义了获取item类型的方法，所以就在getView方法中依据type选择不同的itemView即可。
2、BaseAdapter
首先Adapter定义为抽象类，且设置泛型M，M就是对应的实体类。
在Adapter中定义三个抽象方法：
- getViewTypeArray ：获取itemView的类型type组成的数组
- getSingleLineHeight ：获取单行itemView的高度
- getView ：获取itemView，功能类似于ListView的Adapter中getView方法
public abstract class DanmuAdapter<M> {
/**
* 获取类型数组
*
* @return
*/
public abstract int[] getViewTypeArray();
/**
* 获取单行弹幕 高度
*
* @return
*/
public abstract int getSingleLineHeight();
/**
* 获取itemView
*
* @param entry
* @param convertView
* @return
*/
public abstract View getView(M entry, View convertView);
}这样适配器抽象类就定义好了嘛？不是的！
在显示弹幕的时候会，会创建大量的View对象，如果不做处理，很容易造成内存溢出，所以我们要进行缓存优化：
A、首先创建了map集合
代码语言：javascript复制// 使用HashMap，以类型和对应view的栈为key-value存储，实现缓存
private HashMap<Integer, Stack<View>> cacheViews;以view的类型为key，对应的view存入栈中，以栈为value。
B、构造中
代码语言：javascript复制public DanmuAdapter() {
cacheViews = new HashMap<>();
typeArray = getViewTypeArray();
for (int i = 0; i < typeArray.length; i ) {
Stack<View> stack = new Stack<>();
cacheViews.put(typeArray[i], stack);
}
}获取itemView类型数组，循环创建对应type的栈。
C、itemView加入缓存
代码语言：javascript复制/**
* 将弹幕itemView加入缓存（压栈）
*
* @param type
* @param view
*/
synchronized public void addViewToCache(int type, View view) {
if (cacheViews.containsKey(type)) {
cacheViews.get(type).push(view);
} else {
throw new Error("your cache has not this type");
}
}D、将itemView移出缓存
代码语言：javascript复制/**
* 将itemView移出缓存（弹栈）
*
* @param type
* @return
*/
synchronized public View removeViewFromCache(int type) {
if (cacheViews.containsKey(type) && cacheViews.get(type).size() > 0)
return cacheViews.get(type).pop();
else
return null;
}E、减小缓存大小
代码语言：javascript复制/**
* 减小缓存大小
*/
public void shrinkCacheSize() {
int[] typeArray = getViewTypeArray();
for (int i = 0; i < typeArray.length; i ) {
if (cacheViews.containsKey(typeArray[i])) {
Stack<View> typeStack = cacheViews.get(typeArray[i]);
int length = typeStack.size();
// 循环弹栈，直到大小变为原来一半
while (typeStack.size() > (int) (length / 2.0 0.5)) {
typeStack.pop();
}
cacheViews.put(typeArray[i], typeStack);
}
}
}F、获取缓存大小
代码语言：javascript复制/**
* 获取缓存大小
*
* @return
*/
public int getCacheSize() {
int size = 0;
int[] types = getViewTypeArray();
for (int i = 0; i < types.length; i ) {
size = size cacheViews.get(types[i]).size();
}
return size;
}ok，到这里BaseAdapter就封装完成了
3、DanmuView
继承自ViewGroup，重写其三个构造方法是必然的。不再累赘
A、变量、以及get/set方法
代码语言：javascript复制// 移动速度
public static final int LOWER_SPEED = 1;
public static final int NORMAL_SPEED = 4;
public static final int HIGH_SPEED = 8;
// 出现位置
public final static int GRAVITY_TOP = 1; //001
public final static int GRAVITY_CENTER = 2; //010
public final static int GRAVITY_BOTTOM = 4; //100
public final static int GRAVITY_FULL = 7; //111
private int gravity = GRAVITY_FULL;
private int speed = 4;
private int spanCount = 6;
private int WIDTH, HEIGHT;
private int singltLineHeight;
private DanmuAdapter adapter;
public List<View> spanList;
private OnItemClickListener onItemClickListener;首先要有这样一个思路，在适配器中抽取出方法，返回itemView的高度，在弹幕View中根据弹幕绘制区域高度，除以itemView的高度，算出合理的弹幕行数（这里大家也理解了为什么在写适配器的时候要定义getSingleLineHeight()方法了）。
B、再次封装实体类
这里只是简单得将传进来的实体类DanmuModel与计算出的对应的最佳行数进行封装。
代码语言：javascript复制class InnerEntity {
public int bestLine;
public DanmuModel model;
}C、设置Adapter
代码语言：javascript复制public void setAdapter(DanmuAdapter adapter) {
this.adapter = adapter;
singltLineHeight = adapter.getSingleLineHeight();
// 开线程使弹幕滚动起来，稍后会介绍
}D、计算最佳位置
关键的来了，先上代码
代码语言：javascript复制 /**
* 计算最佳位置
*
* @return
*/
private int getBestLine() {
// 转换为2进制
int gewei = gravity % 2;
int temp = gravity / 2;
int shiwei = temp % 2;
temp = temp / 2;
int baiwei = temp % 2;
// 将所有的行分为三份,前两份行数相同,将第一份的行数四舍五入
int firstLine = (int) (spanCount / 3.0 0.5);
List<Integer> legalLines = new ArrayList<>();
if (gewei == 1) {
for (int i = 0; i < firstLine; i ) {
legalLines.add(i);
}
}
if (shiwei == 1) {
for (int i = firstLine; i < firstLine * 2; i ) {
legalLines.add(i);
}
}
if (baiwei == 1) {
for (int i = firstLine * 2; i < spanCount; i ) {
legalLines.add(i);
}
}
int bestLine = 0;
// 如果有空行,将空行返回
for (int i = 0; i < spanCount; i ) {
if (spanList.get(i) == null) {
bestLine = i;
if (legalLines.contains(bestLine))
return bestLine;
}
}
float minSpace = Integer.MAX_VALUE;
// 没有空行，就找最大空间的
for (int i = spanCount - 1; i >= 0; i--) {
if (legalLines.contains(i)) {
if (spanList.get(i).getX() spanList.get(i).getWidth() <= minSpace) {
minSpace = spanList.get(i).getX() spanList.get(i).getWidth();
bestLine = i;
}
}
}
return bestLine;
}不知是否有注意到，在定义显示位置的常亮的时候，只用了1，2，4，7，因为它们转化为二进制数为001，010，100，111，这里用了一个巧妙的思路，三位数代表屏幕三个位置，0表示不显示弹幕，1表示显示弹幕（有没有豁然开朗）
大家可以参照代码来看，计算最佳位置的思路是这样的：
- 将设置的位置转为二进制数，判断显示位置
- 将所有的行分为三份,前两份行数相同,将第一份的行数四舍五入，将所有要显示弹幕的行数放入一集合中
- 由上至下循环判断是否有空行，有空行则直接返回，此行就是这个itemView的最佳位置
- 没有空行的话，由下至上寻找最大空间返回，就是该itemView的最佳位置
E、根据类型设置View
代码语言：javascript复制 /**
* 添加view
*/
public void addTypeView(DanmuModel model, View child, boolean isReused) {
super.addView(child);
child.measure(0, 0);
//把宽高拿到，宽高都是包含ItemDecorate的尺寸
int width = child.getMeasuredWidth();
int height = child.getMeasuredHeight();
//获取最佳行数
int bestLine = getBestLine();
// 设置子view位置
child.layout(WIDTH, singltLineHeight * bestLine, WIDTH width, singltLineHeight * bestLine height);
InnerEntity innerEntity = null;
innerEntity = (InnerEntity) child.getTag(R.id.tag_inner_entity);
if (!isReused || innerEntity == null) {
innerEntity = new InnerEntity();
}
innerEntity.model = model;
innerEntity.bestLine = bestLine;
child.setTag(R.id.tag_inner_entity, innerEntity);
spanList.set(bestLine, child);
}这里就不多说了，将itemView的model与最佳位置对应起来并设置位置；
然后将spanList（itemView集合）对应view设置进去。
一定要注意：super.addView(child); child.measure(0, 0); 这两句话不能少！
F、添加弹幕
代码语言：javascript复制 /**
* 添加弹幕view
*
* @param model
*/
public void addDanmu(final DanmuModel model) {
if (adapter == null) {
throw new Error("DanmuAdapter(an interface need to be implemented) can't be null,you should call setAdapter firstly");
}
View dmView = null;
if (adapter.getCacheSize() >= 1) {
dmView = adapter.getView(model, adapter.removeViewFromCache(model.getType()));
if (dmView == null)
addTypeView(model, dmView, false);
else
addTypeView(model, dmView, true);
} else {
dmView = adapter.getView(model, null);
addTypeView(model, dmView, false);
}
//添加监听
dmView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(onItemClickListener != null)
onItemClickListener.onItemClick(model);
}
});
}此方法则是暴露外部的设置弹幕view的方法，这里注意一下，itemView有缓存就复用，没缓存就不复用，就ok了。
G、子线程计算时间，发送消息，handler处理view平移
代码语言：javascript复制 private class MyRunnable implements Runnable {
@Override
public void run() {
int count = 0;
Message msg = null;
while(true){
if(count < 7500){
count ;
}
else{
count = 0;
if(DanmuView.this.getChildCount() < adapter.getCacheSize() / 2){
adapter.shrinkCacheSize();
System.gc();
}
}
if(DanmuView.this.getChildCount() >= 0){
msg = new Message();
msg.what = 1; //移动view
handler.sendMessage(msg);
}
try {
Thread.sleep(16);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}这里注意： Adapter缓存过大要及时清理； 每隔16毫秒让itemView位置刷新一次，这样视觉效果好一些； 在setAdapter中开启线程 new Thread(new MyRunnable()).start();
代码语言：javascript复制 Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (msg.what == 1) {
for(int i=0;i<DanmuView.this.getChildCount();i ){
View view = DanmuView.this.getChildAt(i);
if(view.getX() view.getWidth() >= 0)
// 向左滑动
view.offsetLeftAndRight(0 - speed);
else{
//添加到缓存中
int type = ((InnerEntity)view.getTag(R.id.tag_inner_entity)).model.getType();
adapter.addViewToCache(type,view);
DanmuView.this.removeView(view);
}
}
}
}
};不再累赘，如果阅读完整代码，可以到我github查看源码和issue我^_^https://github.com/shuaijia/JsPlayer
使用举例：
1、实体类
代码语言：javascript复制/**
* Description:弹幕实体类
* Created by jia on 2017/9/25.
* 人之所以能，是相信能
*/
public class MyDanmuModel extends DanmuModel {
public String content;
public int textColor;
public String time;
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public int getTextColor() {
return textColor;
}
public void setTextColor(int textColor) {
this.textColor = textColor;
}
}2、适配器
代码语言：javascript复制/**
* Description: 弹幕适配器
* Created by jia on 2017/9/25.
* 人之所以能，是相信能
*/
public class MyDanmuAdapter extends DanmuAdapter<MyDanmuModel> {
private Context context;
public MyDanmuAdapter(Context c){
super();
context = c;
}
@Override
public int[] getViewTypeArray() {
int type[] = {0};
return type;
}
@Override
public int getSingleLineHeight() {
View view = LayoutInflater.from(context).inflate(R.layout.item_danmu, null);
//指定行高
view.measure(0, 0);
return view.getMeasuredHeight();
}
@Override
public View getView(MyDanmuModel entry, View convertView) {
ViewHolder vh=null;
if(convertView==null){
convertView= LayoutInflater.from(context).inflate(R.layout.item_danmu,null);
vh=new ViewHolder();
vh.tv=convertView.findViewById(R.id.tv_danmu);
convertView.setTag(vh);
}else{
vh= (ViewHolder) convertView.getTag();
}
vh.tv.setText(entry.getContent());
vh.tv.setTextColor(entry.getTextColor());
return convertView;
}
class ViewHolder{
TextView tv;
}
}有木有很像ListView的Adapter！ 相信大家一看就能明白，就不再多说。
3、配置基本信息
代码语言：javascript复制jsplayer_danmu.setDanMuAdapter(new MyDanmuAdapter(this));
jsplayer_danmu.setDanMuGravity(3);
jsplayer_danmu.setDanMuSpeed(DanmuView.NORMAL_SPEED);4、创建实体类并设置给DanmuView
代码语言：javascript复制MyDanmuModel danmuEntity = new MyDanmuModel();
danmuEntity.setType(0);
danmuEntity.setContent(DANMU[random.nextInt(8)]);
danmuEntity.setTextColor(COLOR[random.nextInt(4)]);
jsplayer_danmu.addDanmu(danmuEntity);
