如何在 Android 中创建此类底部表单对话框？
How to do this type of BottomSheet dialogin Android?
我想设计这个activity布局。单击按钮时出现一个底部 sheet。我不知道如何在 sheet 的开始和结束时应用边距。它显示白色 space 而不是黑色 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()
}
}
}
任何人都有关于请回答的任何解决方案。
如果有任何库，则删除它的名称。
要实现这种 BottomSheet，您必须应用以下更改：
1.Add 底部 sheet 布局中根 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.Set 一个透明的 BottomSheet Window 样式在你的 styles.xml 比如：
<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.Use创建BottomSheet对话框时的上述样式
val bottomSheetDialog = BottomSheetDialog(this, R.style.MyBottomSheetDialog)
bottomSheetDialog.setContentView(R.layout.bottom_sheet_assign_task)
bottomSheetDialog.show()
结果：
我想设计这个activity布局。单击按钮时出现一个底部 sheet。我不知道如何在 sheet 的开始和结束时应用边距。它显示白色 space 而不是黑色 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()
}
}
}
任何人都有关于请回答的任何解决方案。 如果有任何库，则删除它的名称。
要实现这种 BottomSheet，您必须应用以下更改：
1.Add 底部 sheet 布局中根 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.Set 一个透明的 BottomSheet Window 样式在你的 styles.xml 比如：
<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.Use创建BottomSheet对话框时的上述样式
val bottomSheetDialog = BottomSheetDialog(this, R.style.MyBottomSheetDialog)
bottomSheetDialog.setContentView(R.layout.bottom_sheet_assign_task)
bottomSheetDialog.show()
结果：