如何创建具有自定义布局的模态底页？

Posted 2023-02-22

【中文标题】如何创建具有自定义布局的模态底页？

【英文标题】：How to create a Modal Bottom Sheet with a custom layout?

【发布时间】：2020-01-21 03:04:03

【问题描述】：

所以我有一个材料底片，可以扩展以延长计时器的时间。我想创建一个透明背景并阻止背景，直到工作表被解除。我知道模态底页可以做到这一点，但我不知道如何设置自定义布局。

这是我的底页布局：

<?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_
    android:layout_
    android:layout_gravity="end">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/bottom_sheet_layout"
        android:layout_
        android:layout_
        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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

            <fragment
                android:id="@+id/bottom_sheet_view"
                android:layout_
                android:layout_
                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？

提前致谢！

【问题讨论】：

不要在布局中使用fragment 标签。只需使用BottomTimeSheet = BottomTimeSheet() bottomTimeSheet.show(supportFragmentManager, "tag")。

【参考方案1】：

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

<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_
        android:layout_...



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)
    
...

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