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

Question

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

使它与下面的 sn-p 一起工作，除了第一次单击文本列表不会使动画向上滑动。之后，它将按预期动画向上/向下滑动。

这是因为在第一次点击调用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 轻松完成此操作。

在父 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；点击标题，设置列表视图的高度：

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