如何使用底部表对话框Android实现边缘到边缘

发布于 2025-01-24 13:36:51 字数 1960 浏览 0 评论 0原文

我完全基于沉浸式模式有一个Android应用程序。我已经设法在整个应用程序上进行边缘到边缘,但是当我打开一个底部纸对话框时,屏幕上的peek高度为90%,滚动浏览量可容纳长表格。但是,当我打开底部纸时,视图底部有一个空白空间,这正是系统导航栏的大小。有没有办法删除该空间并使底部纸延伸到屏幕的底部?

这是底部表的快照,完全展开 ”底部表屏幕截图

编辑:添加了我的底部表对话框类别的示例

class MyBottomSheetDialog
constructor(val ctx: Context, val height: Int) :
    BaseDialog(ctx) {
...
override fun onStart() {
        super.onStart()
        binding.root.layoutParams.height = height
        binding.root.requestLayout()
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        window?.let {
            WindowCompat.setDecorFitsSystemWindows(
                it,false
            )
        }
        findViewById<View>(com.google.android.material.R.id.container)?.fitsSystemWindows = false
        findViewById<View>(com.google.android.material.R.id.coordinator)?.fitsSystemWindows = false
    }
...
}

- base类是 -

open class BaseDialog
constructor(
    private val dialogContext: Context) : BottomSheetDialog(dialogContext, style) {

override fun onStart() {
        super.onStart()
        hideNavigation()
    }

    private fun hideNavigation() {
        window?.apply {
            val uiOptions: Int = decorView.systemUiVisibility
            val newUiOptions = uiOptions or
                    View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY or
                    View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or
                    View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
                    View.SYSTEM_UI_FLAG_FULLSCREEN

            decorView.systemUiVisibility = newUiOptions

            setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
            setGravity(Gravity.BOTTOM)
        }
    }
}

I have an android application entirely based on immersive mode. I have managed to go edge-to-edge for the entire application but when I open a bottom sheet dialog with peek height of uptop 90% of the screen and a scrollview to accomodate a long form. However, when I open the bottom sheet, there is a blank space at the bottom of the view which is exactly the size of the system navigation bar. Is there a way to remove that space and have the bottom sheet extend right upto the bottom of the screen?

Here's a snapshot of the bottom sheet fully expanded bottom sheet screenshot

EDIT: Added Example of My bottomsheet dialog class-

class MyBottomSheetDialog
constructor(val ctx: Context, val height: Int) :
    BaseDialog(ctx) {
...
override fun onStart() {
        super.onStart()
        binding.root.layoutParams.height = height
        binding.root.requestLayout()
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        window?.let {
            WindowCompat.setDecorFitsSystemWindows(
                it,false
            )
        }
        findViewById<View>(com.google.android.material.R.id.container)?.fitsSystemWindows = false
        findViewById<View>(com.google.android.material.R.id.coordinator)?.fitsSystemWindows = false
    }
...
}

And The base class is-

open class BaseDialog
constructor(
    private val dialogContext: Context) : BottomSheetDialog(dialogContext, style) {

override fun onStart() {
        super.onStart()
        hideNavigation()
    }

    private fun hideNavigation() {
        window?.apply {
            val uiOptions: Int = decorView.systemUiVisibility
            val newUiOptions = uiOptions or
                    View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY or
                    View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or
                    View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
                    View.SYSTEM_UI_FLAG_FULLSCREEN

            decorView.systemUiVisibility = newUiOptions

            setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
            setGravity(Gravity.BOTTOM)
        }
    }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

淡写薰衣草的香 2025-01-31 13:36:51

在主题中的底部表面范围中

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog =
    object : BottomSheetDialog(requireContext(), theme) {
        override fun onAttachedToWindow() {
            super.onAttachedToWindow()

            window?.let {
                WindowCompat.setDecorFitsSystemWindows(it, false)
            }

            findViewById<View>(com.google.android.material.R.id.container)?.apply {
                fitsSystemWindows = false
                ViewCompat.setOnApplyWindowInsetsListener(this) { view, insets ->
                    insets.apply {
                        view.updatePadding(bottom = 0)
                    }
                }
            }

            findViewById<View>(com.google.android.material.R.id.coordinator)?.fitsSystemWindows = false
        }
    }

<item name="bottomSheetDialogTheme">@style/BottomSheetDialogTheme</item>

在样式中:

  <style name="BottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/AppModalStyle</item>
    <item name="android:navigationBarColor">@color/transparent</item>
    <item name="android:windowLightStatusBar">false</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:statusBarColor">@color/transparent</item>
</style>

<style name="AppModalStyle" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@null</item>
</style>

In your bottomSheetFragment

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog =
    object : BottomSheetDialog(requireContext(), theme) {
        override fun onAttachedToWindow() {
            super.onAttachedToWindow()

            window?.let {
                WindowCompat.setDecorFitsSystemWindows(it, false)
            }

            findViewById<View>(com.google.android.material.R.id.container)?.apply {
                fitsSystemWindows = false
                ViewCompat.setOnApplyWindowInsetsListener(this) { view, insets ->
                    insets.apply {
                        view.updatePadding(bottom = 0)
                    }
                }
            }

            findViewById<View>(com.google.android.material.R.id.coordinator)?.fitsSystemWindows = false
        }
    }

in themes:

<item name="bottomSheetDialogTheme">@style/BottomSheetDialogTheme</item>

in styles:

  <style name="BottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/AppModalStyle</item>
    <item name="android:navigationBarColor">@color/transparent</item>
    <item name="android:windowLightStatusBar">false</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:statusBarColor">@color/transparent</item>
</style>

<style name="AppModalStyle" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@null</item>
</style>
寄人书 2025-01-31 13:36:51

根据材料底部表doc

如果导航栏是透明的,并且app:eNableDgetOedeedge is true ,则在API 21上及更高上方的模态底部表将进行全屏(边缘至边缘)。要默认启用模态底部的边缘到边缘,您可以覆盖?atter/bottomsheetdialogtheme类似于以下示例:

<style name="AppTheme" parent="Theme.Material3.*">
  ...
  <item name="bottomSheetDialogTheme">@style/ThemeOverlay.App.BottomSheetDialog</item>
</style>

<style name="ThemeOverlay.App.BottomSheetDialog" parent="ThemeOverlay.Material3.BottomSheetDialog">
    <item name="android:navigationBarColor" tools:ignore="NewApi">@android:color/transparent</item>
</style>

在主题文件中。另请参见 Google Edge到Edge训练页面

According to the Material Bottom Sheet doc:

On API 21 and above the modal bottom sheet will be rendered fullscreen (edge to edge) if the navigation bar is transparent and app:enableEdgeToEdge is true. To enable edge-to-edge by default for modal bottom sheets, you can override ?attr/bottomSheetDialogTheme like the below example:

<style name="AppTheme" parent="Theme.Material3.*">
  ...
  <item name="bottomSheetDialogTheme">@style/ThemeOverlay.App.BottomSheetDialog</item>
</style>

<style name="ThemeOverlay.App.BottomSheetDialog" parent="ThemeOverlay.Material3.BottomSheetDialog">
    <item name="android:navigationBarColor" tools:ignore="NewApi">@android:color/transparent</item>
</style>

in your theme file. See also Google edge to edge training page.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文