android - 如何动画 ListView 展开和折叠

Question

最初在屏幕底部显示文本。单击它时，它下面的 ListView 应该向上滑动。再次点击文本 ListView 向下滑动。

使其与下面的代码 fragment 一起使用，除了第一次单击列表中的文本时不会进行向上滑动的动画。之后它将按预期向上/向下滑动动画。

因为在第一次点击调用showListView(true);因为 ListView 的可见性“消失”了，所以它没有高度。 “y” == 0 翻译不做任何事情。只是 ListView 的可见性更改为“可见”，这会插入 titleRow 更改其位置。

但是如果以 ListView 的可见性为“visible”开始，初始的showListView(false);在 setupListViewAdapter() 中不会将 ListView 向下推到初始状态(在屏幕底部之外)，因为它没有高度，直到列表行由 mListView.setAdapter(mListAdapter) 从适配器填充。

是否有更好的方法来向上/向下移动 ListView ？

        <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 非常轻松地完成此操作。

在父 ViewGroup 上将 animateLayoutChanges 设置为 true:

<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；单击标题，设置 ListView 的高度:

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);
        }
    });
}