如何实现CoordinatorLayout中ImageButton与BottomSheet的重叠悬浮效果

核心修改点 #

• 调整按钮位置偏移，让其底部覆盖BottomSheet顶部区域
• 确保按钮Z轴层级高于BottomSheet
• 调整布局顺序保障绘制层级优先级

修改后的布局代码 #

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/bottomSheetContainer"
        layout="@layout/bottom_sheet_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:elevation="@dimen/bottom_sheet_elevation" /> <!-- 显式设置BottomSheet的层级，确保低于按钮 -->

    <ImageButton
        android:id="@+id/but_location"
        android:layout_width="@dimen/button_height"
        android:layout_height="@dimen/button_height"
        android:layout_marginStart="@dimen/padding_medium"
        android:layout_marginEnd="@dimen/padding_medium"
        android:layout_marginTop="@dimen/padding_medium"
        android:layout_marginBottom="-@dimen/half_button_height" <!-- 负margin让按钮向下偏移，覆盖BottomSheet -->
        app:layout_anchor="@id/bottomSheetContainer"
        app:layout_anchorGravity="end|top"
        android:elevation="@dimen/map_button_elevation"
        android:translationZ="@dimen/map_button_elevation"
        android:src="@drawable/ic_location_icon"
        android:tint="@color/primary"
        style="@style/button.secondary" />

    <ImageButton
        android:id="@+id/but_exit"
        android:layout_width="@dimen/button_height"
        android:layout_height="@dimen/button_height"
        android:layout_marginStart="@dimen/padding_medium"
        android:layout_marginEnd="@dimen/padding_medium"
        android:layout_marginTop="@dimen/padding_medium"
        android:layout_marginBottom="-@dimen/half_button_height"
        app:layout_anchor="@id/bottomSheetContainer"
        app:layout_anchorGravity="start|top"
        android:elevation="@dimen/map_button_elevation"
        android:translationZ="@dimen/map_button_elevation"
        android:src="@drawable/ic_close"
        style="@style/button.primary" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

关键说明 #

1. 布局顺序调整：把bottomSheetContainer移到按钮前面，让按钮绘制在BottomSheet上方，再结合Z轴层级双重避免遮挡
2. 负margin偏移：通过android:layout_marginBottom="-@dimen/half_button_height"让按钮向下偏移，底部区域覆盖BottomSheet顶部。half_button_height需定义为按钮高度的一半（比如按钮高48dp，就设为24dp）
3. 层级控制：保证按钮的elevation和translationZ数值大于BottomSheet的elevation，彻底规避层级遮挡问题
4. 锚定优化：将layout_anchorGravity合并为end|top/start|top，简化属性配置逻辑

额外注意事项 #

• 如果BottomSheet用的是BottomSheetBehavior，可以在代码里设置behavior.setPeekHeight()，确保弹出高度足够让按钮的覆盖区域正常显示
• 若负margin方式不符合需求，也可以尝试app:layout_insetEdge="bottom"配合app:layout_dodgeInsetEdges="bottom"，但负margin的实现方式更直接可控

内容的提问来源于stack exchange，提问作者Martin