Android 弹幕效果开发案例

概述

现在有个很流行的效果就是弹幕效果，满屏幕的文字从右到左飘来飘去。看的眼花缭乱，看起来还蛮cool的现在就是来实现这一的一个效果，大部分的都是从右向左移动漂移，本文的效果中也支持从左向右的漂移移动效果，同时也支持屏幕弹幕最多显示个数的设置。

详细

代码下载：http://www.demodashi.com/demo/13441.html

一、概述

现在有个很流行的效果就是弹幕效果，满屏幕的文字从右到左飘来飘去。看的眼花缭乱，看起来还蛮cool的

现在就是来实现这一的一个效果，大部分的都是从右向左移动漂移，本文的效果中也支持从左向右的漂移移动

效果，同时也支持屏幕弹幕最多显示个数的设置。

二、效果图

废话不说，先来看看效果图吧~~

三、实现原理方案

1、自定义ViewGroup-XCDanmuView，继承RelativeLayout来实现，当然也可以继承其他三大布局类哈

2、初始化若干个TextView（弹幕的item View，这里以TextView 为例，当然也可以其他了~），然后通过addView添加到自定义View中

3、通过addView添加到XCDanmuView中，位置在坐标，为了实现从屏幕外移动进来的效果

我们还需要修改添加进来TextView的位置，以从右向左移动方向来说，addView后必须将该TextView的位置设置到右边的屏幕外

这样我们采用的方法，是在onLayout（）方法中对childView进行layout重新布局设置位置

4、随机冲左侧或右侧出来弹幕itemView，移动采用属性动画来实现平移，从屏幕的一端移动到另一端，当动画结束后，就将

该child从XCDanmuView中remove掉。并重新new 一个弹幕itemView ，并addView到XCDanmuView中，并开始动画移动

5、本自定义弹幕View支持从左到右和从右到左两个方向，支持自定义设置屏幕弹幕最多显示个数。

四、自定义弹幕效果XCDanmuView的具体实现

1、初始化需要用到的数据变量

private int mWidth;    private int mScreenWidth;    private List<View> mChildList;    private boolean mIsWorking = false;    private Context mContext;    private int mMaxShowNum = 15;    private int mRowNum = 4;    private int[] mSpeeds = {            3000,4000,5000,6000
    };    private int mDelayDuration = 500;    private int[] mBgResIds = {
            R.drawable.bg_danmu0,
            R.drawable.bg_danmu1,
            R.drawable.bg_danmu2,
            R.drawable.bg_danmu3
    };    private int[] mRowPos = {            150,140,160,150
    };    private Random mRandom;    private String[] mStrContents;    public static enum XCDirection{
        FROM_RIGHT_TO_LEFT,
        FORM_LEFT_TO_RIGHT
    }    public enum XCAction{
        SHOW,HIDE
    }    private XCDirection mDirection = XCDirection.FROM_RIGHT_TO_LEFT;

private void init() {
    mScreenWidth = getScreenWidth();
    mChildList = new ArrayList<>();
    mRandom = new Random();
}

2、初始化若干个弹幕item view

public void initDanmuItemViews(String[] strContents){
        mStrContents = strContents;        for(int i = 0; i < mMaxShowNum; i ++){            int index =  mRandom.nextInt(100) % strContents.length;
            createDanmuView(i,strContents[index],false);
        }
    }

3、创建弹幕item view 并addView到XCDanmuView中

public void createDanmuView(int index,String content,boolean reset){        final TextView textView = new TextView(mContext);
        textView.setTextColor(Color.WHITE);        int r = mRandom.nextInt(100) % mRowNum;
        textView.setBackgroundResource(mBgResIds[r]);
        textView.setText(content +"_"+ (index+1));
        RelativeLayout.LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT,
                RelativeLayout.LayoutParams.WRAP_CONTENT);        int row = mRandom.nextInt(100) % mRowNum;        while(row == lastRow){
            row = mRandom.nextInt(100)% mRowNum;
        }        int pos = mRandom.nextInt(100)% mRowNum;
        lp.topMargin = row * mRowPos[pos];
        lastRow = row;
        textView.setLayoutParams(lp);
        textView.setPadding(40, 2, 40, 2);        this.addView(textView);        if(reset){
            mChildList.set(index,textView);
        }else{
            mChildList.add(index,textView);
        }
        textView.setClickable(true);
        textView.setOnClickListener(new OnClickListener() {
            @Override            public void onClick(View view) {
                Toast toast = Toast.makeText(mContext, textView.getText(), Toast.LENGTH_SHORT);
                toast.setGravity(Gravity.TOP,0,50);
                toast.show();
            }
        });
    }

4、重新设置childView的初始位置到屏幕之外

@Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        super.onLayout(changed, l, t, r, b);        int childCount = this.getChildCount();        for(int i=0;i<childCount;i++){
            View view = getChildAt(i);
            RelativeLayout.LayoutParams lp = (LayoutParams) view.getLayoutParams();            if(lp.leftMargin <= 0){                if(mDirection == XCDirection.FORM_LEFT_TO_RIGHT){
                    view.layout(-view.getMeasuredWidth(), lp.topMargin,                            0,lp.topMargin + view.getMeasuredHeight());
                }else{
                    view.layout(mScreenWidth,lp.topMargin,mScreenWidth+view.getMeasuredWidth(),
                            lp.topMargin+view.getMeasuredHeight());
                }
 
            }else{                continue;
            }
        }
    }

5、弹幕item view的移动效果

private Handler mHandler = new Handler() {
        @Override        public void handleMessage(final Message msg) {            super.handleMessage(msg);            final int pos = msg.what;
            ViewPropertyAnimator animator;            if(mDirection == XCDirection.FROM_RIGHT_TO_LEFT){
                animator = mChildList.get(msg.what).animate()
                        .translationXBy(-(mScreenWidth + mChildList.get(msg.what).getWidth()));
            }else{
                animator = mChildList.get(msg.what).animate()
                        .translationXBy(mScreenWidth + mChildList.get(msg.what).getWidth());
            }
 
            Random random = new Random(System.currentTimeMillis());            int index = random.nextInt(100) % mSpeeds.length;
            animator.setDuration(mSpeeds[index]);
            animator.setInterpolator(new LinearInterpolator());
            animator.setListener(new Animator.AnimatorListener() {
                @Override                public void onAnimationStart(Animator animator) {
 
                }
 
                @Override                public void onAnimationEnd(Animator animator) {
                    XCDanmuView.this.removeView(mChildList.get(pos));                    int index = mRandom.nextInt(100) % mStrContents.length;
                    createDanmuView(pos, mStrContents[index], true);
                    mHandler.sendEmptyMessageDelayed(pos, mDelayDuration);
                    Log.v("czm", "size=" + mChildList.size());
                }
 
                @Override                public void onAnimationCancel(Animator animator) {
 
                }
 
                @Override                public void onAnimationRepeat(Animator animator) {
 
                }
            });
            animator.start();
        }
    };

6、开启弹幕效果和关闭弹幕效果以及对于的动画效果

boolean isFirst = true;    public void start(){
        switchAnimation(XCAction.SHOW);        if(isFirst){            for(int i =0;i< mChildList.size();i++){
                mHandler.sendEmptyMessageDelayed(i,i * mDelayDuration);
            }
            isFirst = false;
        }
 
        mIsWorking = true;
    }    public void hide(){
        switchAnimation(XCAction.HIDE);
        mIsWorking =false;
    }    public void stop(){        this.setVisibility(View.GONE);        for(int i =0;i< mChildList.size();i++){
            mChildList.get(i).clearAnimation();
            mHandler.removeMessages(i);
        }
        mIsWorking =false;
    }private void switchAnimation(final XCAction action){
        AlphaAnimation animation;        if(action == XCAction.HIDE){
            animation = new AlphaAnimation(1.0f,0.0f);
            animation.setDuration(400);
        }else{
            animation = new AlphaAnimation(0.0f,1.0f);
            animation.setDuration(1000);
        }
        XCDanmuView.this.startAnimation(animation);
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override            public void onAnimationStart(Animation animation) {
 
            }
            @Override            public void onAnimationEnd(Animation animation) {                if(action == XCAction.HIDE){
                    XCDanmuView.this.setVisibility(View.GONE);
                }else{
                    XCDanmuView.this.setVisibility(View.VISIBLE);
                }
            }
            @Override            public void onAnimationRepeat(Animation animation) {
 
            }
        });
    }

五、如何使用该自定义侧滑View控件

使用该自定义View非常简单，控件默认效果从右向左，如果需要修改方向为从左到右，只需设置下方向即可

public class MainActivity extends Activity {    private XCDanmuView mDanmuView;    private List<View> mViewList;    private String[] mStrItems = {            "搜狗","百度",            "腾讯","360",            "阿里巴巴","搜狐",            "网易","新浪",            "搜狗-上网从搜狗开始","百度一下,你就知道",            "必应搜索-有求必应","好搜-用好搜，特顺手",            "Android-谷歌","IOS-苹果",            "Windows-微软","Linux"
    };
    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initDanmuView();
        initListener();
    }    private void initListener() {
        findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View view) {                if (mDanmuView.isWorking()) {
                    mDanmuView.hide();
                    ((Button) view).setText("开启弹幕");
                } else {
                    mDanmuView.start();
                    ((Button) view).setText("关闭弹幕");
                }
            }
        });
    }    private void initDanmuView() {
        mDanmuView = (XCDanmuView)findViewById(R.id.danmu);
        mDanmuView.initDanmuItemViews(mStrItems);
    }
 
}