Блог

У меня возникла странная проблема при реализации Material Design ModalBottomSheet в одном из наших приложений в соответствии с документацией Material Design.

https://material.io/components/sheets-bottom/android#using-bottom-sheets

Я создал фрагмент и сопутствующее представление, как описано. В основном действии у меня есть кнопка, которая добавляет фрагмент в FragmentManager по щелчку. Когда я запускаю модальный нижний лист, я получаю заполнение в верхней части листа. Фон отображается правильно и ведет себя так, как ожидалось. Когда я полностью разворачиваю лист и меняю его обратно на полуоткрытый, отступ исчезает.

Я добавил красный цвет к внешнему описанию CoordinatorLayout, чтобы визуализировать проблему:

ModalBottomSheet (STATE_COLLAPSED) с заполнением вверху

modal_bottom_sheet.xml:

 <?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/color_error"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@ id/standardBottomSheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        style="?attr/bottomSheetStyle"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <View
            android:id="@ id/slideView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="16dp" />

        <TextView
            android:id="@ id/textView"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="Bottom Sheet"
            android:gravity="center" />

    </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
 

ModalBottomSheet.kt

 import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.core.os.bundleOf
import com.google.android.material.bottomsheet.BottomSheetDialog
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
import com.ricknout.mdctheming.R

class ModalBottomSheet : BottomSheetDialogFragment() {

    private var dismissWithAnimation = false

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? = inflater.inflate(R.layout.modal_bottom_sheet, container, false)

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        dismissWithAnimation = arguments?.getBoolean(ARG_DISMISS_WITH_ANIMATION) ?: false
        (requireDialog() as BottomSheetDialog).dismissWithAnimation = dismissWithAnimation
    }

    companion object {
        const val TAG = "ModalBottomSheet"
        private const val ARG_DISMISS_WITH_ANIMATION = "dismiss_with_animation"
        fun newInstance(dismissWithAnimation: Boolean): ModalBottomSheet {
            val modalBottomSheet = ModalBottomSheet()
            modalBottomSheet.arguments = bundleOf(ARG_DISMISS_WITH_ANIMATION to dismissWithAnimation)
            return modalBottomSheet
        }
    }
}
 

BottomSheetActivity.kt:

 ...
private fun showModalBottomSheet() {
    val modalBottomSheet = ModalBottomSheet.newInstance(modalDismissWithAnimation)
    modalBottomSheet.show(supportFragmentManager, ModalBottomSheet.TAG)
}
...