使用 LayoutTransition 动画工具栏

Question

我想要实现的目标

我的应用有一个 Toolbar，其中包含 2 个 AutoCompleteTextView。 我只想在用户选择第一个中的某些内容时显示第二个，如果第一个被清除，我想再次隐藏它（我在AutoCompleteTextView 中有一个“X”来清除它）。

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

我试过了，但没用

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

我第一次这样尝试：

<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 立即崩溃，而我仍然可以在我的RecyclerView 的白色背景上看到第二个AutoCompleteTextView，然后过了一段时间@ 987654342@ 淡出，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 的白色背景，一段时间后Toolbar 扩展。

两次第二个AutoCompleteTextView 的出现/消失都由代码设置Visibility 处理为VISIBLE 或GONE。

我也尝试过使用两个 Toolbars，每个 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 可导入版本中。