值动画

• 界面默认收缩
  

• 界面展开
  

• 实现如上图红线区域布局

<LinearLayout
        android:id="@+id/safe_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/safe_title_layout"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/des_layout_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/des_iv_1"
                android:layout_width="@dimen/des_iv_width"
                android:layout_height="@dimen/des_iv_height"
                android:scaleType="fitXY" />

            <TextView
                android:id="@+id/des_tv_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="#ff7a7a7a"
                android:textSize="@dimen/des_tv_size" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/des_layout_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/des_iv_2"
                android:layout_width="@dimen/des_iv_width"
                android:layout_height="@dimen/des_iv_height"
                android:scaleType="fitXY" />

            <TextView
                android:id="@+id/des_tv_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="#ff7a7a7a"
                android:textSize="@dimen/des_tv_size" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/des_layout_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/des_iv_3"
                android:layout_width="@dimen/des_iv_width"
                android:layout_height="@dimen/des_iv_height"
                android:scaleType="fitXY" />

            <TextView
                android:id="@+id/des_tv_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="#ff7a7a7a"
                android:textSize="@dimen/des_tv_size" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/des_layout_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/des_iv_4"
                android:layout_width="@dimen/des_iv_width"
                android:layout_height="@dimen/des_iv_height"
                android:scaleType="fitXY" />

            <TextView
                android:id="@+id/des_tv_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="#ff7a7a7a"
                android:textSize="@dimen/des_tv_size" />
        </LinearLayout>
    </LinearLayout>

• 初始化布局(用的是xutil框架)

  @ViewInject(R.id.safe_content)
  private LinearLayout safe_content;

• 最初， 该布局是收缩的

  ViewGroup.LayoutParams layoutParams = safe_content.getLayoutParams();//拿到layoutParam
  layoutParams.height = 0;//设置其height为0
  safe_content.setLayoutParams(layoutParams);//再作为参数设置回去

• 点击之后，展开动画

  • 定义两个变量：起点和终点。代表动画执行的范围
  • 调用ofInt方法，确定动画执行范围
  • 添加addUpdateListener，监听Animation变化
  • 拿到Animation的值，赋给layoutParam.height，这样当动画执行时，layout的高度不断增加，也就是不断展开的效果
  • 添加addListenter，编写动画结束后的动作
  • 启动动画

boolean flag = false;
    @Override
    public void onClick(View v) {
        if(v.getId() == R.id.safe_layout){
            int startHeight,targetHeight;
            if(!flag){/**展开的动画**/
                startHeight = 0;
                targetHeight = getMeasureHeight();
                flag = true;
            }else {
                targetHeight = 0;
                startHeight = getMeasureHeight();
                flag = false;
            }
            /**值动画*/
            ValueAnimator animator = ValueAnimator.ofInt(startHeight,targetHeight);
            final RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) safe_content.getLayoutParams();
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                /**监听值的变化*/
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    Integer value = (Integer) animation.getAnimatedValue();/**运行当前时间点的一个值*/
                    layoutParams.height = value;
                    safe_content.setLayoutParams(layoutParams);/**刷新界面*/
                }
            });
            animator.addListener(new Animator.AnimatorListener() {
                /**监听动画执行,当动画开始执行的时候调用*/


                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    if(flag){
                        safe_arrow.setImageResource(R.drawable.arrow_up);
                    }else {
                        safe_arrow.setImageResource(R.drawable.arrow_down);
                    }
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }

            });
            animator.setDuration(500);
            animator.start();
        }

    }

    private int getMeasureHeight() {
        int width = safe_content.getMeasuredWidth();/**由于宽度不会发生变化  宽度的值取出来*/
        safe_content.getLayoutParams().height = ViewGroup.LayoutParams.WRAP_CONTENT;
        /**参数1  测量控件mode    参数2  大小*/
        int widthMeasureSpec = MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);
        int heightMeasureSpec = MeasureSpec.makeMeasureSpec(250, MeasureSpec.AT_MOST);
        /** 测量规则 宽度是一个精确的值width, 高度最大是1000,以实际为准*/
        safe_content.measure(widthMeasureSpec,heightMeasureSpec);
        return safe_content.getMeasuredHeight();
    }