带 FAB 的模态底板

Question

我已经实现了 FAB 固定在其顶部的持久底部表。

当我尝试对模态底部工作表（扩展 BottomSheetDialogFragment）执行相同操作时，它会说

java.lang.IllegalStateException: 找不到 CoordinatorLayout 后代视图以锚定视图 android.support.design.widget.FloatingActionButton

是否可以使用模态底部表单进行相同的布局，或者在持久层上方制作阴影和不可点击的区域？

Answer 1

我试图在 ModalBottomSheet 中做同样的“FAB on top”，但没有直接的方法/方法可以做到这一点。
对于这种情况，我们因此使用FrameLayout。在定义中，它说 -

子视图在堆栈中绘制，最近添加的子视图在顶部。

所以我们可以为 ModalBottomSheet（扩展 BottomSheetDialogFragment）创建一个布局，在您的情况下看起来像这样 -

<FrameLayout
    android:id="@+id/parent_frame_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".ModalBottomSheetFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="25dp"
        android:orientation="vertical">

        <!-- Whatever layout you want to give here. This is going to be the body
        of the ModalBottomSheet. Also you might not wanna use the current Linear 
        Layout too.-->

    </LinearLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/icon_sheet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:layout_gravity="center|top"
        android:src="@drawable/ic_music"
        android:elevation="20dp"/>

</FrameLayout>

请注意 -

1. FAB 是在 LinearLayout（BottomSheet 的主体）之后制作的，因为它会堆叠在 LinearLayout 上。
   
2. 我们为 LinearLayout 提供了 marginTop=25dp，但我们为 FAB 提供了 marginTop=0dp。这就是您创建半出半入效果的方式。并且还给出了 FAB 的高度，以获得更好的浮动外观。

最后，我们可以在 onCreateDialog 被覆盖的方法中扩展它的视图，然后执行所有必要的操作。

希望我能够回答您的问题。如有任何进一步的疑问/更新，请发表评论。

Answer 2

添加到@Krishn Agarwal 答案，我们需要确保底部工作表对话框具有透明主题，然后才能实现相同的外观和感觉。我们甚至可以使用约束布局而不是线性布局。我们可以使用 BottomSheetDialog/BottomSheetDialogFragment

        <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/parent_frame_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:orientation="vertical">
    
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/cl_success_dialog"
            style="@style/AppModalStyle"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="@dimen/margin_60"
            android:paddingStart="@dimen/dimen_25"
            android:paddingEnd="@dimen/dimen_25"
            android:paddingBottom="@dimen/dimen_25">
    
            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tv_title_text"
                style="@style/style_bottomsheet_header_22sp"
                android:gravity="center"
                android:layout_marginTop="80dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="@string/mf_mandate_creationsuccessful" />
    
            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tv_description"
                style="@style/open_sans_semi_bold_15sp_gray"
                android:layout_marginTop="@dimen/dimen_7"
                android:layout_marginBottom="@dimen/margin_25"
                app:layout_constraintBottom_toTopOf="@+id/go_to_dashboard_btn"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tv_title_text"
                tools:text="Description" />
    
            <androidx.appcompat.widget.AppCompatButton
                android:id="@+id/go_to_dashboard_btn"
                style="@style/mf_style_blue_button"
                android:layout_width="0dp"
                android:elevation="@dimen/margin_5"
                android:text="@string/mf_go_to_dashboard"
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tv_description"
                tools:targetApi="lollipop" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    
      <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floating_tick_icon"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_gravity="center|top"
            android:layout_marginTop="0dp"
            android:importantForAccessibility="no"
            android:visibility="visible"
            app:backgroundTint="@color/very_light_green"
            app:elevation="@dimen/margin_20"
            app:fabCustomSize="128dp"
            app:maxImageSize="128dp"
            app:srcCompat="@drawable/ic_success_tick"
            app:tint="@null" />
    </FrameLayout>