Android在BottomNavigation上重叠了FloatingActionButton

Question

我想在我的项目中设计这种布局：

由于许多Google AFIAK是可以在Android上设计的库，但我找不到它，所以我从Android素材网站拍摄了此屏幕截图。有人可以帮我设计吗？预先感谢

Answer 1

At the bottom of the material design page上有一个如何在Android，Flutter，iOS等上实现该链接的链接。

对于Android，您必须使用BottomAppBar小部件来实现所需的功能。您也可以阅读有关on the docs的更多信息。

<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"
      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>

来自here。

您可以使用带有以下参数的方法setAnchorId(int)来更改FAB位置：

• FAB_ALIGNMENT_MODE_CENTER
• FAB_ALIGNMENT_MODE_END

或者，您可以使用app:layout_anchor属性在XML中进行设置。

PS：：如文档中所述，要更改BottomAppBar背景，请使用app:backgroundTint属性，而不是默认的android:background。