试图理解 Theme.MaterialComponents
Trying to understand Theme.MaterialComponents
我最近从 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>
比如为什么按钮的背景色是橙色,而cardview的背景色不是橙色?
有人可以向我解释一下这些变量吗colorPrimary , colorPrimaryVariant , colorOnPrimary , colorSecondary , colorSecondaryVariant and colorOnSecondary
有官方文档吗?
查看 material 站点的官方文档,了解如何在 Android
中使用这些主题
您可以参考以下文档:https://material.io/develop/android/theming/color
- colorPrimary:在应用的屏幕和组件中显示最频繁的颜色。当绘制在表面或背景颜色之上时,此颜色应符合文本/图标的可访问性指南。
- colorPrimaryVariant:原色的色调变化。
- colorOnPrimary:在原色之上绘制时通过 text/iconography 无障碍指南的颜色。
- colorSecondary:应用的次要品牌颜色,通常是对主要品牌颜色的强调补充。
- colorSecondaryVariant: 二次色的色调变化。
- colorOnSecondary:在次要颜色之上绘制时通过 text/iconography 可访问性指南的颜色。
你也可以参考这个SO:
好的,现在您应该使用 Material 主题中的组件了。
例如,如果您只想使用文本视图并在其上应用 material 主题
您应该按照他们建议的方式使用它。
例如,对于文本视图,您应该使用它
<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>
我认为您没有使用 material 主题中的卡片视图。
只需检查官方文档。
https://material.io/components/cards
如果您要查找有关每个组件的详细信息,material.io 文档通常会提供有关各种属性的默认值的信息。
例如,MaterialCardView
的文档指定默认 app:cardBackgroundColor
为 ?attr/colorSurface
。
我最近从 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>
比如为什么按钮的背景色是橙色,而cardview的背景色不是橙色?
有人可以向我解释一下这些变量吗colorPrimary , colorPrimaryVariant , colorOnPrimary , colorSecondary , colorSecondaryVariant and colorOnSecondary
有官方文档吗?
查看 material 站点的官方文档,了解如何在 Android
中使用这些主题您可以参考以下文档:https://material.io/develop/android/theming/color
- colorPrimary:在应用的屏幕和组件中显示最频繁的颜色。当绘制在表面或背景颜色之上时,此颜色应符合文本/图标的可访问性指南。
- colorPrimaryVariant:原色的色调变化。
- colorOnPrimary:在原色之上绘制时通过 text/iconography 无障碍指南的颜色。
- colorSecondary:应用的次要品牌颜色,通常是对主要品牌颜色的强调补充。
- colorSecondaryVariant: 二次色的色调变化。
- colorOnSecondary:在次要颜色之上绘制时通过 text/iconography 可访问性指南的颜色。
你也可以参考这个SO:
好的,现在您应该使用 Material 主题中的组件了。 例如,如果您只想使用文本视图并在其上应用 material 主题 您应该按照他们建议的方式使用它。 例如,对于文本视图,您应该使用它
<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>
我认为您没有使用 material 主题中的卡片视图。 只需检查官方文档。 https://material.io/components/cards
如果您要查找有关每个组件的详细信息,material.io 文档通常会提供有关各种属性的默认值的信息。
例如,MaterialCardView
的文档指定默认 app:cardBackgroundColor
为 ?attr/colorSurface
。