仿小黄车头部滚动消息动画

前段时间看小黄车头部有个滚动的消息条目动画，而且可以点击收起，于是抽空实现了下，具体如下
先上效果图

1、分析

通过观察，发现该布局由一个图片，一个文字组成，并且通过点击图片，会有一个伸缩的动画，也就是将文字隐藏的效果。文字的滚动通过跑马灯效果来实现

2、布局

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_news"
    android:orientation="horizontal"
    android:layout_alignParentRight="true"
    android:layout_marginTop="10dp">
    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|center_vertical"
        android:layout_marginTop="4dp"
        android:src="@mipmap/sy_xiaoxi_btn"
        />
    <TextView
        android:id="@+id/tv_text"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="未满12周岁请勿骑行,未满12周岁请勿骑行,未满12周岁请勿骑行"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textSize="12sp"
        android:layout_toRightOf="@+id/img_icon"
        android:gravity="center"
        android:focusable="true"
        android:ellipsize="marquee"
        android:scrollHorizontally="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:focusableInTouchMode="true"
        android:layout_gravity="center_vertical"
        />
</LinearLayout>

布局很简单，可能有同学对跑马灯效果不了解，简单介绍下跑马灯属性

android:ellipsize=”marquee” //文字显示不全时剩余文字通过什么方式显示
android:scrollHorizontally=”true” //设置滚动方式为横向滚动
android:marqueeRepeatLimit=”marquee_forever” //设置滚动模式为forever
android:focusableInTouchMode=”true” //设置点击模式下拥有焦点 因为没焦点跑不起来
android:focusable=”true” //设置拥有焦点

3、直接上Activity代码

（1）初始化

private void init() {
        ImageView imgIcon=findViewById(R.id.img_icon);
        tvText = findViewById(R.id.tv_text);
        imgIcon.setOnClickListener(this);
        //获取屏幕密度
        float density = getResources().getDisplayMetrics().density;
        //dp to px   200dp
        textWidth = (int) (density * 200 + 0.5);
    }

（2）设置点击事件

 @Override
    public void onClick(View view) {
        createAnimator(tvText,tvText.getWidth(),0);
        if (isExpanded){
            close(tvText);
            isExpanded=false;
        }else {
            open(tvText);
            isExpanded=true;
        }
    }

通过isExpanded 布尔值控制通知栏开关，关闭状态点击展开，开启状态，点击关闭，同时修改布尔值

（3）开关通知栏方法

/**
     * 打开通知
     */
    private void open(View view) {
        view.setVisibility(View.VISIBLE);
        ValueAnimator valueAnimator=createAnimator(view,0,textWidth);
        valueAnimator.start();

    }

  /**
     * 关闭通知
     */
    private void close(final View view) {
        int width=view.getWidth();
        ValueAnimator valueAnimator=createAnimator(view,width,0);
        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                view.setVisibility(View.GONE);
            }
        });
        valueAnimator.start();
    }

动画执行完毕，隐藏消息文字

 /**
     * 设置动画
     * @param view
     * @param start
     * @param end
     * @return
     */
    private ValueAnimator createAnimator(final View view, int start, int end) {
        ValueAnimator valueAnimator=ValueAnimator.ofInt(start,end);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                int value=(Integer) valueAnimator.getAnimatedValue();
                ViewGroup.LayoutParams layoutParams=view.getLayoutParams();
                layoutParams.width=value;
                view.setLayoutParams(layoutParams);
            }
        });
        return valueAnimator;
    }

通过属性动画监听动画改变来控制消息栏文字宽度，OK啦