如何实现此 Material Design 2.0 按钮形状？

Question

我想实现看起来像 Material 组件示例

中的按钮形状

我已经尝试做的是像这样为按钮设置自定义样式

    <style name="ButtonAddLeft" parent="Widget.MaterialComponents.Button.Icon">
        <item name="backgroundTint">@color/secondary</item>
        <item name="android:textColor">@color/primary</item>
        <item name="shapeAppearance">@style/ButtonAddLeftShape</item>
    </style>

    <style name="ButtonAddLeftShape">
        <item name="cornerFamilyTopLeft">cut</item>
        <item name="cornerFamilyBottomLeft">cut</item>
        <item name="cornerSize">12dp</item>
    </style>

但这看起来不像示例中的那个，无论我如何设置 cornerSize。

Answer 1

您需要将切角样式设置为主题。

    <style name="RightCutButton" parent="ThemeOverlay.MaterialComponents.Light">
        <item name="shapeAppearanceSmallComponent">@style/CornerCut</item>
    </style>

    <style name="CornerCut" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerFamilyTopRight">cut</item>
        <item name="cornerFamilyBottomRight">cut</item>
        <item name="cornerSizeTopRight">18dp</item>
        <item name="cornerSizeBottomRight">18dp</item>
    </style>

    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="shapeAppearanceSmallComponent">@style/CornerCut</item>
    </style>

Answer 2

您可以在布局中使用 app:shapeAppearanceOverlay 属性：

    <com.google.android.material.button.MaterialButton
        app:shapeAppearanceOverlay="@style/ButtomShapeArrowRight"
        .../>

与：

  <style name="ButtomShapeArrowRight">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">4dp</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopRight">50%</item>
    <item name="cornerSizeBottomRight">50%</item>
  </style>

您也可以通过编程方式实现：

MaterialButton button_arrow = findViewById(R.id.button_arrow);
button_arrow.setShapeAppearanceModel(
    button_arrow.getShapeAppearanceModel()
        .toBuilder()
        .setTopLeftCorner(CornerFamily.ROUNDED,..)
        .setBottomLeftCorner(CornerFamily.ROUNDED,...)
        .setBottomRightCorner(CornerFamily.CUT, new RelativeCornerSize(0.5f))
        .setTopRightCorner(CornerFamily.CUT, new RelativeCornerSize(0.5f))
        .build()
);

关于 new RelativeCornerSize(0.5f) 的注释：它在 1.2.0-beta01 中发生了变化。之前是 new RelativeCornerSize(50)).

如何实现此 Material Design 2.0 按钮形状？

How do I implement this Material Design 2.0 button shape?

android

material-design

android-button

material-components-android

material-components