android - 使用 LayoutTransition 动画工具栏

Question

我想要实现的目标

我的应用程序有一个 Toolbar，其中包含 2 个 AutoCompleteTextView。 我想仅当用户在第一个中选择某些内容时才显示第二个，如果第一个被清除则再次隐藏它(我在 AutoCompleteTextView 中有一个“X”来清除它).

我希望 Toolbar 在这两种状态之间进行动画处理，在第一个 AutoCompleteTextView 中选择某些内容时展开并淡出，然后淡出第二个 AutoCompleteTextView 并在清除第一个时折叠 Toolbar。

我试过了，但没用

我尝试使用 LayoutTransition，在 XML 中将 android:animateLayoutChanges 设置为 true，在代码中声明 LayoutTransition 并将其设置为LinearLayout 包含我的 AutoCompleteTextView。

我第一次这样尝试:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CategoryStyle.Vertical"
    tools:context=".MainActivity">

    <!-- TOOLBAR -->
    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar_main"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        style="@style/ToolbarStyle">

        <!-- i set the LayoutTransition on THIS ONE -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:id="@+id/linear_toolbar">

            <!-- AUTOCOMPLETE market -->
            <com.mwd.shoppinglist.Utility.AutoCompleteTextViewNoFilter
                android:id="@+id/shop_chooser"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Autocomplete"
                android:hint="@string/chooseShop"
                android:textSize="16sp"
                android:drawableRight="@drawable/ic_action_cancel"/>

            <!-- AUTOCOMPLETE product -->
            <com.mwd.shoppinglist.Utility.AutoCompleteTextViewNoFilter
                android:id="@+id/item_chooser"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Autocomplete"
                android:hint="@string/autoCompleteHint"
                android:textSize="16sp"
                android:drawableRight="@drawable/ic_action_cancel_dark"/>
        </LinearLayout>

    </android.support.v7.widget.Toolbar>

    <!-- RECYCLER VIEW -->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"/>

    <!-- TEMP TEXTVIEW -->
    <TextView
        android:id="@+id/main_temp1"
        android:text="@string/pick_a_market"
        style="@style/TempTextView"/>

    <!-- BUTTON -->
    <Button
        android:id="@+id/main_btn_start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_start"
        android:textSize="16sp"
        android:visibility="gone"/>

</LinearLayout>

Toolbar 包含一个 LinearLayout，我在代码中为其设置了一个 LayoutTransition。这一个很好地处理了外观:Toolbar 展开，第二个 AutoCompleteTextView 淡入。

问题在于消失:Toolbar 立即崩溃，而我仍然可以在我的白色背景上看到第二个 AutoCompleteTextView RecyclerView，一段时间后 AutoCompleteTextView 淡出，Toolbar 展开和折叠一次非常快。

我第二次尝试这个:

<!-- i set the LayoutTransition on THIS ONE -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CategoryStyle.Vertical"
    tools:context=".MainActivity"
    android:id="@+id/linear_toolbar">

    <!-- TOOLBAR -->
    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar_main"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        style="@style/ToolbarStyle">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <!-- AUTOCOMPLETE market -->
            <com.mwd.shoppinglist.Utility.AutoCompleteTextViewNoFilter
                android:id="@+id/shop_chooser"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Autocomplete"
                android:hint="@string/chooseShop"
                android:textSize="16sp"
                android:drawableRight="@drawable/ic_action_cancel"/>

            <!-- AUTOCOMPLETE product -->
            <com.mwd.shoppinglist.Utility.AutoCompleteTextViewNoFilter
                android:id="@+id/item_chooser"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Autocomplete"
                android:hint="@string/autoCompleteHint"
                android:textSize="16sp"
                android:drawableRight="@drawable/ic_action_cancel_dark"/>
        </LinearLayout>

    </android.support.v7.widget.Toolbar>

    <!-- RECYCLER VIEW -->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"/>

    <!-- TEMP TEXTVIEW -->
    <TextView
        android:id="@+id/main_temp1"
        android:text="@string/pick_a_market"
        style="@style/TempTextView"/>

    <!-- BUTTON -->
    <Button
        android:id="@+id/main_btn_start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_start"
        android:textSize="16sp"
        android:visibility="gone"/>

</LinearLayout>

这次消失处理得很好:AutoCompleteTextView 淡出，然后 Toolbar 折叠。

这一次，问题出现了: AutoCompleteTextView 在我的 RecyclerView 的白色背景上淡入，一段时间后工具栏展开。

两次第二个 AutoCompleteTextView 的出现/消失是通过将 Visibility 设置为 VISIBLE 或消失。

我也试过使用两个Toolbar，每个都有一个AutoCompleteTextView，滑入/滑出第二个，但我真的觉得这看起来在某些情况下很丑。

Answer 1

您可以使用 Android-Transition，而不是尝试让 LayoutTransition 执行您希望它执行的操作。库，并添加以下代码:

    final Animation animAutoComplete = ViewTransitionBuilder.transit(chooser).alpha(1f, 0f).range(0f, 0.7f).buildAnimation();
    //delayHeight(0) is required since the calculation requires current height, but it's still 0 when onCreate(Bundle) is called
    final Animation animAutoComplete2 = ViewTransitionBuilder.transit(chooser).delayHeight(0).range(0.7f, 1f).buildAnimation();
    final AnimationManager am = new AnimationManager();
    am.addAnimation(animAutoComplete2);
    am.addAnimation(animAutoComplete);

    //change this to suit your need
    findViewById(R.id.main_btn_start).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            am.cancelAnimation();
            am.setReverseAnimation(reverse);
            am.startAnimation(400);

            reverse = !reverse;
        }
    });

请注意，您必须下载整个项目或 fork 它，因为上面的一些代码不在 Gradle 可导入版本中。