Android弹幕编程设计实现的解决方案（一）

小鱼儿 2023-10-17 08:05 6阅读 0赞

**Android弹幕编程设计实现的解决方案（一）**

在现在的一些视频类网站、视频类直播网站，比如A站和B站，当视频在播放的时候，会在屏幕上出现一些滚动的字幕，这些字幕是UGC，通常是用户的评论，称之为“弹幕”，这些弹幕一般从右往左滚动，以符合人类的阅读习惯。  
现在给出一个实现Android平台上的弹幕编程设计实现方案。  
（1）要注意的是，一般视频播放是一个view，比如是VideoView，弹幕是在VideoView上面滚动，这就要求弹幕必须和VideoView完全密合在一起，至少在视觉上让用户看上去觉得这就是直接在视频画面上写上去的。那么在下面的这个例子中，就干脆直接继承自一个相对布局RelativeLayout。因为是一个布局文件，如果使用VideoView这类的播放器，就好办了，直接设置view的layout宽和高均为match\_parent即可。  
（2）弹幕一般是随机批量显示。我观察了一些热门网站的弹幕显示，它们是随机的，我在处理弹幕字幕文本时候，设计了一个set方法，一次性批量喂给弹幕一个数据池子（实际上就是在弹幕类里面的一个LinkedList数据队列texts），让弹幕从这些池子中每次随机抽出一个显示。假设上层应用的文本有更新（比如用户有新的评论添加进来），直接追加到队列头部。

以下是全部源代码实现。  
核心关键的弹幕相对布局BarrageRelativeLayout.java：

