即使在高 API 级别的设备上，Androidx AppCompatButton 看起来也不同于 Button

Question

根据documentation

A Button which supports compatible features on older versions of the platform, including:

Allows dynamic tint of its background via the background tint methods in ViewCompat. Allows setting of the background tint using R.attr.backgroundTint and R.attr.backgroundTintMode. This will automatically be used when you use Button in your layouts and the top-level activity / dialog is provided by appcompat. You should only need to manually use this class when writing custom views.

现在，这让我假设以下两个按钮在高级设备上看起来完全一样。

<androidx.appcompat.widget.AppCompatButton
        android:text="AppCompatButton"
        android:id="@+id/appcompatbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

<Button
        android:layout_below="@id/appcompatbutton"
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:text="Button"
        android:layout_height="wrap_content" />

然而，这是它的实际样子:

我在以下模拟器上运行了这个:Galaxy Nexus，API:28 (720 x 1280 xhdpi)

当我像这样在我的 appTheme 中应用 buttonStyle 时:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="buttonStyle">@style/Widget.MaterialComponents.Button</item>
</style>

它改变了 AppCompatButton 而不是像这样的普通按钮:(注意圆边的细微差别)

我还尝试创建一个自定义按钮，它既继承自 android.widget.Button 又继承自 androidx.appcompat.widget.AppCompatButton，这两个按钮显示的行为与在 xml 中使用 AppCompatButton 的行为相同。所以感觉唯一的异常(exception)是 XML 中的 Button。

问题一:

在我看来，这一切似乎令人难以置信。有人可以将此解释为错误或功能吗？

编辑 1

调试时发现 Button 实际上变成了 MaterialButton，见下图:

问题二:

为什么会发生这种转变？

编辑 2

问题2答案:

Button 到 MaterialButton 的转换是由于我使用的父主题。

问题三:

如何实现一个自定义按钮，使其像 xml 中的 Button 一样工作？

作为旁注和个人意见，也有轻微的重复，这个系统不仅令人困惑，而且很难做到正确和万无一失以备将来更改。除此之外，文档非常差。如果也包括对此的回答，或者至少对此进行讨论，例如如何处理它，我将不胜感激。

Answer 1

简短的回答。

This all seems incredibly confusing according to me. Can someone clarify this as either a bug or feature?

他们使用不同的风格。

Why is this transformation happening?

有一个自动膨胀启用，将取代 <Button与 <com.google.android.material.button.MaterialButton在运行时。

How do you implement a custom button which works just like Button in xml would?

可以自定义xml中的属性或者主题属性。

长答案。

1. 他们使用不同的风格。

MaterialButton的默认样式是Widget.MaterialComponents.Button .此样式继承自 Widget.AppCompat.Button但改变了一些属性。 Here您可以找到不同之处。

主要区别 is here :

<item name="shapeAppearance">?attr/shapeAppearanceSmallComponent</item>

您可以在 official doc 中阅读有关塑形的更多信息.如果浏览样式，您会发现:

  <style name="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerSize">@dimen/mtrl_shape_corner_size_small_component</item>
  </style>

哪里mtrl_shape_corner_size_small_component = 4dp .它解释了圆形边缘的细微差别。

你也在用 <item name="buttonStyle">@style/Widget.MaterialComponents.Button</item> .

它不适用于 MaterialButton。你必须使用:

<item name="materialButtonStyle">@style/Widget.MaterialComponents.Button</item>

1. 自动膨胀是here .

MaterialComponentsViewInflater如果正在使用 Material Components 主题，则在通货膨胀时用 Material Components 替换一些框架小部件。
AppCompat 也会发生类似的情况(您可以查看 MaterialComponentsViewInflater extends AppCompatViewInflater )。

这意味着，<Button被替换 <com.google.android.material.button.MaterialButton在运行时，如果您使用的是 Material 主题。

1. 有不同的选择。其中之一是为按钮定义自定义样式。

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="materialButtonStyle">@style/MyButtonStyle</item>
</style>
<style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
   <item name="cornerRadius">xxx</item>
</style>

或

  <style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearanceOverlay">@style/SShapeAppearanceOverlay.MyApp.Button.Rounded</item>
  </style>

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">xxdp</item>
  </style>