多个item的收缩展开动画

在项目项目里有item多余三个的时候就要隐藏其他多余，下面显示一个展开全部的text，简单的可以直接使用View.VISIBLE、GONE，但是这种体验不好。做成一种收缩展开的动画效果比较好。效果如下：

实现思路主要是动态改变layout的高度：

1. LinearLayout的addView()添加item

2. 测量整个Layout的高度和测量，前三个item的高度和整个Layout的高度

3. 点击展开或收起改变layout高度

因为需要在一定的时间内动态改变高度值，所以这里用到ValueAnimator来在一段时间获取动态高度值，获取的值给LinearLayout的LayoutParams.height即可。

主要代码

public class TestActivity extends Activity implements View.OnClickListener{

    private LinearLayout mContainerLayout;
    private TextView mExpandTv;
    //当前是展开还是收缩
    private boolean mIsShow;
    //三item的高度
    private int mMinHeight;
    //layout高度
    private int mLayoutHeight;
    //是否已经测量
    private boolean mIsMeasure;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test_layout);
        mContainerLayout = (LinearLayout) findViewById(R.id.container);
        mExpandTv = (TextView) findViewById(R.id.expand_tv);
        mExpandTv.setOnClickListener(this);
        //添加测试数据
        initData();
        //测量高度
        final ViewTreeObserver observer = mContainerLayout.getViewTreeObserver();
        observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if(mIsMeasure){
                    return;
                }
                for(int i=0;i<mContainerLayout.getChildCount();i++){
                    //前三个高度
                    View view = mContainerLayout.getChildAt(i);
                    if(i<3){
                        mMinHeight +=  view.getHeight();
                    }
                    //layout高度
                    mLayoutHeight += view.getHeight();
                }
                //设置layout的高度
                ViewGroup.LayoutParams params = mContainerLayout.getLayoutParams();
                params.height = mMinHeight;
                mContainerLayout.setLayoutParams(params);
                mContainerLayout.requestLayout();
                mIsMeasure = true;
            }
        });
    }

    private void initData() {
        for(int i=0;i<10;i++){
            TextView textView = new TextView(this);
            textView.setText("我是item"+i);
            textView.setPadding(0, 20, 0, 20);
            textView.setGravity(Gravity.CENTER);
            textView.setBackgroundResource(R.color.white);
            textView.setTextColor(getResources().getColor(R.color.text_grey));
            mContainerLayout.addView(textView);
        }
    }

    @Override
    public void onClick(View v) {
        showOrHideItem();
    }

    private void showOrHideItem(){
        ValueAnimator valueAnimator;
        if(mIsShow){
            //由layout的高度值到3个item的高度值
            valueAnimator = ValueAnimator.ofInt(mLayoutHeight,mMinHeight);
            mExpandTv.setText("展开全部");
        }else {
            //由3个item的高度值的到layout高度值
            valueAnimator = ValueAnimator.ofInt(mMinHeight,mLayoutHeight);
            mExpandTv.setText("收起");
        }
        valueAnimator.setDuration(500).addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                ViewGroup.LayoutParams params = mContainerLayout.getLayoutParams();
                int heightValue = (int) valueAnimator.getAnimatedValue();
                params.height = heightValue;
                mContainerLayout.setLayoutParams(params);
                mContainerLayout.requestLayout();
            }
        });
        valueAnimator.start();
        mIsShow = !mIsShow;
    }
}

XML布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/text_color_orange"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

    </LinearLayout>

    <TextView
        android:id="@+id/expand_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/text_grey"
        android:gravity="center"
        android:padding="10dp"
        android:text="展开全部"
        android:textColor="#E61A5F" />
</LinearLayout>

效果图：