如何在底部应用栏前设置 FAB？答案

【问题标题】：How to set FAB in front of bottom app bar?如何在底部应用栏前设置 FAB？
【发布时间】：2019-04-24 12:23:21
【问题描述】：

如何将浮动操作按钮置于底部应用栏的前面？也就是说，如何设置底部应用栏填满fab后面的整行？

从这里：

对此：

图片来自medium.com

根据this tutorial 应该有一个名为fabCradleDiameter 的属性，但实际上这个组件没有这样的属性。

【问题讨论】：

你尝试了什么？
使用 FrameLayout 或其后代之一来容纳您的 FAB。
请粘贴您当前的代码，看看到目前为止您尝试了什么..

标签： android android-layout material-design floating-action-button material-components-android

【解决方案1】：

只需使用官方BottomAppBar 并使用：

fabCradleMargin 属性。它增加或减少FloatingActionButton 和BottomAppBar 之间的距离
fabCradleRoundedCornerRadius 属性。它指定切口周围角的圆度

用途：

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bar"
    android:layout_gravity="bottom"
    app:fabCradleMargin="0dp"
    app:fabCradleRoundedCornerRadius="0dp"
    ... />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    app:layout_anchor="@id/bar"
    .../>

【讨论】：

【解决方案2】：

关键是使用新的材质主题。此外，您的容器布局应该是协调器布局。使用下面的代码来改变你的布局。

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <!-- Other components and views -->

  <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom"
      style="@style/Widget.MaterialComponents.BottomAppBar"      //Material style. 
      app:navigationIcon="@drawable/ic_menu_24"/>

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_anchor="@id/bar"/>

</android.support.design.widget.CoordinatorLayout>

【讨论】：

我想你一看到我的问题的第一句话，就赶紧在这里给出答案。请仔细阅读问题。

【解决方案3】：

试试这个它对我有用..可能对你也有用。

<android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="0dp"
        app:fabCradleRoundedCornerRadius="0dp"
        app:hideOnScroll="true"
        app:navigationIcon="@drawable/ic_menu_black_24dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_favorite_red_24dp"
        app:borderWidth="0dp"
        app:fabSize="normal"
        app:layout_anchor="@id/bottomAppBar" />

【讨论】：

【解决方案4】：

是的，没有一个名为fabCradleDiameter的属性，它的fabCradleMargin

并确保版本在以下：

com.google.android.material:material:1.0.0-alpha3

【讨论】：