【譯】Android材質(zhì)組件的動(dòng)手實(shí)踐:Dialogs

本文為 Nick Rout 發(fā)布于 Medium 的文章譯文(Google 翻譯)
原文鏈接為 Hands-on with Material Components for Android: Dialogs
本文僅作為個(gè)人學(xué)習(xí)記錄所用。如有涉及侵權(quán),請(qǐng)相關(guān)人士盡快聯(lián)系譯文作者。


Android MDC 系列文章:


這篇文章將介紹 Dialogs 組件的功能和API。要了解如何處理Android的Material Components的初始設(shè)置(包括Gradle依賴關(guān)系和創(chuàng)建應(yīng)用程序主題),請(qǐng)參閱我的原始文章:

為Android設(shè)置Material Components主題

對(duì)話框是組件,通常帶有模式窗口,顯示在應(yīng)用程序內(nèi)容的前面。它們用于告知用戶可能包含關(guān)鍵信息和/或需要做出決定的任務(wù)。它們有目的地打斷電流,并一直顯示在屏幕上,直到被解散或采取措施為止,因此應(yīng)謹(jǐn)慎使用。

從設(shè)計(jì)的角度來看,可以在不同的場景中使用三種主要類型的對(duì)話框:

  • 警報(bào)對(duì)話框:最簡單的對(duì)話框,盡管有名稱。用于用通常需要用戶采取行動(dòng)/確認(rèn)的緊急信息來打擾用戶。以標(biāo)題,可選的支持文本和操作按鈕為特征。
  • 簡單對(duì)話框:用于向用戶顯示一系列操作,這些操作在被點(diǎn)擊時(shí)立即生效。不應(yīng)包含操作按鈕。
  • 確認(rèn)對(duì)話框:用于向用戶顯示單選或多選選項(xiàng)的列表。動(dòng)作按鈕用于確認(rèn)選擇。

上面所有這些都具有共同的特征:遮蓋應(yīng)用程序內(nèi)容的背景稀松布(可以選擇輕按以關(guān)閉對(duì)話框)和表面容器。

注意:存在第四種類型:全屏對(duì)話框。為此,官方文檔建議使用*DialogFragment*和資源限定符一起確定其顯示方式。這不在本文的討論范圍之內(nèi),因此不會(huì)涉及。

基本用法??

可以使用來實(shí)現(xiàn)所有上述對(duì)話框類型 MaterialAlertDialogBuilder。該構(gòu)建器類 AlertDialog 使用Material Design規(guī)范和主題來配置和實(shí)例化。

顯示對(duì)話框的基本方法如下:

// Note: A second constructor exists to pass in a theme res ID
MaterialAlertDialogBuilder(context)
    // Add customization options here
    .show()

配置更改(例如設(shè)備旋轉(zhuǎn))后,上述方法將不會(huì)保留對(duì)話框。為了實(shí)現(xiàn)這一點(diǎn),我們需要花一段DialogFragment時(shí)間使用MaterialAlertDialogBuilder來提供Dialog

class AppDialogFragment : DialogFragment() {

    override fun onCreateDialog(
        savedInstanceState: Bundle?
    ): Dialog {
        return MaterialAlertDialogBuilder(requireContext())
                // Add customization options here
                .create()
    }
}

DialogFragment可以使用導(dǎo)航體系結(jié)構(gòu)組件顯示,也可以通過FragmentActivity通過以下方式手動(dòng)顯示:

// Note: A FragmentTransaction can be used in place of the manager
AppDialogFragment().show(requireFragmentManager(), TAG)

使用構(gòu)建器進(jìn)行定制??

可以通過將參數(shù)傳遞給來實(shí)現(xiàn)上面(和更多)三種對(duì)話框中列出的所有特征MaterialAlertDialogBuilder。下面列出了其中一些。

注意:在以下大多數(shù)情況下,將使用硬編碼值。該構(gòu)建器還提供資源ID的重載。

標(biāo)題和輔助文字

// Title
.setTitle("Title")
// Supporting text
.setMessage("Supporting text")

動(dòng)作按鈕

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

單項(xiàng)和多項(xiàng)選擇項(xiàng)

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
}

圖標(biāo)

.setIcon(R.drawable.ic_android_24dp)

自定義布局/視圖

.setView(R.layout.view_custom_dialog)

注意:對(duì)話框的中間區(qū)域可以被支持文本或一組特定類型的項(xiàng)目占用。這些不能合并。

選擇主題疊加??

存在幾個(gè)主題疊加層,用于更改對(duì)話框的總體布局。這些主題覆蓋變體繼承自ThemeOverlay.MaterialComponents.MaterialAlertDialog,每個(gè)都有一個(gè)可選的后綴:

  • 默認(rèn)值:無后綴
  • 居中: *.Centered,居中對(duì)齊的標(biāo)題和圖標(biāo)

實(shí)施全局自定義Material AlertDialog主題疊加層時(shí),請(qǐng)?jiān)谀膽?yīng)用程序主題中使用materialAlertDialogTheme屬性引用它。

另外,還有一個(gè)輔助MaterialAlertDialogBuilder構(gòu)造函數(shù),它接受覆蓋的主題資源ID:

MaterialAlertDialogBuilder(context, R.style.ThemeOverlay_MaterialComponents_MaterialAlertDialog)

主題??

可以使用三個(gè)“材料主題”子系統(tǒng)為主題設(shè)置“材料警報(bào)”對(duì)話框:顏色版式形狀。我們已經(jīng)在上面的“選擇主題疊加層”部分中顯示了要使用的主題疊加層。除此之外,AlertDialog可以通過擴(kuò)展樣式并使用屬性主題疊加層中引用自定義樣式。MaterialAlertDialog.MaterialComponents``alertDialogStyle

顏色

有沒有具體的屬性自定義在一個(gè)對(duì)話框中使用的顏色,但colorPrimarycolorSecondarycolorSurface和各自的“關(guān)于”在您的應(yīng)用程序使用的主題會(huì)自動(dòng)調(diào)整對(duì)話框顏色顏色改變時(shí)。

顏色主題

版式

對(duì)話框文本元素將采用fontFamily您在應(yīng)用程序主題中定義的屬性。操作按鈕的樣式將根據(jù)textAppearanceButton您在應(yīng)用主題中設(shè)置的樣式進(jìn)行設(shè)置。

在主題疊加層中,您還可以使用materialAlertDialogBodyTextStyle屬性為正文文本專門設(shè)置樣式。

字體樣式主題

形狀

可以使用該shapeAppearance屬性自定義對(duì)話框背景的形狀。默認(rèn)為shapeAppearanceMediumComponent

形狀主題

更多資源??


我希望這篇文章對(duì)對(duì)話框以及如何在您的Android應(yīng)用中使用對(duì)話框提供了一些見識(shí)。如果您有任何疑問,想法或建議,那么我很樂意收到您的來信!

在Twitter上找到我@ricknout

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容