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

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

先上效果图

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>

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

:=”” //文字显示不全时剩余文字通过什么方式显示

:=”true” //设置滚动方式为横向滚动

:=”” //设置滚动模式为

:=”true” //设置点击模式下拥有焦点 因为没焦点跑不起来

:=”true” //设置拥有焦点

3、直接上代码 （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   200dptextWidth = (int) (density * 200 + 0.5);}

（2）设置点击事件

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

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

（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() {@Overridepublic 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() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {int value=(Integer) valueAnimator.getAnimatedValue();ViewGroup.LayoutParams layoutParams=view.getLayoutParams();layoutParams.width=value;view.setLayoutParams(layoutParams);}});return valueAnimator;}

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