使用 BottomAppBar 材料设计组件的片段过渡

Posted 2023-02-22

【中文标题】使用 BottomAppBar 材料设计组件的片段过渡

【英文标题】：Fragment transition with BottomAppBar Material Design Component

【发布时间】：2019-02-02 08:47:59

【问题描述】：

我正在尝试实现材料设计组件文档中关于浮动操作按钮的以下底部应用栏转换。

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

现在，该视图的实现文档指定以下内容：

FloatingActionButton 对齐模式 FloatingActionButton 可以是 与中心 (FAB_ALIGNMENT_MODE_CENTER) 或末端对齐 (FAB_ALIGNMENT_MODE_END) 通过调用 setFabAlignmentMode(int)。这 默认动画将自动运行。这个可以协调 带有片段过渡以允许从 主屏幕到辅助屏幕。 (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_
    android:layout_
    tools:context=".main.MainActivity">

    <LinearLayout
        android:id="@+id/container"
        android:layout_
        android:layout_
        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_
        android:layout_
        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_
        android:layout_
        app:layout_anchor="@id/bottom_app_bar"
        app:srcCompat="@drawable/ic_add" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

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

谢谢！

【问题讨论】：

检查this和this

@FalloutBoy 我已经检查了这些来源，它们不使用片段。因此他们没有实现正确的过渡和/或布局。

【参考方案1】：

你只需要隐藏它，然后监听器检测到它隐藏并再次显示它，转换会自动执行。同时你必须切换片段。

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();
    
);