Question

所以我有一个材料底表，它可以扩展以延长计时器的时间。我想创建一个透明的背景并阻止该背景，直到解散工作表为止。我知道模态底部工作表会执行此操作，但是我不知道如何设置自定义布局。

这是我底页的布局：

<?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:id="@+id/bottom_sheet_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="end">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/bottom_sheet_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="23dp"
        android:layout_gravity="end"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/bottom_sheet_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/time_sheet_text"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/bottom_sheet_btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/keyline_2"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.MyTheme.Rounded"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="60 minutes"
            />

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/bottom_sheet_btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/keyline_2"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.MyTheme.Rounded"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="50 minutes"
            />

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/bottom_sheet_btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/keyline_2"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.MyTheme.Rounded"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="40 minutes"
            />

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/bottom_sheet_btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/keyline_2"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.MyTheme.Rounded"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="30 minutes"
            />

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/bottom_sheet_btn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/keyline_2"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.MyTheme.Rounded"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn4"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="20 minutes"
            />

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/bottom_sheet_btn6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/keyline_2"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.MyTheme.Rounded"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="10 minutes"
            />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/time_sheet_remaining_text"
            style="@style/TextAppearance.MyTheme.Headline6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:includeFontPadding="false"
            android:text="-- : -- : --"
            android:textAlignment="center"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn6"
            app:layout_constraintEnd_toStartOf="@id/close_time_sheet_button"/>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/close_time_sheet_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/time_sheet_remaining_text"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_btn6"
            style="@style/MyTheme.Button.FloatingActionButton.Close"
            app:srcCompat="@drawable/ic_close_black_24dp"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

这在我的主要活动布局中称为：

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

            <fragment
                android:id="@+id/bottom_sheet_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:name="com.ds.base.fragments.BottomTimeSheet"
                tools:layout="@layout/bottom_sheet"/>

        </FrameLayout>

这是我的入门课：

class BottomTimeSheet: BottomSheetDialogFragment() {

    private lateinit var bottomSheetLayout: ConstraintLayout
    private lateinit var bottomSheetBehavior: BottomSheetBehavior<ConstraintLayout>
    lateinit var bottomSheetCloseBtn: FloatingActionButton
    lateinit var bottomSheetTimeText: MaterialTextView
    private lateinit var main: MainActivity

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        main = activity as MainActivity
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(com.ds.base.R.layout.bottom_sheet, container, false)

        bottomSheetCloseBtn = view.findViewById(com.ds.base.R.id.close_time_sheet_button)
        bottomSheetLayout = view.findViewById(com.ds.base.R.id.bottom_sheet_layout)
        bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetLayout)
        bottomSheetTimeText = view.findViewById(R.id.time_sheet_remaining_text)
        bottomSheetBehavior.setBottomSheetCallback(object: BottomSheetBehavior.BottomSheetCallback(){
            override fun onSlide(bottomSheet: View, slideOffset: Float) {
            }

            override fun onStateChanged(bottomSheet: View, newState: Int) {
                Log.d(TAG, "newState: $newState")
                when(newState){
                    BottomSheetBehavior.STATE_EXPANDED -> {
                    }
                }
            }

        })

        return view
    }



    fun showBottomTimeSheet(){
        if(bottomSheetBehavior.state == BottomSheetBehavior.STATE_COLLAPSED){
            bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
        }
    }

    fun hideBottomTimeSheet(){
        if(bottomSheetBehavior.state == BottomSheetBehavior.STATE_EXPANDED){
            bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
        }
    }


    companion object {
        val TAG = BottomTimeSheet::class.java.toString()
    }

}

这是通过以下方式调用的：

bottomSheet = BottomTimeSheet()
bottomSheet.showBottomTimeSheet()

以上是我为标准底页设置的方式。

我最初尝试使用模式底部面板，但是我的布局没有显示，并且宽度占用了屏幕的宽度。

如何使用与标准底板具有相同布局的模态底板？或者如何将窗口背景设置为透明并阻止UI？

谢谢！

Answer 1

我不知道为什么，但是我在RelativeLayout的父级中使用ConstraintLayout而不是BottomSheetDialogFragment。

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"...



class PlayerBottomSheetFragment : BottomSheetDialogFragment()

...
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        Log.logI("$TAG:onCreateView")
        return inflater.inflate(R.layout.bottom_sheet_player_fragment, container)
    }
...

尝试像这样使用。它和我一起工作。希望对您有帮助。

如何使用自定义布局创建模态底部工作表？

1 个答案: