android弹幕

  做个android的弹幕主要要用到动画,水平的弹幕网上很多,这个是垂直方向的弹幕,其实原理一样


BarrageView继承自FrameLayout,就是自定义的弹幕View


/**
 * Created by sxy on 2016/8/17.
 */
public class BarrageView extends FrameLayout {

    private int width;
    private int height;

    private int startY;
    private int stopY;
    private int stopTime = 2000;
    private int translationInTime = 500;
    private int translationOutTime = 800;

    private int currentIndex = 0;

    private List<Barrage> barrageLists;

    public BarrageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        width = right - left;
        height = bottom - top;
        startY = height / 6;
        stopY = startY * 2 / 3;
    }

    public Runnable mBarrageRunnable = new Runnable() {
        @Override
        public void run() {
            final Barrage barrage = barrageLists.get(currentIndex);
            final LinearLayout item = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.barrage_item, null);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,dp2px(getContext(), 36));
            item.setLayoutParams(params);
            item.setY(startY);
            item.setAlpha(0);

            GradientDrawable bg = new GradientDrawable();
            bg.setAlpha(0xA0);
            bg.setColor(Color.BLACK);
            bg.setCornerRadius(params.height / 2);
            item.setBackground(bg);

            //设置弹幕文字
            TextView tv = (TextView) item.findViewById(R.id.barrage_content);
            tv.setText(barrage.content);

            //设置弹幕头像
            SimpleDraweeView iv = (SimpleDraweeView) item.findViewById(R.id.barrage_avatar);
            //iv.setImageURI(Uri.parse(barrage.imgUrl));

            addView(item);

            ObjectAnimator alphaIn = ObjectAnimator.ofFloat(item, "alpha", 1.0f);
            alphaIn.setDuration(translationInTime);

            final ObjectAnimator alphaOut = ObjectAnimator.ofFloat(item, "alpha", 0f);
            alphaOut.setDuration(translationInTime);

            final ObjectAnimator translationToIn = ObjectAnimator.ofFloat(item, "translationY", stopY);
            translationToIn.setDuration(translationInTime);

            final ObjectAnimator translationToOut = ObjectAnimator.ofFloat(item, "translationY", -startY);
            translationToOut.setDuration(translationOutTime);

            translationToIn.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    AnimatorSet out = new AnimatorSet();
                    out.play(alphaOut).with(translationToOut);
                    out.setStartDelay(stopTime);
                    out.start();
                }
            });

            translationToOut.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    item.clearAnimation();
                    removeView(item);
                    ++currentIndex;
                    if (currentIndex < barrageLists.size()) {
                        postDelayed(mBarrageRunnable, barrageLists.get(currentIndex).intervalTime * 1000);
                    }
                }
            });

            AnimatorSet in = new AnimatorSet();
            in.play(alphaIn).with(translationToIn);
            in.start();
        }
    };

    public void setBarrages(ArrayList<Barrage> lists) {
        this.barrageLists = lists;
        startBarrage();
    }

    public void startBarrage() {
        postDelayed(mBarrageRunnable, barrageLists.get(currentIndex).intervalTime * 1000);
    }

    /**
     * 转换dp为px
     */
    public int dp2px(Context context, int dp) {
        return (int) (context.getResources().getDisplayMetrics().density * dp);
    }

}

用到的barrage布局文件barrage_item如下:
  <pre name="code" class="java"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="36dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/barrage_avatar"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginBottom="3dp"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:layout_marginTop="3dp"
        fresco:actualImageScaleType="centerCrop"
        fresco:placeholderImage="@drawable/ic_launcher"
        fresco:placeholderImageScaleType="centerInside"
        fresco:roundAsCircle="true"
        fresco:viewAspectRatio="1" />

    <TextView
        android:id="@+id/barrage_content"
        android:layout_width="wrap_content"
        android:layout_height="36dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:paddingRight="15dp"
        android:singleLine="true"
        android:text="保湿美颜之神器"
        android:textColor="@color/white"
        android:textSize="14dp" />

</LinearLayout>

 剩下就是MainActivity的代码了 

     

public class MainActivity extends AppCompatActivity {


    private BarrageView barrageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Fresco.initialize(this);
        initView();
    }


    private void initView() {
        ArrayList<Barrage> date = new ArrayList<>();

        date.add(new Barrage("测试弹幕测试弹幕1", null, 2));
        date.add(new Barrage("测试弹幕测试弹幕2", null, 5));
        date.add(new Barrage("测试弹幕测试弹幕3", null, 3));
        date.add(new Barrage("测试弹幕测试弹幕4", null, 5));

        barrageView = (BarrageView) findViewById(R.id.barrageView);
        barrageView.setBarrages(date);
    }

}


有参考的可以去下载http://download.csdn.net/detail/u013122144/9607708



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值