Android Material Components – MaterialAlertDialog

时间:2020-02-23 14:29:03  来源:igfitidea点击:

Material Design 2.0即将发布,我们迫不及待地想要使用Dialogs。
在本教程中,我们将使用Android应用程序中的Material Theme自定义对话框。

材料组件–对话框

警报对话框是应用程序的重要组成部分。
通常用于将用户的注意力吸引到重要的事物上。
多亏了Material Design 2.0,我们现在有了功能强大的Dialog。

首先,您需要添加材料成分依赖性:

implementation 'com.google.android.material:material:1.1.0-alpha09'

不要忘记继承MaterialComponent主题或者后代作为Activity主题。

基本实施

现在,使用"构建器"模式创建一个基本的MaterialAlertDialog:

new MaterialAlertDialogBuilder(MainActivity.this)
                      .setTitle("Title")
                      .setMessage("Your message goes here. Keep it short but clear.")
                      .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
                          @Override
                          public void onClick(DialogInterface dialogInterface, int i) {

                          }
                      })
                      .setNegativeButton("CANCEL", new DialogInterface.OnClickListener() {
                          @Override
                          public void onClick(DialogInterface dialogInterface, int i) {

                          }
                      })
                      .show();

这是它在屏幕上的外观:

Android Material Dialog Basic

让我们将其与旧的警报对话框进行比较:

Android材质对话框旧警报

当然,新的MaterialAlertDialog看起来要好得多。

AlertDialog在配置更改时丢失其内容。
因此,建议使用AppCompatDialogFragment。
但是为了简化本教程,我们将继续使用MaterialAlertDialog。

样式按钮

我们可以设置MaterialAlertDialog的按钮样式,因为它们只是MaterialButtons。
设置轮廓按钮/无边框按钮,波纹效果等

让我们来看一个例子:

<style name="AlertDialogTheme">
      <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
      <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>
  </style>

  <style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
      <item name="backgroundTint">@color/colorPrimaryDark</item>
      <item name="rippleColor">@color/colorAccent</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">@android:color/darker_gray</item>
      <item name="android:textSize">14sp</item>
  </style>
new MaterialAlertDialogBuilder(MainActivity.this, R.style.AlertDialogTheme)
              .setTitle("Title")
              .setMessage("Your message goes here. Keep it short but clear.")
              .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
                  @Override
                  public void onClick(DialogInterface dialogInterface, int i) {

                  }
              })
              .setNeutralButton("LATER", new DialogInterface.OnClickListener() {
                  @Override
                  public void onClick(DialogInterface dialogInterface, int i) {

                  }
              })
              .show();

Android材质对话框按钮的样式

切形对话框

我们现在可以在"材质对话框"上设置形状!让我们通过继承ShapeAppearance样式将其样式设置为切割形状。

<style name="CutShapeTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
      <item name="shapeAppearanceMediumComponent">@style/CutShapeAppearance</item>
  </style>

  <style name="CutShapeAppearance" parent="ShapeAppearance.MaterialComponents.MediumComponent">

      <item name="cornerFamily">cut</item>
      <item name="cornerSize">10dp</item>
  </style>

现在只需在构建器构造器中设置样式:

new MaterialAlertDialogBuilder(MainActivity.this, R.style.CutShapeTheme)
              .setTitle("Title")
              .setMessage("Your message goes here. Keep it short but clear.")
              .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
                  @Override
                  public void onClick(DialogInterface dialogInterface, int i) {

                  }
              })
              .setNeutralButton("LATER", new DialogInterface.OnClickListener() {
                  @Override
                  public void onClick(DialogInterface dialogInterface, int i) {

                  }
              })
              .show();

Android Material Dialog Cut形状

圆形对话框

<style name="RoundShapeTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
      <item name="shapeAppearanceMediumComponent">@style/RoundShapeAppearance</item>
  </style>

  <style name="RoundShapeAppearance" parent="ShapeAppearance.MaterialComponents.MediumComponent">

      <item name="cornerFamily">rounded</item>
      <item name="cornerSize">16dp</item>
  </style>

通过前面的代码片段在Dialog Builder构造函数中设置上述样式,可以实现以下目的:

Android材质对话框圆形

自定义字体对话框

最后,我们可以在按钮和标题上设置自定义字体系列,如下所示:

<style name="CustomFont" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
      <item name="fontFamily">@font/amatic</item>
      <item name="android:textAllCaps">false</item>
  </style>

这为我们提供了一个全新的外观对话框.