如何动画列表视图展开和折叠

Question

最初在屏幕底部显示文本.单击它时,它下面的列表视图应该向上滑动.再次单击文本,列表视图向下滑动.

使其与下面的代码段一起使用,除了第一次单击文本列表不会使动画向上滑动.之后,它将按预期动画上下滑动.

这是因为在第一次点击并调用showListView(true); 由于列表视图的可见性"已消失",因此它没有高度."y"== 0翻译没有做任何事情.它只是将列表视图的可见性更改为"可见",这会推动titleRow更改其位置.

但是如果要从列表视图的可见性开始"可见",则初始showListView(false); 在setupListViewAdapter()中没有将列表视图向下推到初始状态(屏幕底部之外),因为它没有高度,直到列表行由mListView.setAdapter(mListAdapter)从适配器填充.

是否有更好的方法来进行列表视图的上下移动？

        <TextView
                android:id="@+id/titleRow”
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=“title row”
        />

        <ListView
            android:id="@+id/list_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility=“gone”
            >
        </ListView>


initial state list view collapsed(outside screen bottom)
+++++++++++++++++++++++++++
+  mTitleRow          + ^ +
+++++ screen bottom   +++++


listview expanded
+++++++++++++++++++++++++++
+  mTitleRow          + ^ +
+++++++++++++++++++++++++++
+                         +
+  mListView              +
+                         +
+++++ screen bottom   +++++


void setupListViewAdapter(){
        mTitleRow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (mTitleRow.getTag() == STATE_COLLAPSED)                    
                { 
                   mListView.setVisibility(View.VISIBLE);                       
                   showListView(true);
                } else {
                   showListView(false);
                }
            }
        });

    mListView.setAdapter(mListAdapter);
    showListView(false); 
}

private static final int STATE_EXPANDED = 1;
private static final int STATE_COLLAPSED = 2;
boolean mListInAnimation = false;
public void showListView(final boolean show) {
    if (mListView != null && !mListInAnimation) {
        mListInAnimation = true;
        mTitleRow.setTag(show ? STATE_EXPANDED : STATE_COLLAPSED);            
        int translateY = show ? 0 : (listHeight);

        mTitleRow.animate().translationY(translateY).setDuration(300).setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                mListInAnimation = false;
            }
        });
    }
}

Answer 1

您可以使用API​​ 16轻松完成此操作LayoutTransition.CHANGING.

设置animateLayoutChanges到true父ViewGroup中:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:animateLayoutChanges="true">
    <TextView
        android:id="@+id/titleRow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="title row"/>
    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>
</LinearLayout>

启用LayoutTransition.CHANGING; 点击标题,设置列表视图的高度:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    LinearLayout linearLayout = (LinearLayout) findViewById(R.id.parent);
    linearLayout.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

    final View listView = findViewById(R.id.list_view);
    View titleRow = findViewById(R.id.titleRow);

    titleRow.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            ViewGroup.LayoutParams params = listView.getLayoutParams();
            params.height = params.height == 0 ? ViewGroup.LayoutParams.WRAP_CONTENT : 0;
            listView.setLayoutParams(params);
        }
    });
}