将样式应用于警报对话框

Question

我决定在安卓设备上尝试使用材料警告对话框。 我的问题是在应用一些样式时遇到了问题。查看文档后，我找到了以下内容：

<item name="materialAlertDialogTheme">@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog</item>

所以我决定尝试这个：

  <style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

    <item name="materialAlertDialogTheme">@style/Theme.App.MaterialDialogAlert</item>

  </style>
      <style name="Theme.App.MaterialDialogAlert" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <!-- FIXME: this does not work. it does not change the title appearance. -->
    <!--    <item name="materialAlertDialogTitleTextStyle">@style/TextAppearance.App.MaterialDialogAlert.Title.Text</item>-->
        <!-- FIXME: this change only the title font, not the message appearance -->
        <item name="android:fontFamily">@font/nunito_semi_bold</item>
        <item name="buttonBarPositiveButtonStyle">@style/Widget.App.Button.TextButton</item>
        <item name="buttonBarNegativeButtonStyle">@style/Widget.App.Button.TextButton</item>
      </style>

    <style name="TextAppearance.App.MaterialDialogAlert.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
        <item name="android:fontFamily">@font/nunito_semi_bold</item>
      </style>

到目前为止，我已经成功地为按钮添加了样式。但对于标题和消息，我有些问题。现在我能够使用以下代码为标题应用一些样式：

<item name="android:fontFamily">@font/nunito_semi_bold</item>

但我认为这不是正确的方法。首先，这并没有将字体应用于消息部分。其次，我想应用其他文本样式，一个用于标题，一个用于消息部分。

我还尝试检查此样式：MaterialAlertDialog.MaterialComponents.Title.Text，在其中我可以看到该项在某个时候被应用：

<item name="android:textAppearance">?attr/textAppearanceSubtitle1</item>

所以我决定在我的基础主题中声明这个：

<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
  </style>

  <style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
    <item name="android:fontFamily">@font/nunito_semi_bold</item>
  </style>

但是什么都没有改变。

所以我的问题是:

1. 如何使用主题/样式正确地完成这个操作。
2. 我当前的代码有什么问题？

编辑 我也尝试使用了这个:

  <style name="Theme.App.MaterialDialogAlert" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
    <item name="materialAlertDialogTitleTextStyle">@style/Dialog.App.MaterialDialogAlert.Title.Text</item>
    <item name="materialAlertDialogBodyTextStyle">@style/TextAppearance.App.MaterialDialogAlert.Body.Text</item>
    <item name="buttonBarPositiveButtonStyle">@style/Widget.App.Button.TextButton</item>
    <item name="buttonBarNegativeButtonStyle">@style/Widget.App.Button.TextButton</item>
  </style>

  <style name="Dialog.App.MaterialDialogAlert.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
    <item name="android:textAppearance">@style/TextAppearance.App.Subtitle1</item>
  </style>

  <style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
    <item name="fontFamily">@font/nunito_semi_bold</item>
    <item name="android:fontFamily">@font/nunito_semi_bold</item>
  </style>

但它没有起作用。 此外，我尝试了来自材料组件 repo 的这个。

  <style name="Theme.App.MaterialDialogAlert" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
    <item name="materialAlertDialogTitleTextStyle">@style/Dialog.App.MaterialDialogAlert.Title.Text</item>
    <item name="materialAlertDialogBodyTextStyle">@style/Dialog.App.MaterialDialogAlert.Body.Text</item>
    <item name="buttonBarButtonStyle">@style/Widget.App.Button.TextButton</item>
  </style>

  <style name="Dialog.App.MaterialDialogAlert.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
    <item name="android:textAppearance">@style/TextAppearance.App.Subtitle1</item>
  </style>

  <style name="Dialog.App.MaterialDialogAlert.Body.Text" parent="@style/MaterialAlertDialog.MaterialComponents.Body.Text">
    <item name="android:textAppearance">@style/TextAppearance.Body2</item>
    <item name="fontFamily">@font/nunito_regular</item>
    <item name="android:fontFamily">@font/nunito_regular</item>
    <item name="android:textColor">@color/color_error</item>
  </style>

但是它没有起作用。

我唯一能够自定义的是通过将以下内容添加到主题来添加标题：

<item name="android:windowTitleStyle">@style/Dialog.App.MaterialDialogAlert.Title.Text</item>

---

我正在检查库中的代码，我可以看到使用了这个布局：mtrl_alert_dialog.xml 在那里我可以看到这个：

