使用LayoutTransition动画工具栏

Question

我想要实现的目标

我的应用程序Toolbar包含2个AutoCompleteTextView.我想仅在用户选择第一个时显示第二个,并且如果第一个被清除则再次隐藏它(我在AutoCompleteTextView清除它时有一个'X' ).

我希望Toolbar在这两种状态之间进行动画制作AutoCompleteTextView,在第一种状态中选择某些东西时将其扩展并在第二种状态中淡出,并在第二种状态被清除时淡出第二种状态AutoCompleteTextView并折叠Toolbar.

我尝试了什么,但没有奏效

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

我第一次尝试这种方式:

<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并且经过一段时间的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;
        }
    });

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