BottomSheetDialogFragment + GoogleMapで表示が崩れる問題を解決する方法

6322 ワード
Android JetpackCompose Android テキストリンク

はじめに

今回はBottomSheetDialogFragmentの中にGoogleMapを実装した際に発生した問題の解決方法を紹介します。

発生した問題

下記の動画のように、BottomSheetDialogFragmentをバックキーで閉じる際に、GoogleMapの表示が崩れるという問題が発生しました。

実装概要

実装していたコードの概要は下記の通りです。
GoogleMapにはgooglemaps/android-maps-compose を使用していました。

BottomSheetFragment.kt
...
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        binding = FragmentBottomSheetBinding.inflate(inflater, container, false).apply {
            map.apply {
                setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
                setContent {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                    ) {
                        GoogleMap(
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(260.dp),
                        )
                    }
                }
            }
        }

        return binding.root
    }
...
fragment_bottom_sheet.xml
...
　　　　　　　　　　　　<androidx.compose.ui.platform.ComposeView
            android:id="@+id/map"
            android:layout_width="0dp"
            android:layout_height="260dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/title"
            />
...

解決した方法

バックキーをで閉じる際に呼ばれる、dismiss()をoverrideし、BottomSheetBehaviorのプロパティを変更してあげます。

BottomSheetDialogFragment.kt
...
override fun dismiss() {
    val parentView = binding?.root?.parent as? View ?: return
    BottomSheetBehavior.from(parentView).apply {
        isHideable = true
        state = BottomSheetBehavior.STATE_HIDDEN
    }
 }
...

おわりに

参考になると幸いです！