BottomSheetDialog 与 EditText（删除键盘下的背景）

Question

我有一个 BottomSheetDialog，用作评论部分。在它的底部，有一个 EditText 视图，使用户能够添加新评论。

当键盘出现时就会出现问题 - 在上滑动画期间，活动布局的背景（粉色）可见，这可能会分散注意力，尤其是在鲜艳的颜色下。

我正在寻找一种解决方案，以隐藏此背景，使其在键盘向上滑动时不会出现，类似于 Instagram、YouTube 和 Facebook 等应用程序中的行为。

问题视频（动画速度已减慢）：https://youtube.com/shorts/_eY3EBJDh-c

我想要实现的目标： https://youtube.com/shorts/B732ERIajpE

1。主画面

2。评论区开通了

3.按EditText（可见问题。我想隐藏键盘向上滑动时出现的粉红色背景）

4。打开键盘

MainActivity.kt

  private fun init() {
        binding.buttonComments.setOnClickListener {
            openComments()
        }
    }

    private fun openComments() {
        BottomSheetCommentSection().show(supportFragmentManager, null)
    }

BottomSheetCommentSection.kt

class BottomSheetCommentSection : BottomSheetDialogFragment() {

    lateinit var bottomSheetLayoutBinding: BottomSheetLayoutBinding

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        bottomSheetLayoutBinding = BottomSheetLayoutBinding.inflate(inflater)
        return bottomSheetLayoutBinding.root
    }

    override fun getTheme(): Int {
        return R.style.ModalBottomSheetDialog
    }

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val bottomSheetDialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
        bottomSheetDialog.setOnShowListener {
            val containerLayout = dialog?.findViewById(
                com.google.android.material.R.id.container
            ) as? FrameLayout

            // Add EditText for new comments
            val layoutEdittextNewCommentBinding = LayoutEdittextNewCommentBinding.inflate(
                LayoutInflater.from(requireContext())
            )

            val layoutParams = FrameLayout.LayoutParams(
                FrameLayout.LayoutParams.MATCH_PARENT,
                FrameLayout.LayoutParams.WRAP_CONTENT,
                Gravity.BOTTOM
            )

            containerLayout?.addView(
                layoutEdittextNewCommentBinding.root,
                layoutParams
            )

            layoutEdittextNewCommentBinding.root.viewTreeObserver.addOnGlobalLayoutListener(object :
                ViewTreeObserver.OnGlobalLayoutListener {
                override fun onGlobalLayout() {
                    layoutEdittextNewCommentBinding.root.viewTreeObserver.removeOnGlobalLayoutListener(
                        this
                    )
                    bottomSheetLayoutBinding.root.setPadding(
                        0,
                        0,
                        0,
                        layoutEdittextNewCommentBinding.root.measuredHeight
                    )
                }
            })
        }

        return bottomSheetDialog
    }
}

bottom_sheet_layout.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:id="@+id/viewTop"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="#FF0000" />

        <View
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/viewTop"
            android:background="#000000" />
    </RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

layout_edittext_new_comment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#212121"
        android:hint="Enter comment ..."
        android:padding="16dp"
        android:textColor="@color/white"
        android:textColorHint="#909090"
        android:textSize="20sp" />
</LinearLayout>

主题.xml

<resources>
    <!-- Base application theme. -->
    <style name="Theme.CommentSection" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" >?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

    <style name="ModalBottomSheet" parent="Widget.Material3.BottomSheet.Modal">
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="shapeAppearance">@null</item>
    </style>

    <style name="ModalBottomSheetDialog" parent="ThemeOverlay.Material3.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/ModalBottomSheet</item>
        <item name="colorSurface">#000000</item>
        <item name="android:windowSoftInputMode">adjustResize</item>
    </style>
</resources>

我将不胜感激任何帮助。

Answer 1

所有使用BottomSheetDialog进行评论的应用程序都存在同样的问题（例如Instagram，YouTube）。我在慢速模式下测试它。我认为解决这个问题的正确方法是在活动背景和BottomSheet中设置相同的颜色。