使用BottomAppBar材质设计组件进行片段过渡

时间:2018-08-27 19:13:19

标签: android transition floating-action-button appbar

我正在尝试实施以下材料设计组件文档中针对浮动操作按钮指定的底部appbar过渡。

enter image description here

为此行为指定了官方设计文档here

现在,此视图的实现文档指定以下内容:

  

FloatingActionButton对齐方式   FloatingActionButton可以是   对齐到中心(FAB_ALIGNMENT_MODE_CENTER)或末尾   (FAB_ALIGNMENT_MODE_END),方法是调用setFabAlignmentMode(int)。的   默认动画将自动运行。这可以协调   带有Fragment过渡,以允许从   主屏幕到次屏幕。 (source)

我似乎找不到在任何地方实现的行为的任何示例。 我用于底部appbar组件的代码如下(在我的活动布局文件中):

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".main.MainActivity">

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:background="#000">

    </LinearLayout>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center"
        app:hideOnScroll="true"
        app:navigationIcon="@drawable/ic_hamburger_menu" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bottom_app_bar"
        app:srcCompat="@drawable/ic_add" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

非常感谢您提供一些有关此问题的指导或示例。

谢谢!

1 个答案:

答案 0 :(得分:0)

您只需要隐藏它,然后侦听器便会检测到它已隐藏并再次显示,过渡将自动执行。另外,您必须同时切换片段。

binding.fabMain.hide(new FloatingActionButton.OnVisibilityChangedListener() {
    @Override
    public void onShown(FloatingActionButton fab) {
        super.onShown(fab);
    }

    @Override
    public void onHidden(FloatingActionButton fab) {
        super.onHidden(fab);
        binding.fabMain.show();
    }
});