Android直播中弹幕效果实现
来源:互联网 发布:时时彩源码大富豪 编辑:程序博客网 时间:2024/04/29 20:24
在B站或者其他视频网站看视频时,常常会打开弹幕效果,边看节目边看大家的吐槽。弹幕看起来很有意思,今天我们就来实现一个简单的弹幕效果。
从直观上,弹幕效果就是在一个ViewGroup上增加一些View,然后让这些View移动起来。所以,整体的实现思路大概是这样的:
1、定义一个RelativeLayout,在里面动态添加TextView。
2、这些TextView的字体大小、颜色、移动速度、初始位置都是随机的。
3、将TextView添加到RelativeLayout的右边缘,每隔一段时间添加一个。
4、对每个TextView做平移动画,使得TextView从右向左移动。
5、当TextView从左边移动出屏幕,将TextView从RelativeLayout中移除。
有了思路下面就来看具体的代码。
首先定义BarrageItem,用来存储每一个弹幕项的相关信息,包括字体内容、字体大小颜色、移动速度、垂直方向的位置、字体占据的宽度等。
- public class BarrageItem {
- public TextView textView;
- public int textColor;
- public String text;
- public int textSize;
- public int moveSpeed;//移动速度
- public int verticalPos;//垂直方向显示的位置
- public int textMeasuredWidth;//字体显示占据的宽度
- }
public class BarrageItem { public TextView textView; public int textColor; public String text; public int textSize; public int moveSpeed;//移动速度 public int verticalPos;//垂直方向显示的位置 public int textMeasuredWidth;//字体显示占据的宽度}
然后定义BarrageView,由于弹幕的字体颜色大小和移动速度都是随机的,需要定义最大最小值来限定它们的范围,然后通过产生随机数来设置它们在这个范围内的值。另外还需要定义弹幕的文本内容,这里是直接写死的一些固定值。
- private Context mContext;
- private BarrageHandler mHandler = new BarrageHandler();
- private Random random = new Random(System.currentTimeMillis());
- private static final long BARRAGE_GAP_MIN_DURATION = 1000;//两个弹幕的最小间隔时间
- private static final long BARRAGE_GAP_MAX_DURATION = 2000;//两个弹幕的最大间隔时间
- private int maxSpeed = 10000;//速度,ms
- private int minSpeed = 5000;//速度,ms
- private int maxSize = 30;//文字大小,dp
- private int minSize = 15;//文字大小,dp
- private int totalHeight = 0;
- private int lineHeight = 0;//每一行弹幕的高度
- private int totalLine = 0;//弹幕的行数
- private String[] itemText = {“是否需要帮忙”, “what are you 弄啥来”, “哈哈哈哈哈哈哈”, “抢占沙发。。。。。。”, “************”, “是否需要帮忙”,“我不会轻易的狗带”, “嘿嘿”, “这是我见过的最长长长长长长长长长长长的评论”};
- private int textCount;
- // private List<BarrageItem> itemList = new ArrayList<BarrageItem>();
- public BarrageView(Context context) {
- this(context, null);
- }
- public BarrageView(Context context, AttributeSet attrs) {
- this(context, attrs, 0);
- }
- public BarrageView(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr);
- mContext = context;
- init();
- }
private Context mContext; private BarrageHandler mHandler = new BarrageHandler(); private Random random = new Random(System.currentTimeMillis()); private static final long BARRAGE_GAP_MIN_DURATION = 1000;//两个弹幕的最小间隔时间 private static final long BARRAGE_GAP_MAX_DURATION = 2000;//两个弹幕的最大间隔时间 private int maxSpeed = 10000;//速度,ms private int minSpeed = 5000;//速度,ms private int maxSize = 30;//文字大小,dp private int minSize = 15;//文字大小,dp private int totalHeight = 0; private int lineHeight = 0;//每一行弹幕的高度 private int totalLine = 0;//弹幕的行数 private String[] itemText = {"是否需要帮忙", "what are you 弄啥来", "哈哈哈哈哈哈哈", "抢占沙发。。。。。。", "************", "是否需要帮忙","我不会轻易的狗带", "嘿嘿", "这是我见过的最长长长长长长长长长长长的评论"}; private int textCount;// private List<BarrageItem> itemList = new ArrayList<BarrageItem>(); public BarrageView(Context context) { this(context, null); } public BarrageView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public BarrageView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mContext = context; init(); }
如果弹幕显示的垂直位置是随机的,就会出现垂直方向上弹幕重叠的情况,所以需要根据高度对垂直方向按照弹幕高度的最大值等分,然后让弹幕在这些指定的垂直位置随机分布。这个值在onWindowFocusChanged里计算,因为在这个方法中通过View的getMeasuredHeight()得到的高度不为空。
- @Override
- public void onWindowFocusChanged(boolean hasWindowFocus) {
- super.onWindowFocusChanged(hasWindowFocus);
- totalHeight = getMeasuredHeight();
- lineHeight = getLineHeight();
- totalLine = totalHeight / lineHeight;
- }
@Override public void onWindowFocusChanged(boolean hasWindowFocus) { super.onWindowFocusChanged(hasWindowFocus); totalHeight = getMeasuredHeight(); lineHeight = getLineHeight(); totalLine = totalHeight / lineHeight; }
通过Handler的sendEmptyMessageDelayed每隔随机的时间产生一个弹幕项。下面的代码设置弹幕项的属性。
- class BarrageHandler extends Handler {
- @Override
- public void handleMessage(Message msg) {
- super.handleMessage(msg);
- generateItem();
- //每个弹幕产生的间隔时间随机
- int duration = (int) ((BARRAGE_GAP_MAX_DURATION - BARRAGE_GAP_MIN_DURATION) * Math.random());
- this.sendEmptyMessageDelayed(0, duration);
- }
- }
- private void generateItem() {
- BarrageItem item = new BarrageItem();
- String tx = itemText[(int) (Math.random() * textCount)];
- int sz = (int) (minSize + (maxSize - minSize) * Math.random());
- item.textView = new TextView(mContext);
- item.textView.setText(tx);
- item.textView.setTextSize(sz);
- item.textView.setTextColor(Color.rgb(random.nextInt(256), random.nextInt(256), random.nextInt(256)));
- item.textMeasuredWidth = (int) getTextWidth(item, tx, sz);
- item.moveSpeed = (int) (minSpeed + (maxSpeed - minSpeed) * Math.random());
- if (totalLine == 0) {
- totalHeight = getMeasuredHeight();
- lineHeight = getLineHeight();
- totalLine = totalHeight / lineHeight;
- }
- item.verticalPos = random.nextInt(totalLine) * lineHeight;
- showBarrageItem(item);
- }
class BarrageHandler extends Handler { @Override public void handleMessage(Message msg) { super.handleMessage(msg); generateItem(); //每个弹幕产生的间隔时间随机 int duration = (int) ((BARRAGE_GAP_MAX_DURATION - BARRAGE_GAP_MIN_DURATION) * Math.random()); this.sendEmptyMessageDelayed(0, duration); } } private void generateItem() { BarrageItem item = new BarrageItem(); String tx = itemText[(int) (Math.random() * textCount)]; int sz = (int) (minSize + (maxSize - minSize) * Math.random()); item.textView = new TextView(mContext); item.textView.setText(tx); item.textView.setTextSize(sz); item.textView.setTextColor(Color.rgb(random.nextInt(256), random.nextInt(256), random.nextInt(256))); item.textMeasuredWidth = (int) getTextWidth(item, tx, sz); item.moveSpeed = (int) (minSpeed + (maxSpeed - minSpeed) * Math.random()); if (totalLine == 0) { totalHeight = getMeasuredHeight(); lineHeight = getLineHeight(); totalLine = totalHeight / lineHeight; } item.verticalPos = random.nextInt(totalLine) * lineHeight; showBarrageItem(item); }
将每一个弹幕项添加到视图上,并给View添加一个TranslateAnimation动画,当动画结束时,将View从视图上移除。
- private void showBarrageItem(final BarrageItem item) {
- int leftMargin = this.getWidth();
- LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
- params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
- params.topMargin = item.verticalPos;
- this.addView(item.textView, params);
- Animation anim = generateTranslateAnim(item, leftMargin);
- anim.setAnimationListener(new Animation.AnimationListener() {
- @Override
- public void onAnimationStart(Animation animation) {
- }
- @Override
- public void onAnimationEnd(Animation animation) {
- item.textView.clearAnimation();
- BarrageView.this.removeView(item.textView);
- }
- @Override
- public void onAnimationRepeat(Animation animation) {
- }
- });
- item.textView.startAnimation(anim);
- }
- private TranslateAnimation generateTranslateAnim(BarrageItem item, int leftMargin) {
- TranslateAnimation anim = new TranslateAnimation(leftMargin, -item.textMeasuredWidth, 0, 0);
- anim.setDuration(item.moveSpeed);
- anim.setInterpolator(new AccelerateDecelerateInterpolator());
- anim.setFillAfter(true);
- return anim;
- }
private void showBarrageItem(final BarrageItem item) { int leftMargin = this.getWidth(); LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.addRule(RelativeLayout.ALIGN_PARENT_TOP); params.topMargin = item.verticalPos; this.addView(item.textView, params); Animation anim = generateTranslateAnim(item, leftMargin); anim.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { item.textView.clearAnimation(); BarrageView.this.removeView(item.textView); } @Override public void onAnimationRepeat(Animation animation) { } }); item.textView.startAnimation(anim); } private TranslateAnimation generateTranslateAnim(BarrageItem item, int leftMargin) { TranslateAnimation anim = new TranslateAnimation(leftMargin, -item.textMeasuredWidth, 0, 0); anim.setDuration(item.moveSpeed); anim.setInterpolator(new AccelerateDecelerateInterpolator()); anim.setFillAfter(true); return anim; }这样就完成了弹幕的功能,实现原理并不复杂。可以根据具体的需求来增加更多的控制,如控制每一行弹幕不重复,控制弹幕移动的Interpolator产生不同的滑动效果等等。
源码下载
0 0
- Android直播中弹幕效果实现
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- Oracle的存储过程编程
- span
- Left join --案例1
- Java Socket应用(一)
- 浏览器拉起应用,获取参数
- Android直播中弹幕效果实现
- React Native Windows 10 搭建步骤
- golang vendor介绍
- CompletionService 简介(异步)
- java Callable和Future并发调用,并且返回结果小例子
- 数组指针
- display : -webkit-box-inline 我见
- 量化分析师的Python日记【Q Quant 之初出江湖】
- Linux-Qt Quick学习1-Hello world