Android 自定義View修煉-自定義彈幕效果View

1、概述

如今有個很流行的效果就是彈幕效果，滿屏幕的文字從右到左飄來飄去。看的眼花繚亂，看起來還蠻cool的

如今就是來實現這一的一個效果，大部分的都是從右向左移動漂移，本文的效果中也支持從左向右的漂移移動

效果，同時也支持屏幕彈幕最多顯示個數的設置。

2、效果圖

廢話不說，先來看看效果圖吧~~

3、實現原理方案

一、自定義ViewGroup-XCDanmuView，繼承RelativeLayout來實現，固然也能夠繼承其餘三大布局類哈

二、初始化若干個TextView（彈幕的item View，這裏以TextView 爲例，固然也能夠其餘了~），而後經過addView添加到自定義View中

三、經過addView添加到XCDanmuView中，位置在座標，爲了實現 從屏幕外移動進來的效果

咱們還須要修改添加進來TextView的位置，以從右向左移動方向來講，addView後必須將該TextView的位置設置到右邊的屏幕外

這樣咱們採用的方法，是在onLayout（）方法中對childView進行layout從新佈局設置位置

四、隨機衝左側或右側出來彈幕itemView，移動採用屬性動畫來實現平移，從屏幕的一端移動到另外一端，當動畫結束後，就將

該child從XCDanmuView中remove掉。並從新new 一個彈幕itemView ，並addView到XCDanmuView中，並開始動畫移動

五、本自定義彈幕View支持從左到右和從右到左兩個方向，支持自定義設置屏幕彈幕最多顯示個數。

 

4、自定義彈幕效果XCDanmuView的具體實現

一、初始化須要用到的數據變量

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();
}

二、初始化若干個彈幕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);
        }
    }

三、建立彈幕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();
            }
        });
    }

四、從新設置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;
            }
        }
    }

五、彈幕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();
        }
    };

 

六、開啓彈幕效果和關閉彈幕效果以及對於的動畫效果

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) {

            }
        });
    }

5、如何使用該自定義側滑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);
    }

}

6、源碼下載

源碼下載：http://www.demodashi.com/demo/13441.html

 真題園網：http://www.zhentiyuan.com