Android自制彈幕

今天要實現的效果如下:
1.彈幕垂直方向固定

2.彈幕垂直方向隨機

上面效果圖中白色的背景就是彈幕本身,是一個自定義的FrameLayout,我這裡是為了更好的展示彈幕的位置才設置成了白色,當然如果是疊加在VideoView上的話,就需要設置成透明色了.
制作彈幕需要考慮以下幾點問題:
1.彈幕的大小可以隨意調整
2.彈幕內移動的item(或者稱字幕)出現的位置,水平方向是從屏幕右邊移動到屏幕左邊,垂直方向是不能超出彈幕本身的高度的.
3.字幕移除屏幕後,需要將對應item(字幕)從其父容器(彈幕)中移除.
4.如果字幕出現的垂直方向的高度是隨機的,那麼還需要避免字幕重疊的情況.

ok,下面是彈幕自定義view的代碼:

/**
 * Created by dell on 2016/9/28.
 */
public class DanmuView extends FrameLayout {
    private static final String TAG = "DanmuView";
    private static final long DEFAULT_ANIM_DURATION = 6000; //默認每個動畫的播放時長
    private static final long DEFAULT_QUERY_DURATION = 3000; //遍歷彈幕的默認間隔
    private LinkedList mViews = new LinkedList<>();//彈幕隊列
    private boolean isQuerying;
    private int mWidth;//彈幕的寬度
    private int mHeight;//彈幕的高度
    private Handler mUIHandler = new Handler();
    private boolean TopDirectionFixed;//彈幕頂部的方向是否固定
    private Handler mQueryHandler;
    private int mTopGravity = Gravity.CENTER_VERTICAL;//頂部方向固定時的默認對齊方式

    public void setHeight(int height) {
        mHeight = height;
    }

    public void setWidth(int width) {
        mWidth = width;
    }

    public void setTopGravity(int gravity) {
        this.mTopGravity = gravity;
    }

    public void add(List danmuList) {
        for (int i = 0; i < danmuList.size(); i++) {
            Danmu danmu = danmuList.get(i);
            addDanmuToQueue(danmu);
        }
    }

    public void add(Danmu danmu) {
        addDanmuToQueue(danmu);
    }

    public DanmuView(Context context) {
        this(context, null);
    }

    public DanmuView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DanmuView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        HandlerThread thread = new HandlerThread("query");
        thread.start();
        //循環取出彈幕顯示
        mQueryHandler = new Handler(thread.getLooper()) {
            @Override
            public void handleMessage(Message msg) {
                final View view = mViews.poll();
                if (null != view) {
                    mUIHandler.post(new Runnable() {
                        @Override
                        public void run() {
                            //添加彈幕
                            showDanmu(view);
                        }
                    });
                }
                sendEmptyMessageDelayed(0, DEFAULT_QUERY_DURATION);
            }
        };
    }

    /**
     * 將要展示的彈幕添加到隊列中
     *
     * @param danmu
     */
    private void addDanmuToQueue(Danmu danmu) {
        if (null != danmu) {
            final View view = View.inflate(getContext(), R.layout.layout_danmu, null);
            TextView usernameTv = (TextView) view.findViewById(R.id.tv_username);
            TextView infoTv = (TextView) view.findViewById(R.id.tv_info);
            ImageView headerIv = (ImageView) view.findViewById(R.id.iv_header);
            usernameTv.setText(danmu.getUserName());//昵稱
            infoTv.setText(danmu.getInfo());//信息
            Glide.with(getContext()).//頭像
                    load(danmu.getHeaderUrl()).
                    transform(new CropCircleTransformation(getContext())).into(headerIv);
            view.measure(0, 0);
            //添加彈幕到隊列中
            mViews.offerLast(view);
        }
    }

    /**
     * 播放彈幕
     *
     * @param topDirectionFixed 彈幕頂部的方向是否固定
     */
    public void startPlay(boolean topDirectionFixed) {
        this.TopDirectionFixed = topDirectionFixed;
        if (mWidth == 0 || mHeight == 0) {
            getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @SuppressLint("NewApi")
                @Override
                public void onGlobalLayout() {
                    getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    if (mWidth == 0) mWidth = getWidth() - getPaddingLeft() - getPaddingRight();
                    if (mHeight == 0) mHeight = getHeight() - getPaddingTop() - getPaddingBottom();
                    if (!isQuerying) {
                        mQueryHandler.sendEmptyMessage(0);
                    }
                }
            });
        } else {
            if (!isQuerying) {
                mQueryHandler.sendEmptyMessage(0);
            }
        }
    }

    /**
     * 顯示彈幕,包括動畫的執行
     *
     * @param view
     */
    private void showDanmu(final View view) {
        isQuerying = true;
        Log.d(TAG, "mWidth:" + mWidth + " mHeight:" + mHeight);
        final LayoutParams lp = new LayoutParams(view.getMeasuredWidth(), view.getMeasuredHeight());
        lp.leftMargin = mWidth;
        if (TopDirectionFixed) {
            lp.gravity = mTopGravity | Gravity.LEFT;
        } else {
            lp.gravity = Gravity.LEFT | Gravity.TOP;
            lp.topMargin = getRandomTopMargin(view);
        }
        view.setLayoutParams(lp);
        view.setTag(lp.topMargin);
        //設置item水平滾動的動畫
        ValueAnimator animator = ValueAnimator.ofInt(mWidth, -view.getMeasuredWidth());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                lp.leftMargin = (int) animation.getAnimatedValue();
                view.setLayoutParams(lp);
            }
        });
        addView(view);//顯示彈幕
        animator.setDuration(DEFAULT_ANIM_DURATION);
        animator.setInterpolator(new LinearInterpolator());
        animator.start();//開啟動畫
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                view.clearAnimation();
                existMarginValues.remove(view.getTag());//移除已使用過的頂部邊距
                removeView(view);//移除彈幕
                animation.cancel();
            }
        });
    }

    //記錄當前仍在顯示狀態的彈幕的垂直方向位置（避免重復）
    private Set existMarginValues = new HashSet<>();
    private int linesCount;
    private int range = 10;

    private int getRandomTopMargin(View view) {
        //計算可用的行數
        linesCount = mHeight / view.getMeasuredHeight();
        if (linesCount <= 1) {
            linesCount = 1;
        }
        Log.d(TAG, "linesCount:" + linesCount);
        //檢查重疊
        while (true) {
            int randomIndex = (int) (Math.random() * linesCount);
            int marginValue = randomIndex * (mHeight / linesCount);
            //邊界檢查
            if (marginValue > mHeight - view.getMeasuredHeight()) {
                marginValue = mHeight - view.getMeasuredHeight() - range;
            }
            if (marginValue == 0) {
                marginValue = range;
            }
            if (!existMarginValues.contains(marginValue)) {
                existMarginValues.add(marginValue);
                Log.d(TAG, "marginValue:" + marginValue);
                return marginValue;
            }
        }
    }
}

