本文为 Nick Rout 发布于 Medium 的文章译文(Google 翻译)
原文链接为 Hands-on with Material Components for Android: Dialogs
本文仅作为个人学习记录所用。如有涉及侵权,请相关人士尽快联系译文作者。
Android MDC 系列文章:
- 第一篇:【译】为Android设置Material Components主题
- 第二篇:【译】Android材质组件的动手实践:Bottom App Bar
- 第三篇:【译】Android材质组件的动手实践:Bottom Navigation
- 第四篇:【译】Android材质组件的动手实践:Bottom Sheet
- 第五篇:【译】Android材质组件的动手实践:Buttons
- 第六篇:【译】Android材质组件的动手实践:Chips
- 第七篇:【译】Android材质组件的动手实践:Cards
- 第八篇:【译】Android材质组件的动手实践:Dialogs
- 第九篇:【译】Android材质组件的动手实践:Selection Controls
这篇文章将介绍 Dialogs 组件的功能和API。要了解如何处理Android的Material Components的初始设置(包括Gradle依赖关系和创建应用程序主题),请参阅我的原始文章:
为Android设置Material Components主题
对话框是组件,通常带有模式窗口,显示在应用程序内容的前面。它们用于告知用户可能包含关键信息和/或需要做出决定的任务。它们有目的地打断电流,并一直显示在屏幕上,直到被解散或采取措施为止,因此应谨慎使用。
从设计的角度来看,可以在不同的场景中使用三种主要类型的对话框:
- 警报对话框:最简单的对话框,尽管有名称。用于用通常需要用户采取行动/确认的紧急信息来打扰用户。以标题,可选的支持文本和操作按钮为特征。
- 简单对话框:用于向用户显示一系列操作,这些操作在被点击时立即生效。不应包含操作按钮。
- 确认对话框:用于向用户显示单选或多选选项的列表。动作按钮用于确认选择。
上面所有这些都具有共同的特征:遮盖应用程序内容的背景稀松布(可以选择轻按以关闭对话框)和表面容器。
注意:存在第四种类型:全屏对话框。为此,官方文档建议使用*DialogFragment*
和资源限定符一起确定其显示方式。这不在本文的讨论范围之内,因此不会涉及。
基本用法🏁
可以使用来实现所有上述对话框类型 MaterialAlertDialogBuilder。该构建器类 AlertDialog 使用Material Design规范和主题来配置和实例化。
显示对话框的基本方法如下:
// Note: A second constructor exists to pass in a theme res ID
MaterialAlertDialogBuilder(context)
// Add customization options here
.show()
配置更改(例如设备旋转)后,上述方法将不会保留对话框。为了实现这一点,我们需要花一段DialogFragment时间使用MaterialAlertDialogBuilder
来提供Dialog
:
class AppDialogFragment : DialogFragment() {
override fun onCreateDialog(
savedInstanceState: Bundle?
): Dialog {
return MaterialAlertDialogBuilder(requireContext())
// Add customization options here
.create()
}
}
DialogFragment
可以使用导航体系结构组件显示,也可以通过Fragment
或Activity
通过以下方式手动显示:
// Note: A FragmentTransaction can be used in place of the manager
AppDialogFragment().show(requireFragmentManager(), TAG)
使用构建器进行定制🧰
可以通过将参数传递给来实现上面(和更多)三种对话框中列出的所有特征MaterialAlertDialogBuilder
。下面列出了其中一些。
注意:在以下大多数情况下,将使用硬编码值。该构建器还提供资源ID的重载。
标题和辅助文字
// Title
.setTitle("Title")
// Supporting text
.setMessage("Supporting text")
动作按钮
// Confirming action
.setPositiveButton("Confirm") { dialog, which ->
// Do something for button click
}
// Dismissive action
.setNegativeButton("Dismiss") { dialog, which ->
// Do something for button click
}
// Neutral action
.setNeutralButton("Neutral") { dialog, which ->
// Do something for button click
}
简单物品
val items = arrayOf("Item 1", "Item 2", "Item 3")
.setItems(items) { dialog, which ->
// Do something for item chosen
}
单项和多项选择项
val singleItems = arrayOf("Item 1", "Item 2", "Item 3", "Item 4")
val checkedItem = 0
// Single-choice items (initialized with checked item)
.setSingleChoiceItems(singleItems, checkedItem) { dialog, which ->
// Do something for item chosen
}
val multiItems = arrayOf("Item 1", "Item 2", "Item 3", "Item 4")
val checkedItems = booleanArrayOf(true, false, false, false)
// Multi-choice items (initialized with checked items)
.setMultiChoiceItems(items, checkedItems) { dialog, which, checked ->
// Do something for item chosen
}
图标
.setIcon(R.drawable.ic_android_24dp)
自定义布局/视图
.setView(R.layout.view_custom_dialog)
注意:对话框的中间区域可以被支持文本或一组特定类型的项目占用。这些不能合并。
选择主题叠加🤔
存在几个主题叠加层,用于更改对话框的总体布局。这些主题覆盖变体继承自ThemeOverlay.MaterialComponents.MaterialAlertDialog
,每个都有一个可选的后缀:
- 默认值:无后缀
-
居中:
*.Centered
,居中对齐的标题和图标
实施全局自定义Material AlertDialog
主题叠加层时,请在您的应用程序主题中使用materialAlertDialogTheme
属性引用它。
另外,还有一个辅助MaterialAlertDialogBuilder
构造函数,它接受覆盖的主题资源ID:
MaterialAlertDialogBuilder(context, R.style.ThemeOverlay_MaterialComponents_MaterialAlertDialog)
主题🎨
可以使用三个“材料主题”子系统为主题设置“材料警报”对话框:颜色,版式和形状。我们已经在上面的“选择主题叠加层”部分中显示了要使用的主题叠加层。除此之外,AlertDialog
可以通过扩展样式并使用属性在主题叠加层中引用自定义样式。MaterialAlertDialog.MaterialComponents``alertDialogStyle
颜色
有没有具体的属性自定义在一个对话框中使用的颜色,但colorPrimary
,colorSecondary
,colorSurface
和各自的“关于”在您的应用程序使用的主题会自动调整对话框颜色颜色改变时。
版式
对话框文本元素将采用fontFamily
您在应用程序主题中定义的属性。操作按钮的样式将根据textAppearanceButton
您在应用主题中设置的样式进行设置。
在主题叠加层中,您还可以使用materialAlertDialogBodyTextStyle
属性为正文文本专门设置样式。
形状
可以使用该shapeAppearance
属性自定义对话框背景的形状。默认为shapeAppearanceMediumComponent
。
更多资源📚
我希望这篇文章对对话框以及如何在您的Android应用中使用对话框提供了一些见识。如果您有任何疑问,想法或建议,那么我很乐意收到您的来信!
在Twitter上找到我@ricknout