在现在的一些视频类网站、视频类直播网站,比如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); 
    } 
}



代码运行结果(弹幕从右往左滚动显示):



发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Android OkHttp(1)详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。