彈幕實體類:

/**
 * Created by dell on 2016/9/28.
 */
public class Danmu {
    private String headerUrl;//頭像
    private String userName;//昵稱
    private String info;//信息

    public String getHeaderUrl() {
        return headerUrl;
    }

    public void setHeaderUrl(String headerUrl) {
        this.headerUrl = headerUrl;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getInfo() {
        return info;
    }

    public void setInfo(String info) {
        this.info = info;
    }
}

測試類,MainActivity

public class MainActivity extends AppCompatActivity {
    DanmuView mDanmuView;
    EditText mMsgEdt;
    Button mSendBtn;
    Handler mDanmuAddHandler;
    boolean continueAdd;
    int counter;

    @Override
    protected void onResume() {
        super.onResume();
        mDanmuView.startPlay(true);//true表示彈幕的垂直方向是固定的,false則隨機
        continueAdd = true;
        mDanmuAddHandler.sendEmptyMessageDelayed(0, 6000);
    }

    @Override
    protected void onPause() {
        super.onPause();
        continueAdd = false;
        mDanmuAddHandler.removeMessages(0);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
        initListener();
    }

    private void initView() {
        mDanmuView = (DanmuView) findViewById(R.id.danmuView);
        mMsgEdt = (EditText) findViewById(R.id.edt_msg);
        mSendBtn = (Button) findViewById(R.id.btn_send);
    }

    private void initData() {
        List danmuList = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            Danmu danmu = new Danmu();
            danmu.setHeaderUrl("http://tupian.qqjay.com/tou3/2016/0725/cb00091099ffbf09f4861f2bbb5dd993.jpg");
            danmu.setUserName("Mr.chen" + i);
            danmu.setInfo("我是彈幕啊,不要問我為什麼不可以那麼長!!!");
            danmuList.add(danmu);
        }
        mDanmuView.add(danmuList);

        //下面是模擬每秒添加一個彈幕的過程
        HandlerThread ht = new HandlerThread("send danmu");
        ht.start();
        mDanmuAddHandler = new Handler(ht.getLooper()) {
            @Override
            public void handleMessage(Message msg) {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Danmu danmu = new Danmu();
                        danmu.setHeaderUrl("http://tupian.qqjay.com/tou3/2016/0803/87a8b262a5edeff0e11f5f0ba24fb22f.jpg");
                        danmu.setUserName("Mr.new" + (counter++));
                        danmu.setInfo("新的彈幕啊!!!新的彈幕啊!!!新的彈幕啊!!!新的彈幕啊!!!");
                        mDanmuView.add(danmu);
                    }
                });
                //繼續添加
                if (continueAdd) {
                    sendEmptyMessageDelayed(0, 1000);
                }
            }
        };
    }

    private void initListener() {
        //手動添加
        mSendBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String msg = mMsgEdt.getText().toString().trim();
                if (TextUtils.isEmpty(msg)) {
                    Toast.makeText(MainActivity.this, "親,你想發送什麼啊?", Toast.LENGTH_SHORT).show();
                    return;
                }
                mMsgEdt.setText("");
                Danmu danmu = new Danmu();
                danmu.setHeaderUrl("http://img0.imgtn.bdimg.com/it/u=2198087564,4037394230&fm=11&gp=0.jpg");
                danmu.setUserName("I'am good man");
                danmu.setInfo("我是新人:" + msg);
                mDanmuView.add(danmu);
            }
        });
    }
}