android - 如何在 Android 中执行这种类型的 BottomSheet 对话框？
问题描述
我想设计这个活动布局。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()
}
}
}
任何人都有关于请回答的任何解决方案。如果有任何库，则删除它的名称。
解决方案
要实现这种 BottomSheet，您必须应用以下更改：
1.将开始和结束边距添加到底部工作表布局中的根 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">
BottomSheet 背景在哪里@drawable/bottom_sheet，如下所示：
<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()
结果：
推荐阅读
- here-api - 如何在地理编码 JSON 响应中编辑城市名称
- html - 如何使动态可折叠
- android - 需要取消订阅 FCM 主题？
- excel - 在 Excel 中使用 VBA 宏中的参数执行 .exe
- sql-server - 从涉及其他两个日期之间的日期的查询中删除子查询
- android - 从页面导航到另一个页面时如何暂停颤动视频（video_player插件）
- angular - 带有扩展模板的组件子选择器
- angular - ngModel 在与 formControlName 相同的表单字段上
- python - 为什么 GPU 没有在 python 中显示
- java - openapi 生成 - 初始化对象