如何在 Android 中执行这种类型的底页对话框？

Question

我想设计这个活动布局。 Button Click 上会出现一张底部表格。我不知道如何在工作表的开头和结尾应用边距。它显示空白区域而不是黑色 Scrim。

这是我的 BottomSheet 布局

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@drawable/bottom_sheet"
    android:orientation="vertical">

    <TextView
        android:id="@+id/AssignNewTask_TxtView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Assign New Task"
        android:textColor="@color/buttonstartcolor"
        android:textSize="28sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/Select_Tasks_TxtView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Please Select Type Of Task to Assign"
        android:textColor="@color/welcometext"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/AssignNewTask_TxtView" />

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/Select_Tasks_TxtView">

        <RadioButton
            android:id="@+id/NewInstallation_RadioBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="@color/appbarcolor"
            android:text="New Installation"
            android:textColor="@color/welcometext"
            android:textSize="18sp"
            tools:targetApi="lollipop" />

        <RadioButton
            android:id="@+id/Repair_RadioBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="@color/appbarcolor"
            android:text="Repair"
            android:textColor="@color/welcometext"
            android:textSize="18sp"
            tools:targetApi="lollipop" />

        <RadioButton
            android:id="@+id/Service_RadioBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="@color/appbarcolor"
            android:text="Service"
            android:textColor="@color/welcometext"
            android:textSize="18sp"
            tools:targetApi="lollipop" />
    </RadioGroup>

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/AssignNewTaskNext_Button"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:background="@drawable/buttons"
        android:text="Next"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/radioGroup" />

</androidx.constraintlayout.widget.ConstraintLayout>

这是 kotlin 文件

class MainDashBoard : AppCompatActivity() {

    private lateinit var binding: ActivityMainDashBoardBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainDashBoardBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val USER_NAME = "Nikhil"
        binding.toolbar.AppBarActivityTxtView.text = USER_NAME

        binding.toolbar.SettingImgView.setOnClickListener{
            val i = Intent(this,Settings::class.java)
            startActivity(i)
        }
        showATBottomSheet()
    }

    private fun showATBottomSheet() {
        binding.AssignNewTaskButton.setOnClickListener {
            val bottomSheetDialog = BottomSheetDialog(this)
            bottomSheetDialog.setContentView(R.layout.bottom_sheet_assign_task)
            bottomSheetDialog.show()
        }
    }
}

任何人都有关于请回答的任何解决方案。 如果有任何库，则删除它的名称。

Answer 1

要实现这种 BottomSheet，您必须应用以下更改：

1. 将 Start 和 End 边距添加到底部工作表布局中的根 ConstraintLayout 及其左上角和右上角的背景，如下所示：

<androidx.constraintlayout.widget.ConstraintLayout 
    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:layout_marginStart="20dp"
    android:layout_marginEnd="20dp"
    android:background="@drawable/bottom_sheet">

@drawable/bottom_sheet 是 BottomSheet 背景，如下所示：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <corners android:topLeftRadius="15dp" android:topRightRadius="15dp"
        android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>

最终的 Xml 应该如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:layout_marginStart="20dp"
    android:layout_marginEnd="20dp"
    android:background="@drawable/bottom_sheet">

    <TextView
        android:id="@+id/AssignNewTask_TxtView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Assign New Task"
        android:textColor="@color/buttonstartcolor"
        android:textSize="28sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/Select_Tasks_TxtView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Please Select Type Of Task to Assign"
        android:textColor="@color/welcometext"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/AssignNewTask_TxtView" />

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/Select_Tasks_TxtView">

        <RadioButton
            android:id="@+id/NewInstallation_RadioBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="@color/appbarcolor"
            android:text="New Installation"
            android:textColor="@color/welcometext"
            android:textSize="18sp"
            tools:targetApi="lollipop" />

        <RadioButton
            android:id="@+id/Repair_RadioBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="@color/appbarcolor"
            android:text="Repair"
            android:textColor="@color/welcometext"
            android:textSize="18sp"
            tools:targetApi="lollipop" />

        <RadioButton
            android:id="@+id/Service_RadioBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="@color/appbarcolor"
            android:text="Service"
            android:textColor="@color/welcometext"
            android:textSize="18sp"
            tools:targetApi="lollipop" />
    </RadioGroup>

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/AssignNewTaskNext_Button"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:background="@drawable/buttons"
        android:text="Next"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/radioGroup" />

</androidx.constraintlayout.widget.ConstraintLayout>

2.在你的styles.xml中设置一个透明的BottomSheet Window样式，比如：

<style name="MyBottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
   <item name="android:colorBackground">@android:color/transparent</item>
   <item name="android:backgroundDimEnabled">true</item>
   <item name="android:backgroundDimAmount">0.3</item>
   <item name="android:windowFrame">@null</item>
   <item name="android:windowIsTranslucent">true</item>
   <item name="android:windowContentOverlay">@null</item>
</style>

3.在创建BottomSheet对话框时使用上述样式

val bottomSheetDialog = BottomSheetDialog(this, R.style.MyBottomSheetDialog)
bottomSheetDialog.setContentView(R.layout.bottom_sheet_assign_task)
bottomSheetDialog.show()

结果：