试图理解 Theme.MaterialComponents答案

【问题标题】：Trying to understand Theme.MaterialComponents试图理解 Theme.MaterialComponents
【发布时间】：2021-06-28 10:39:20
【问题描述】：

我最近从Theme.AppCompat 搬到Theme.MaterialComponents，但我不明白如何组织颜色。

<style name="Theme.Test" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/orange</item>
        <item name="colorPrimaryVariant">@color/red</item>
        <item name="colorOnPrimary">@color/yellow</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/green</item>
        <item name="colorSecondaryVariant">@color/black</item>
        <item name="colorOnSecondary">@color/white</item>
    </style>

例如为什么按钮的背景颜色为橙色，而卡片视图的背景颜色不为橙色？

有人可以向我解释更多关于这些变量的信息吗colorPrimary , colorPrimaryVariant , colorOnPrimary , colorSecondary , colorSecondaryVariant and colorOnSecondary

有官方文档吗？

【问题讨论】：

标签： android angular-material material-design material-components-android

【解决方案1】：

您可以参考以下文档：https://material.io/develop/android/theming/color

colorPrimary：在应用的屏幕和组件中显示频率最高的颜色。当在表面或背景颜色上绘制时，此颜色应符合文本/图标的可访问性指南。
colorPrimaryVariant：原色的色调变化。
colorOnPrimary：当绘制在原色之上时，符合文本/图标可访问性指南的颜色。
colorSecondary：应用的次要品牌颜色，通常是主要品牌颜色的重点补充。
colorSecondaryVariant：辅助颜色的色调变化。
colorOnSecondary：在辅助颜色之上绘制时通过文本/图标可访问性指南的颜色。

你也可以参考这个SO：https://stackoverflow.com/a/45879575/9246764

【讨论】：

【解决方案2】：

如果您正在寻找有关每个组件的详细信息，material.io 文档通常会提供有关各种属性的默认值的信息。

例如，MaterialCardView 的文档指定默认 app:cardBackgroundColor 为 ?attr/colorSurface。

【讨论】：

【解决方案3】：

查看有关在 Android 中使用这些主题的材料网站官方文档

https://material.io/develop/android/docs/getting-started

【讨论】：

但是我还是不知道上面的变量有什么作用

【解决方案4】：

好的，您现在应该使用 Material 主题中的组件。例如，如果您只想使用 textview 并在其上应用材质主题你应该按照他们建议的方式使用它。例如对于 textview 你应该使用它

 <com.google.android.material.textfield.TextInputLayout

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="First Name"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    app:hintTextColor="@color/black">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/fName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

</com.google.android.material.textfield.TextInputLayout>

我认为您没有使用材质主题的卡片视图。只需查看官方文档。 https://material.io/components/cards

【讨论】：