多個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>      

效果圖：