<TextView
            android:id="@android:id/message"
            style="?attr/materialAlertDialogBodyTextStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="?attr/dialogPreferredPadding"
            android:paddingRight="?attr/dialogPreferredPadding"/>

我们可以看到对materialAlertDialogBodyTextStyle的引用。也许这是库中的一个错误？

- Leandro Ocampo

---

请查看我对 Material Dialog 的答案此处。 - Deepak Rajput

Answer 1

你可以使用这个样式来自定义标题和正文：

<style name="Theme.App.MaterialDialogAlert" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <!-- Title -->
    <item name="materialAlertDialogTitleTextStyle">@style/MyTitle_MaterialAlertDialog</item>
    <!-- Body -->
    <item name="materialAlertDialogBodyTextStyle">@style/BodyTextAppearance.MaterialComponents.Body2</item>
</style>

然后定义标题的样式：

<style name="MyTitle_MaterialAlertDialog" parent="@style/MaterialAlertDialog.MaterialComponents.Title.Text">
    <item name="android:textAppearance">@style/MyTitle_TextAppearance.MaterialComponents.Subtitle1</item>
</style>

<style name="MyTitle_TextAppearance.MaterialComponents.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
    <item name="fontFamily">.....</item>
    <item name="android:fontFamily">....</item>
    <item name="android:textStyle">.....</item>
</style>

接下来为 body 定义：

  <style name="BodyTextAppearance.MaterialComponents.Body2" parent="@style/MaterialAlertDialog.MaterialComponents.Body.Text">
    <item name="android:textColor">@color/....</item>
    <item name="android:textSize">20sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">true</item>
    <item name="fontFamily">.....</item>
    <item name="android:fontFamily">....</item>
  </style>

- Gabriele Mariotti

---

嗨，感谢你的回答。我试过了，但它没有起作用。我正在使用1.1.0-beta02版本。你在使用哪个版本？ - Leandro Ocampo

@LeandroOcampo 已更新答案。它适用于1.1.0-beta02和1.2.0-alpha01。 - Gabriele Mariotti

感谢您在文本样式中提到“fontFamily”和“android:fontFamily”。只有同时使用它们两个，才能在任何API上正常工作。 - Mahdi Khansari

@ChVas 感谢您的反馈。我已经更新了答案。 - Gabriele Mariotti

这真是一种魔法... 你在 Github 上的类似答案没有起作用，但这个可以。谢谢！ - Antares

Answer 2

首先应用此样式：

     <style name="MaterialAlertDialogRoundedStyle" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="shapeAppearanceOverlay">
        @style/ShapeAppearanceOverlay.MaterialAlertDialog.Rounded
    </item>// For rounded dialog
    <item name="materialAlertDialogTitleTextStyle">
        @style/TitleMaterialAlertDialog.MaterialComponents.Title.Text
    </item>//to change title text properties of dialog
    <item name="materialAlertDialogBodyTextStyle">
        @style/BodyMaterialAlertDialog.MaterialComponents.Body.Text
    </item>//to change body text properties of dialog
</style>

<style name="ShapeAppearanceOverlay.MaterialAlertDialog.Rounded" parent="">
    <item name="cornerSize">@dimen/_10sdp</item>
</style>

<style name="TitleMaterialAlertDialog.MaterialComponents.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
    <item name="android:textColor">@color/black</item>
    <item name="android:textSize">@dimen/_14ssp</item>
    <item name="android:fontFamily">@font/montserrat_semi_bold</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
</style>

<style name="BodyMaterialAlertDialog.MaterialComponents.Body.Text" parent="MaterialAlertDialog.MaterialComponents.Body.Text">
    <item name="android:textColor">@color/black</item>
    <item name="android:textSize">@dimen/_12ssp</item>
    <item name="android:textAppearance">@style/MyTitle_TextAppearance.MaterialComponents.Subtitle1</item>
</style>

<style name="MyTitle_TextAppearance.MaterialComponents.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
    <item name="fontFamily">@font/montserrat_regular</item>
    <item name="android:fontFamily">@font/montserrat_regular</item>
</style>

感谢您使用此代码打开对话框：

MaterialAlertDialogBuilder(
        context,
        R.style.MaterialAlertDialogRoundedStyle
    )
        .setTitle(getText(R.string.app_name))
        .setMessage(getString(R.string.are_you_sure_you_want_to_logout))
        .setCancelable(false)
        .setPositiveButton(getText(R.string.ok)) { dialog, _ ->
            dialog.dismiss()
        }
        .setNegativeButton(getText(R.string.cancel)) { dialog, _ ->
            dialog.dismiss()
        }
        .show()

- Deepak Rajput