如何使按钮与“材料设计主题"四舍五入? [英] How to make buttons rounded with Material Design Theming?

问题描述

我希望我的按钮具有圆角，如:

I want my button to have rounded corners like:

//图片来自Google

// Image taken from google

要在android中通过材质主题实现此目的，请设置: shapeAppearanceSmallComponent 具有一个 rounded 角.

To achieve this with material theming in android is to set the: shapeAppearanceSmallComponent to have a rounded corner.

但是设置 shapeAppearanceSmallComponent 也会影响所有其他组件，例如 EditText ，因此现在它们也将四舍五入.

But setting shapeAppearanceSmallComponent also affects all other components such as EditText so now they are rounded as well.

因此，我没有将其设置为 shapeAppearanceSmallComponent ，而是创建了一个 shapeMaterialOverlay .将此叠加层设置为 buttonStyle 并将主题中的此按钮样式设置为默认按钮样式.

So instead of setting it to shapeAppearanceSmallComponent, I created a shapeMaterialOverlay. Set this overlay to a buttonStyle and set this button style in the theme as the default button style.

它有效，但仅适用于默认按钮.如果需要这样的 TextButton :

It works but only for default buttons. If I needed a TextButton as such:

<Button
    ...
    style="@style/Widget.MaterialComponents.Button.TextButton"/>

TextButton 不会被唤醒.因此，作为一种解决方法，我创建了 MyTextButton 样式，该样式从 TextButton 扩展并在其中设置了 shapeOverlay .

The TextButton won't be rouned. So as a workaround, I created MyTextButton style which extends from TextButton and set the shapeOverlay there as well.

所以现在，如果我需要 TextButton ，我会这样做:

so Now if I need a TextButton, I'll do:

<Button
    ...
    style="@style/Widget.MaterialComponents.Button.MyTextButton"/>

相反.

对于所有其他按钮类型，我将必须执行此操作.我想知道这种方法是否正确，如果不正确，有人可以指导我如何正确地做到这一点吗?

I will have to do this for all other button types. I was wondering whether this approach is correct and if not, can anyone guide me on how to properly do this?

非常感谢您.

推荐答案

只需在布局中使用 app:shapeAppearanceOverlay 属性.

Just use the app:shapeAppearanceOverlay attribute in the layout.

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

具有:

  <style name="buttomShape">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

将其应用于所有按钮的唯一方法是像您刚才那样为所有按钮样式定义自定义样式.像这样:

The only way to apply it to all buttons is to define custom styles for all the button styles as you are just doing. Something like:

  <style name="...." parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearance">@style/buttomShape</item>
  </style>

  <style name="..."  parent="Widget.MaterialComponents.Button.TextButton">
    <item name="shapeAppearance">@style/buttomShape</item>
  </style>

这篇关于如何使按钮与“材料设计主题"四舍五入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！