如何将 FAB 位置从插入更改为与 BottomAppBar 重叠？答案

【问题标题】：How to change FAB position from inset to overlap with BottomAppBar?如何将 FAB 位置从插入更改为与 BottomAppBar 重叠？
【发布时间】：2021-09-11 19:55:29
【问题描述】：

左侧 AppBar 显示当前设计，我想将其更改为右侧设计

如何将 FAB 位置从插入更改为与 BottomAppBar 重叠？

【问题讨论】：

像this 这样在FAB 上减小半径和边距可能是要走的路。

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

【解决方案1】：

在这种情况下，您不能使用app:layout_anchor 属性，以便FAB 可以与BottomNavigationView 相交而没有切口。

您可以使用ConstraintLayout 属性将FAB 居中在BottomNavView 的顶部边缘

并且要么在BottomNavBar 上使用0dp 高程，要么在FAB 上使用一个很大的高程，以便FAB 可以放在它上面。

更多信息请check the documentation。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floating_button"
        style="@style/Widget.MaterialComponents.FloatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint="@color/purple_200"
        app:layout_constraintBottom_toTopOf="@id/navigation"
        app:layout_constraintEnd_toEndOf="@id/navigation"
        app:layout_constraintStart_toStartOf="@id/navigation"
        app:layout_constraintTop_toBottomOf="@id/navigation"
        app:elevation="10dp"
        app:layout_constraintTop_toTopOf="@id/navigation"
        app:srcCompat="@drawable/ic_baseline_star_24"
        app:tint="@color/white" />


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/background"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：