如何自定义 Snackbar 中操作按钮的样式

Question

我正在使用Material Components Library提供的Snackbar。
我正在寻找一种方法来自定义 ACTION 按钮的样式。

我知道Snackbar 使用这个布局（layout.mtrl_layout_snackbar_include）和这个Button：

  <Button
    android:id="@+id/snackbar_action"

但我试图避免使用一些可能会停止与下一个版本一起使用的解决方法。
特别是我想使用 OutlinedButton style 和 自定义形状 作为 箭头。

Answer 1

使用Material Components Library 的1.1.0 版本，您可以使用snackbarButtonStyle在您的应用主题中定义Snackbar 中的操作按钮使用的样式strong> 属性。

<style name="AppTheme" parent="Theme.MaterialComponents.*">

    <!-- Style to use for action button within a Snackbar in this theme. -->
    <item name="snackbarButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Snackbar</item>
    ....
</style>

您可以使用以下方式自定义样式：

  <style name="Custom.MaterialComponents.Button.TextButton.Snackbar" parent="@style/Widget.MaterialComponents.Button.TextButton.Snackbar">
    <item name="strokeColor">@color/...</item>
    <item name="strokeWidth">1dp</item>
    ....
    <item name="shapeAppearanceOverlay">@style/Snackbar.ShapeAppearanceOverlay.Arrow</item>
  </style>

使用 shapeAppearanceOverlay 您可以自定义形状：

  <style name="Snackbar.ShapeAppearanceOverlay.Button.Arrow" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>

    <item name="cornerSizeTopLeft">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
    <item name="cornerSizeTopRight">50%</item>
    <item name="cornerSizeBottomRight">50%</item>
  </style>

您可以通过相同的方式获得OutlinedButton 样式。只需定义自定义样式：

  <style name="Outlined.MaterialComponents.Button.TextButton.Snackbar" parent="@style/Widget.MaterialComponents.Button.OutlinedButton">
    <item name="strokeColor">@color/...</item>
    <item name="strokeWidth">1dp</item>
    <item name="android:textColor">@color/...</item>
  </style>