package zhangphil.demo;
    
    import android.content.Context;
    import android.graphics.Color;
    import android.graphics.Rect;
    import android.os.Handler;
    import android.os.Message;
    import android.text.TextPaint;
    import android.util.AttributeSet;
    import android.view.animation.AccelerateDecelerateInterpolator;
    import android.view.animation.Animation;
    import android.view.animation.TranslateAnimation;
    import android.widget.RelativeLayout;
    import android.widget.TextView;
    
    import java.util.LinkedList;
    import java.util.Random;
    
    public class BarrageRelativeLayout extends RelativeLayout {
    
        private Context mContext;
    
        private Handler mHandler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
    
                if(msg.what==RANDOM_SHOW) {
                    String text = texts.get(random.nextInt(texts.size()));
                    BarrageTextItem item = new BarrageTextItem(text);
                    showBarrageItem(item);
    
                    //每个弹幕产生的间隔时间随机
                    int duration = (int) ((BARRAGE_GAP_MAX_DURATION - BARRAGE_GAP_MIN_DURATION) * Math.random());
                    this.sendEmptyMessageDelayed(RANDOM_SHOW, duration);
                }
    
    
            }
        };
    
        public static int RANDOM_SHOW=0x0a1;
        public static int SEQ_SHOW=0x0a2;
    
        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 LinkedList<String> texts = null;
    
        public BarrageRelativeLayout(Context context) {
            this(context, null);
        }
    
        public BarrageRelativeLayout(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public BarrageRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            mContext = context;
    
            init();
        }
    
        private void init() {
            texts = new LinkedList<String>();
        }
    
        public void show(int type){
            int duration = (int) ((BARRAGE_GAP_MAX_DURATION - BARRAGE_GAP_MIN_DURATION) * Math.random());
            mHandler.sendEmptyMessageDelayed(type, duration);
        }
    
        //显示一批弹幕文本
        //相当于给弹幕设置数据源
        public void setBarrageTexts(LinkedList<String> texts) {
            this.texts = texts;
        }
    
        //头部第一个位置追加，最新的。
        public void addBarrageText(String text) {
            this.texts.add(0,text);
        }
    
        @Override
        public void onWindowFocusChanged(boolean hasWindowFocus) {
            super.onWindowFocusChanged(hasWindowFocus);
            totalHeight = getMeasuredHeight();
            lineHeight = getLineHeight();
            totalLine = totalHeight / lineHeight;
        }
    
        private void showBarrageItem(final BarrageTextItem item) {
            int leftMargin = this.getRight() - this.getLeft() - this.getPaddingLeft();
            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();
                    BarrageRelativeLayout.this.removeView(item.textView);
                }
    
                @Override
                public void onAnimationRepeat(Animation animation) {
    
                }
            });
            item.textView.startAnimation(anim);
        }
    
        private TranslateAnimation generateTranslateAnim(BarrageTextItem 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;
        }
    
        /**
         * 计算TextView中字符串的长度
         *
         * @param text 要计算的字符串
         * @param Size 字体大小
         * @return TextView中字符串的长度
         */
        public float getTextWidth(BarrageTextItem item, String text, float Size) {
            Rect bounds = new Rect();
            TextPaint paint;
            paint = item.textView.getPaint();
            paint.getTextBounds(text, 0, text.length(), bounds);
            return bounds.width();
        }
    
        /**
         * 获得每一行弹幕的最大高度
         *
         * @return
         */
        private int getLineHeight() {
            BarrageTextItem item = new BarrageTextItem();
    
            //传递进去一个非空字符串，目的是为了获得一个计算值
            String tx = "no null data";
    
            item.textView = new TextView(mContext);
            item.textView.setText(tx);
            item.textView.setTextSize(maxSize);
    
            Rect bounds = new Rect();
            TextPaint paint;
            paint = item.textView.getPaint();
            paint.getTextBounds(tx, 0, tx.length(), bounds);
            return bounds.height();
        }
    
        //弹幕的一个文本item
        public class BarrageTextItem {
            public TextView textView;
            public int textColor;
            public String text;
            public int textSize;
            public int moveSpeed;//移动速度
            public int verticalPos;//垂直方向显示的位置
            public int textMeasuredWidth;//字体显示占据的宽度
    
            public BarrageTextItem() {
    
            }
    
            public BarrageTextItem(String text) {
                this.textSize = (int) (minSize + (maxSize - minSize) * Math.random());
                this.text = text;
                this.textColor = Color.rgb(random.nextInt(256), random.nextInt(256), random.nextInt(256));
                this.textView = new TextView(mContext);
                textView.setText(text);
                textView.setTextSize(textSize);
                textView.setTextColor(textColor);
                textMeasuredWidth = (int) getTextWidth(this, text, textSize);
                moveSpeed = (int) (minSpeed + (maxSpeed - minSpeed) * Math.random());
                if (totalLine == 0) {
                    totalHeight = getMeasuredHeight();
                    lineHeight = getLineHeight();
                    totalLine = totalHeight / lineHeight;
                }
                verticalPos = random.nextInt(totalLine) * lineHeight;
            }
        }
    }

直接写进布局当作一个一般的相对布局使用：

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="zhangphil.demo.MainActivity">
    
        <zhangphil.demo.BarrageRelativeLayout
            android:id="@+id/barrageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white" />
    
    </RelativeLayout>

上层activity使用方法：

package zhangphil.demo;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    
    import java.util.LinkedList;
    
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            BarrageRelativeLayout mBarrageRelativeLayout = (BarrageRelativeLayout) findViewById(R.id.barrageView);
    
            String[] itemText = {"zhangphil@csdn 0", "zhangphil 1", "zhang phil 2","zhang 3","phil 4","zhangphil ... 5", "***zhangphil 6", "zhang phil csdn 7", "zhang ... phil 8", "phil... 9", "http://blog.csdn.net/zhangphil 10"};
            LinkedList<String> texts=new LinkedList<String>();
            for(int i=0;i<itemText.length;i++){
                texts.add(itemText[i]);
            }
            mBarrageRelativeLayout.setBarrageTexts(texts);
    
            mBarrageRelativeLayout.show(BarrageRelativeLayout.RANDOM_SHOW);
        }
    }

代码运行结果（弹幕从右往左滚动显示）：

![Center][]

![Center 1][]

![Center 2][]

![Center 3][]

[Center]: https://img-blog.csdn.net/20160725101015612?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20160725101034894?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20160725101044792?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: https://img-blog.csdn.net/20160725101054371?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center