Floating Action Button的app:layout_anchor属性失效,无法定位至底部导航栏中央
解决FAB居中底部导航栏的问题
你当前的核心问题是用了ConstraintLayout作为父布局,但app:layout_anchor是CoordinatorLayout专属的定位属性,ConstraintLayout不支持这个锚点逻辑,所以调Material版本也没用。下面给你两种可行的解决方案:
方案一:用CoordinatorLayout(推荐,符合Material Design规范)
把父布局换成CoordinatorLayout,配置BottomAppBar的底部固定行为,同时给FAB设置锚点重力:
<?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=".Home"> <com.google.android.material.bottomappbar.BottomAppBar android:id="@+id/bottomAppBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:fabCradleMargin="10dp" app:fabCradleRoundedCornerRadius="10dp" app:fabCradleVerticalOffset="10dp" app:layout_behavior="com.google.android.material.bottomappbar.BottomAppBar.Behavior"> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottomNavigationView" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/transparent_background" app:menu="@menu/bottom_nav_menu" /> </com.google.android.material.bottomappbar.BottomAppBar> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/baseline_add_24" app:layout_anchor="@id/bottomAppBar" app:layout_anchorGravity="center" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
关键修改点:
- 父布局替换为
CoordinatorLayout - 给BottomAppBar添加
app:layout_behavior,确保它固定在屏幕底部 - FAB添加
app:layout_anchorGravity="center",让它锚定在BottomAppBar正中央 - 移除BottomNavigationView的
layout_marginRight,避免菜单偏移
注意:你的底部导航菜单(bottom_nav_menu)建议设为偶数个选项,这样中间位置会空出来给FAB,不会出现菜单和按钮重叠的情况。
方案二:用ConstraintLayout(适配现有布局)
如果坚持用ConstraintLayout,直接给FAB设置水平居中+底部约束,用margin调整垂直位置和BottomAppBar的凹槽对齐:
<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".Home"> <com.google.android.material.bottomappbar.BottomAppBar android:id="@+id/bottomAppBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="bottom" app:fabCradleMargin="10dp" app:fabCradleRoundedCornerRadius="10dp" app:fabCradleVerticalOffset="10dp" app:layout_constraintBottom_toBottomOf="parent"> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottomNavigationView" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/transparent_background" app:menu="@menu/bottom_nav_menu" /> </com.google.android.material.bottomappbar.BottomAppBar> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/baseline_add_24" app:layout_constraintBottom_toBottomOf="@id/bottomAppBar" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" android:layout_marginBottom="15dp" /> <!-- 该值和BottomAppBar的fabCradleVerticalOffset对应 --> </androidx.constraintlayout.widget.ConstraintLayout>
关键修改点:
- 给BottomAppBar添加
app:layout_constraintBottom_toBottomOf="parent",固定在底部 - 给FAB设置水平居中约束,绑定到BottomAppBar底部,用margin调整垂直位置适配凹槽
内容的提问来源于stack exchange,提问作者OMRI Nsr Alden
相关产品推荐
相关产品推荐

