【译】Android材质组件的动手实践:Dialogs

本文为 Nick Rout 发布于 Medium 的文章译文(Google 翻译)
原文链接为 Hands-on with Material Components for Android: Dialogs
本文仅作为个人学习记录所用。如有涉及侵权,请相关人士尽快联系译文作者。


Android MDC 系列文章:


这篇文章将介绍 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可以使用导航体系结构组件显示,也可以通过FragmentActivity通过以下方式手动显示:

// 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

颜色

有没有具体的属性自定义在一个对话框中使用的颜色,但colorPrimarycolorSecondarycolorSurface和各自的“关于”在您的应用程序使用的主题会自动调整对话框颜色颜色改变时。

颜色主题

版式

对话框文本元素将采用fontFamily您在应用程序主题中定义的属性。操作按钮的样式将根据textAppearanceButton您在应用主题中设置的样式进行设置。

在主题叠加层中,您还可以使用materialAlertDialogBodyTextStyle属性为正文文本专门设置样式。

字体样式主题

形状

可以使用该shapeAppearance属性自定义对话框背景的形状。默认为shapeAppearanceMediumComponent

形状主题

更多资源📚


我希望这篇文章对对话框以及如何在您的Android应用中使用对话框提供了一些见识。如果您有任何疑问,想法或建议,那么我很乐意收到您的来信!

在Twitter上找到我@ricknout

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容