如何修复不同Android版本下BottomSheetDialog显示位置异常问题

问题描述 #

在Android 11系统中，BottomSheetDialog (BSD)的显示位置符合预期，但在更低版本系统中，它要么覆盖在Navigation Bar上方，要么显示在其下方，出现位置异常问题。问题示意图如下：

当前使用的XML布局代码如下：

<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="wrap_content"
    android:background="@drawable/modal_bottom_sheet_background"
    android:backgroundTint="?attr/backgroundColor"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:layout_gravity="bottom"
    app:layout_behavior="android.support.design.widget.BottomSheetBehaviorvior"
    >
    <androidx.cardview.widget.CardView
        android:id="@+id/fab_tabliceID"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/layout_container_margin_start_end_16"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="@dimen/layout_container_margin_start_end_16"
        app:cardCornerRadius="@dimen/card_corner_radius_15"
        app:layout_constraintTop_toTopOf="parent"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:padding="8dp"...

我曾尝试将所有布局内容包裹在CoordinatorLayout中，但该方案未能解决问题，对应XML代码如下：

<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">
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:background="@drawable/modal_bottom_sheet_background"
                android:backgroundTint="?attr/backgroundColor"
                app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
                <!--android:background="@android:color/transparent"-->
                <!--android:layout_gravity="bottom"-->
                <androidx.cardview.widget.CardView
                    android:id="@+id/fab_tabliceID"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/layout_container_margin_start_end_16"
                    android:layout_marginTop="32dp"
                    android:layout_marginEnd="@dimen/layout_container_margin_start_end_16"
                    app:cardCornerRadius="@dimen/card_corner_radius_15"
                    app:layout_constraintTop_toTopOf="parent">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center"...

我想到的一种可行方案是在代码中判断Android版本，按需为布局添加底部边距，但我认为这并不是最优的规范解法。请问有什么合适的解决方案可以解决该适配问题？

解决方案 #

这个问题是不同Android版本对WindowInsets（窗口插入值，包含导航栏、状态栏的高度信息）的分发逻辑差异导致的，不需要手动判断版本加边距，按如下步骤操作即可：

1. 修正布局配置
   首先你最早的布局中app:layout_behavior属性值存在拼写错误，正确的Material组件库对应值为com.google.android.material.bottomsheet.BottomSheetBehavior，不要使用旧support包下的行为类。
   其次给布局根节点添加android:fitsSystemWindows="true"属性，让系统自动计算导航栏占用高度，为布局添加对应底部padding，避免被导航栏遮挡或偏移。
2. 自定义BottomSheetDialog样式
   在res/values/styles.xml中添加如下样式配置：

   <style name="AdaptBottomSheetDialog" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
       <item name="android:windowIsFloating">false</item>
       <item name="android:navigationBarColor">@android:color/transparent</item>
       <item name="android:windowTranslucentNavigation">true</item>
       <item name="android:fitsSystemWindows">true</item>
   </style>
   

   初始化Dialog时指定该样式即可：

   // Kotlin写法
   val dialog = BottomSheetDialog(this, R.style.AdaptBottomSheetDialog)
   dialog.setContentView(你的布局视图)
   

   // Java写法
   BottomSheetDialog dialog = new BottomSheetDialog(this, R.style.AdaptBottomSheetDialog);
   dialog.setContentView(你的布局视图);
   

3. 可选优化
   如果你当前使用的Material组件库版本低于1.4.0，建议升级到最新稳定版，官方在1.4.0之后修复了大量BottomSheet在低版本系统的适配bug，可进一步减少兼容处理成本。

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