使用LayoutTransition动画工具栏

时间:2015-07-23 21:08:29

标签: android android-animation android-toolbar

我想要实现的目标

我的应用有Toolbar,其中包含2 AutoCompleteTextView。 我希望仅在用户选择第一个时显示第二个,并且如果第一个被清除则再次隐藏它(我在{{1}中有一个' X'清除它。)

我希望AutoCompleteTextView在这两种状态之间进行动画处理,在第一种状态中选择某些内容时将其扩展并在第二种Toolbar中淡出,并淡出第二种状态AutoCompleteTextView 1}}并在第一个被清除时折叠AutoCompleteTextView

我尝试了什么,但没有工作

我尝试使用Toolbar,在XML设置LayoutTransition中为true,在代码中声明android:animateLayoutChanges并将其设置为包含LayoutTransition的{​​{1}} }}第

我第一次尝试这种方式:

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> 崩溃。

这一次,出现了问题: AutoCompleteTextViewToolbar的白色背景上消失了一段时间后AutoCompleteTextView展开了

两次第二个RecyclerView的显示/消失由代码设置ToolbarAutoCompleteTextViewVisibility处理。

我也尝试使用两个VISIBLE,每个GONE,滑入/滑出第二个,但我真的认为这看起来像是丑陋的在某些情况下。

1 个答案:

答案 0 :(得分:0)

您可以使用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可导入的版本中。