Material Design 没有样式化警报对话框
Posted
技术标签:
【中文标题】Material Design 没有样式化警报对话框【英文标题】：Material Design not styling alert dialogs 【发布时间】：2014-12-14 20:39:55 【问题描述】：我已将 appCompat 材质设计添加到我的应用程序中，但警报对话框似乎没有使用我的主色、primaryDark 或强调色。
这是我的基本风格：
<style name="MaterialNavyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/apptheme_color</item>
<item name="colorPrimaryDark">@color/apptheme_color_dark</item>
<item name="colorAccent">@color/apptheme_color</item>
<item name="android:textColorPrimary">@color/action_bar_gray</item>
</style>
根据我的理解，对话框按钮文本也应该使用这些颜色。我的理解有误还是我需要做更多的事情？
解决方法：
标记的答案让我走上了正轨。
<style name="MaterialNavyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/apptheme_color</item>
<item name="colorPrimaryDark">@color/apptheme_color_dark</item>
<item name="colorAccent">@color/apptheme_color</item>
<item name="android:actionModeBackground">@color/apptheme_color_dark</item>
<item name="android:textColorPrimary">@color/action_bar_gray</item>
<item name="sdlDialogStyle">@style/DialogStyleLight</item>
<item name="android:seekBarStyle">@style/SeekBarNavyTheme</item>
</style>
<style name="StyledDialog" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">@color/apptheme_color</item>
<item name="colorPrimaryDark">@color/apptheme_color_dark</item>
<item name="colorAccent">@color/apptheme_color</item>
</style>
【问题讨论】：
【参考方案1】：2019 年 8 月更新，包含适用于 android 库的 Material 组件：
通过新的Material components for Android library，您可以使用新的com.google.android.material.dialog.MaterialAlertDialogBuilder 类，它从现有的androidx.appcompat.AlertDialog.Builder 类扩展而来，并提供对最新材料设计规范的支持。
只要使用这样的东西：
new MaterialAlertDialogBuilder(context)
.setTitle("Dialog")
.setMessage("Lorem ipsum dolor ....")
.setPositiveButton("Ok", /* listener = */ null)
.setNegativeButton("Cancel", /* listener = */ null)
.show();
您可以自定义扩展 ThemeOverlay.MaterialComponents.MaterialAlertDialog 样式的颜色：
<style name="CustomMaterialDialog" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<!-- Background Color-->
<item name="android:background">#006db3</item>
<!-- Text Color for title and message -->
<item name="colorOnSurface">@color/secondaryColor</item>
<!-- Text Color for buttons -->
<item name="colorPrimary">@color/white</item>
....
</style>
要应用您的自定义样式，只需使用构造函数：
new MaterialAlertDialogBuilder(context, R.style.CustomMaterialDialog)
自定义按钮、标题和正文check this post了解更多详情。
您还可以全局更改应用主题中的样式：
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
...
<item name="materialAlertDialogTheme">@style/CustomMaterialDialog</item>
</style>
支持库和 APPCOMPAT 主题：
有了新的AppCompat v22.1，您可以使用新的android.support.v7.app.AlertDialog。
只需使用这样的代码：
import android.support.v7.app.AlertDialog
AlertDialog.Builder builder =
new AlertDialog.Builder(this, R.style.AppCompatAlertDialogStyle);
builder.setTitle("Dialog");
builder.setMessage("Lorem ipsum dolor ....");
builder.setPositiveButton("OK", null);
builder.setNegativeButton("Cancel", null);
builder.show();
并使用这样的样式：
<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#FFCC00</item>
<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:background">#5fa3d0</item>
</style>
否则你可以在你当前的主题中定义：
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- your style -->
<item name="alertDialogTheme">@style/AppCompatAlertDialogStyle</item>
</style>
然后在你的代码中：
import android.support.v7.app.AlertDialog
AlertDialog.Builder builder =
new AlertDialog.Builder(this);
这里是 Kitkat 上的 AlertDialog：
【讨论】：
@AAverin RE 材料设计指南：分隔线仅应在某些情况下出现。更常见的警报对话框使用场景不会使用它们，所以现在它采用更简单的样式。如果您属于需要分隔线的不太常见的情况，则必须升级到自定义对话框布局而不是简单的对话框构建器。对不起。 +1 获得极好的答案，但我如何才能在棒棒糖以下的 Android 版本中实现相同的用户界面...因为下面的设备用户界面看起来很奇怪。 @PranavPatel 使用 AppCompat 主题，您可以在所有具有 API 的设备上拥有相同的用户界面 添加 import android.support.v7.app.AlertDialog 有效 如何在里面添加监听器？【参考方案2】：初始化对话框生成器时，传递第二个参数作为主题。它将自动显示 API 级别 21 的材料设计。
AlertDialog.Builder builder = new AlertDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK);
或者，
AlertDialog.Builder builder = new AlertDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);
【讨论】：
【参考方案3】：AppCompat 不会为对话框执行此操作（至少目前还没有）
编辑： 现在可以了。确保使用android.support.v7.app.AlertDialog
【讨论】：
看起来您可以使用 AppCompat 对对话框样式进行一些修改 默认情况下，我的 Android Studio 给了我import app.AlertDialog，而不是 appCompat。在我真正检查之前，我试图找出问题所在大约 40 分钟......该死的谷歌！【参考方案4】：
你可以考虑这个项目： https://github.com/fengdai/AlertDialogPro
它可以为您提供与棒棒糖几乎相同的材料主题警报对话框。兼容 Android 2.1。
【讨论】：
请注意：此答案较旧，然后已被接受。【参考方案5】：你可以使用
材料设计库
Material Design Library 专为漂亮的警报对话框、按钮和其他东西（例如 小吃店）而设计。 目前它已得到大力开发。
指南、代码、示例 - https://github.com/navasmdc/MaterialDesignLibrary
指导如何将库添加到 Android Studio 1.0 - How do I import material design library to Android Studio?
.
编码愉快 ;)
【讨论】：
【参考方案6】：Material Design 样式提醒对话框：自定义字体、按钮、颜色和形状、..
MaterialAlertDialogBuilder(requireContext(),
R.style.MyAlertDialogTheme
)
.setIcon(R.drawable.ic_dialogs_24px)
.setTitle("Feedback")
//.setView(R.layout.edit_text)
.setMessage("Do you have any additional comments?")
.setPositiveButton("Send") dialog, _ ->
val input =
(dialog as AlertDialog).findViewById<TextView>(
android.R.id.text1
)
Toast.makeText(context, input!!.text, Toast.LENGTH_LONG).show()
.setNegativeButton("Cancel") _, _ ->
Toast.makeText(requireContext(), "Clicked cancel", Toast.LENGTH_SHORT).show()
.show()
风格：
<style name="MyAlertDialogTheme" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
<item name="android:textAppearanceSmall">@style/MyTextAppearance</item>
<item name="android:textAppearanceMedium">@style/MyTextAppearance</item>
<item name="android:textAppearanceLarge">@style/MyTextAppearance</item>
<item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
<item name="buttonBarNegativeButtonStyle">@style/Alert.Button.Neutral</item>
<item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Dialog.Rounded
</item>
</style>
<style name="MyTextAppearance" parent="TextAppearance.AppCompat">
<item name="android:fontFamily">@font/rosarivo</item>
</style>
<style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
<!-- <item name="backgroundTint">@color/colorPrimaryDark</item>-->
<item name="backgroundTint">@android:color/transparent</item>
<item name="rippleColor">@color/colorAccent</item>
<item name="android:textColor">@color/colorPrimary</item>
<!-- <item name="android:textColor">@android:color/white</item>-->
<item name="android:textSize">14sp</item>
<item name="android:textAllCaps">false</item>
</style>
<style name="Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
<item name="backgroundTint">@android:color/transparent</item>
<item name="rippleColor">@color/colorAccent</item>
<item name="android:textColor">@color/colorPrimary</item>
<!--<item name="android:textColor">@android:color/darker_gray</item>-->
<item name="android:textSize">14sp</item>
<item name="android:textAllCaps">false</item>
</style>
<style name="ShapeAppearanceOverlay.MyApp.Dialog.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">8dp</item>
</style>
输出：
【讨论】：
【参考方案7】：试试这个库：
https://github.com/avast/android-styled-dialogs
它基于DialogFragments 而不是AlertDialogs（就像来自@afollestad 的那个）。主要优点：对话框在旋转后不会关闭，回调仍然有效。
【讨论】：
我的图书馆功能更强大。你总是可以用 DialogFragment 包装一个 Dialog。 ?【参考方案8】：由于某种原因，android:textColor 似乎只更新了标题颜色。 您可以使用
更改消息文本颜色SpannableString.AlertDialog.Builder builder = new AlertDialog.Builder(new ContextThemeWrapper(this, R.style.MyDialogTheme));
AlertDialog dialog = builder.create();
Spannable wordtoSpan = new SpannableString("I know just how to whisper, And I know just how to cry,I know just where to find the answers");
wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 15, 30, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
dialog.setMessage(wordtoSpan);
dialog.show();
【讨论】：
以上是关于Material Design 没有样式化警报对话框的主要内容，如果未能解决你的问题，请参考以下文章
material-design-in-xaml 中 ComboBox 样式的问题
React Material Design：在类组件中使用带有 redux 的 React Material Design 自定义样式
对话框 XAML 和 Material Design WPF