android弹幕

来源：互联网发布：联通云数据与联通关系编辑：程序博客网时间：2024/04/30 07:57

做个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

0 0