有很多解决方案可以在 Android 导航栏后面实现绘图,其中一些来自Google 本身,但是,没有一个可以开箱即用地在导航/手势栏后面显示底部表单。
完成这一切需要什么?
有很多解决方案可以在 Android 导航栏后面实现绘图,其中一些来自Google 本身,但是,没有一个可以开箱即用地在导航/手势栏后面显示底部表单。
完成这一切需要什么?
我们从一个片段开始:
internal open class MyBottomSheetDialogFragment : BottomSheetDialogFragment() {
private var myDialog: MyBottomSheetDialog? = null
val dialog: MyBottomSheetDialog
get() = myDialog ?: error("Dialog not yet created")
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog =
MyBottomSheetDialog(requireContext()).also { dialog ->
this.myDialog = dialog
}
}
这是对话框实现:
internal class MyBottomSheetDialog(context: Context) :
BottomSheetDialog(context, R.style.MyBottomSheetDialogTheme) {
override fun onAttachedToWindow() {
super.onAttachedToWindow()
val window = window
?: error("window not attached?!")
val sheetView = findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
?: error("bottom sheet design not found")
// ensure the navigation buttons / bar is rendered dark for a light sheet background
// and no, setting android:windowLightNavigationBar=true on the theme does _not_ work
WindowInsetsControllerCompat(window, sheetView)
.isAppearanceLightNavigationBars = true
// as soon as we have the actual insets, move the sheet down below the
// navigation area and give it back some padding so its contents are rendered
// above
ViewCompat.setOnApplyWindowInsetsListener(sheetView) { _, windowInsets ->
val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
sheetView.updatePadding(
bottom = insets.bottom
)
sheetView.updateLayoutParams<ViewGroup.MarginLayoutParams> {
bottomMargin = -insets.bottom
}
WindowInsetsCompat.CONSUMED
}
}
}
最后,这是主题:
<style name="MyBottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/MyBottomSheetStyle</item>
<!-- ATTENTION: BottomSheetDialog needs _both_, this attribute set to true _and_
a (semi)transparent navigation bar color, to enable edge-to-edge mode. -->
<item name="enableEdgeToEdge">true</item>
<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="shapeAppearanceLargeComponent">@style/MyBottomSheetShapeAppearance</item>
</style>
<style name="MyBottomSheetStyle" parent="Widget.MaterialComponents.BottomSheet.Modal">
<item name="android:windowIsFloating">false</item>
<item name="backgroundTint">@color/the_sheets_background_color</item>
</style>
<style name="MyBottomSheetShapeAppearance" parent="ShapeAppearance.MaterialComponents.LargeComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">8dp</item>
</style>