如何设置 Android MaterialCalendars 各种组件的样式
How to style Android MaterialCalendars various components
我正在尝试设置此 MaterialCalendar
的样式,但我没有取得任何进展,如有任何帮助,我们将不胜感激。
我的 styles.xml
看起来类似于以下内容:
<style name="AppTheme" parent="Theme.MaterialComponents">
<item name="materialCalendarTheme">@style/ThemeMaterialCalendar</item>
</style>
<style name="ThemeMaterialCalendar" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="buttonBarPositiveButtonStyle">@style/AlterDialogButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">@style/AlterDialogButtonStyle</item>
<item name="materialButtonStyle">@style/ThemeMaterialCalendarTextButton</item>
<item name="android:colorAccent">@color/accent</item>
</style>
<style name="ThemeMaterialCalendarTextButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog.Flush">
<item name="android:textColor">?attr/colorAccent</item>
</style>
<style name="AlterDialogButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">?attr/colorAccent</item>
</style>
呈现如下内容:
很浅的 blue/cyan 是我的 colorAccent
header 是 purple-y 的颜色。那些都很好。我可以用上面的 styles.xml
来改变它们。
但是我还想将 MaterialCalendar
的深灰色背景更改为白色,然后当然将文本从白色更改为黑色或灰色(以便可以看到),以及制作月份和年份选择的箭头。任何选定的年份或日期都应使用强调色突出显示。
基本上我想要类似的东西(请忽略下面的屏幕截图是旧的 DatePickerDialog
而不是新的 MaterialCalendar
):
如有任何帮助,我们将不胜感激。
PS:我不想更改整个应用程序的任何主要颜色、次要颜色或强调颜色(因为它会破坏其余的配色方案)
在 MaterialDatePicker
中自定义颜色的最佳方法是覆盖它们:
<style name="MaterialCalendarThemeBackground" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="colorSurface">@color/....</item>
<item name="colorOnSurface">@color/....</item>
<item name="colorPrimary">@color/....</item>
<item name="colorOnPrimary">@color/....</item>
</style>
然后使用:
MaterialDatePicker.Builder<Long> builder = MaterialDatePicker.Builder.datePicker();
builder.setTheme(R.style.MaterialCalendarThemeBackground);
MaterialDatePicker
的 背景色 基于 colorSurface
属性。
<style name="MaterialCalendarThemeBackground" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="colorSurface">@color/....</item>
</style>
相反,如果您想使用自定义样式更改其他颜色,您可以这样做:
- 日:基于
colorOnSurface
。您可以定义:
<style name="MaterialCalendarThemeBackground" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="materialCalendarStyle">@style/CustomMaterialCalendar</item>
</style>
与:
<style name="CustomMaterialCalendar" parent="Widget.MaterialComponents.MaterialCalendar">
<item name="dayStyle">@style/CustomWidget_Day</item>
</style>
<style name="CustomWidget_Day" parent="Widget.MaterialComponents.MaterialCalendar.Day">
<item name="itemTextColor">@color/...</item>
<item name="itemStrokeColor">@color/....</item>
</style>
- SelectedDay:基于
colorPrimary
/colorOnPrimary
。您可以定义:
<style name="CustomMaterialCalendar" parent="Widget.MaterialComponents.MaterialCalendar">
<item name="daySelectedStyle">@style/CustomSelected</item>
</style>
与:
<style name= "CustomSelected" parent="Widget.MaterialComponents.MaterialCalendar.Day.Selected">
<item name="itemFillColor">...</item>
<item name="itemTextColor">...</item>
</style>
扩展 @Gabriele Mariotti 回答那些将来想要更多自定义 MaterialDatePicker 的人。
(旁注):我注意到平板电脑上的 MaterialDatePicker 恢复为默认颜色,我不明白为什么会这样。
MaterialDatePicker 大小可以通过使用此行从全屏更改为对话框大小
<item name="android:windowFullscreen">false</item>
设置MaterialDatePicker的主题:
builder.setTheme(R.style.CustomThemeOverlay_MaterialCalendar_Fullscreen);
如果您不确定,我会建议尝试使用样式并更改颜色以查看实际更改的内容。
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<item name="materialCalendarFullscreenTheme">@styleCustomThemeOverlay_MaterialCalendar_Fullscreen</item>
</style>
<style name="CustomThemeOverlay_MaterialCalendar_Fullscreen" parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="materialCalendarStyle">@style/Custom_MaterialCalendar.Fullscreen</item>
<item name="materialCalendarHeaderTitle">@style/customHeaderTitle</item>
<item name="materialCalendarHeaderSelection">@style/CustomHeaderSelection</item>
<item name="buttonBarPositiveButtonStyle">@style/Buttons</item>
<item name="buttonBarNegativeButtonStyle">@style/Buttons</item>
<item name="android:textColorPrimary">@color/...</item>
<item name="colorPrimary">@color/...</item>
<item name="colorSurface">@color/...</item>
<item name="colorOnSurface">@color/...</item>
<item name="colorOnPrimary">@color/...</item>
</style>
<style name="Custom_MaterialCalendar.Fullscreen" parent="@style/Widget.MaterialComponents.MaterialCalendar">
<item name="android:windowFullscreen">false</item>
<item name="rangeFillColor">@color/...</item>
<item name="dayStyle">@style/CustomWidget_Day</item>
<item name="daySelectedStyle">@style/CustomSelected</item>
</style>
<style name="customHeaderTitle" parent="@style/Widget.MaterialComponents.MaterialCalendar.HeaderTitle">
<item name="android:textSize">24sp</item>
<item name="android:textColor">@color/...</item>
<item name="colorSurface">@color/...</item>
</style>
<style name="CustomHeaderSelection" parent="Widget.MaterialComponents.MaterialCalendar.HeaderSelection">
<item name="android:textSize">18sp</item>
<item name="android:textColor">@color/...</item>
</style>
<style name="CustomWidget_Day" parent="Widget.MaterialComponents.MaterialCalendar.Day">
<item name="android:textSize">18sp</item>
<item name="itemTextColor">@color/...</item>
</style>
<style name= "CustomSelected" parent="Widget.MaterialComponents.MaterialCalendar.Day.Selected">
<item name="itemFillColor">@color/...</item>
<item name="itemStrokeColor">@color/...</item>
</style>
<style name="Buttons" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">@color/...</item>
</style>
我能够 this 使用此代码:
我正在尝试设置此 MaterialCalendar
的样式,但我没有取得任何进展,如有任何帮助,我们将不胜感激。
我的 styles.xml
看起来类似于以下内容:
<style name="AppTheme" parent="Theme.MaterialComponents">
<item name="materialCalendarTheme">@style/ThemeMaterialCalendar</item>
</style>
<style name="ThemeMaterialCalendar" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="buttonBarPositiveButtonStyle">@style/AlterDialogButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">@style/AlterDialogButtonStyle</item>
<item name="materialButtonStyle">@style/ThemeMaterialCalendarTextButton</item>
<item name="android:colorAccent">@color/accent</item>
</style>
<style name="ThemeMaterialCalendarTextButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog.Flush">
<item name="android:textColor">?attr/colorAccent</item>
</style>
<style name="AlterDialogButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">?attr/colorAccent</item>
</style>
呈现如下内容:
很浅的 blue/cyan 是我的 colorAccent
header 是 purple-y 的颜色。那些都很好。我可以用上面的 styles.xml
来改变它们。
但是我还想将 MaterialCalendar
的深灰色背景更改为白色,然后当然将文本从白色更改为黑色或灰色(以便可以看到),以及制作月份和年份选择的箭头。任何选定的年份或日期都应使用强调色突出显示。
基本上我想要类似的东西(请忽略下面的屏幕截图是旧的 DatePickerDialog
而不是新的 MaterialCalendar
):
如有任何帮助,我们将不胜感激。
PS:我不想更改整个应用程序的任何主要颜色、次要颜色或强调颜色(因为它会破坏其余的配色方案)
在 MaterialDatePicker
中自定义颜色的最佳方法是覆盖它们:
<style name="MaterialCalendarThemeBackground" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="colorSurface">@color/....</item>
<item name="colorOnSurface">@color/....</item>
<item name="colorPrimary">@color/....</item>
<item name="colorOnPrimary">@color/....</item>
</style>
然后使用:
MaterialDatePicker.Builder<Long> builder = MaterialDatePicker.Builder.datePicker();
builder.setTheme(R.style.MaterialCalendarThemeBackground);
MaterialDatePicker
的 背景色 基于 colorSurface
属性。
<style name="MaterialCalendarThemeBackground" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="colorSurface">@color/....</item>
</style>
相反,如果您想使用自定义样式更改其他颜色,您可以这样做:
- 日:基于
colorOnSurface
。您可以定义:
<style name="MaterialCalendarThemeBackground" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="materialCalendarStyle">@style/CustomMaterialCalendar</item>
</style>
与:
<style name="CustomMaterialCalendar" parent="Widget.MaterialComponents.MaterialCalendar">
<item name="dayStyle">@style/CustomWidget_Day</item>
</style>
<style name="CustomWidget_Day" parent="Widget.MaterialComponents.MaterialCalendar.Day">
<item name="itemTextColor">@color/...</item>
<item name="itemStrokeColor">@color/....</item>
</style>
- SelectedDay:基于
colorPrimary
/colorOnPrimary
。您可以定义:
<style name="CustomMaterialCalendar" parent="Widget.MaterialComponents.MaterialCalendar">
<item name="daySelectedStyle">@style/CustomSelected</item>
</style>
与:
<style name= "CustomSelected" parent="Widget.MaterialComponents.MaterialCalendar.Day.Selected">
<item name="itemFillColor">...</item>
<item name="itemTextColor">...</item>
</style>
扩展 @Gabriele Mariotti 回答那些将来想要更多自定义 MaterialDatePicker 的人。
(旁注):我注意到平板电脑上的 MaterialDatePicker 恢复为默认颜色,我不明白为什么会这样。
MaterialDatePicker 大小可以通过使用此行从全屏更改为对话框大小
<item name="android:windowFullscreen">false</item>
设置MaterialDatePicker的主题:
builder.setTheme(R.style.CustomThemeOverlay_MaterialCalendar_Fullscreen);
如果您不确定,我会建议尝试使用样式并更改颜色以查看实际更改的内容。
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<item name="materialCalendarFullscreenTheme">@styleCustomThemeOverlay_MaterialCalendar_Fullscreen</item>
</style>
<style name="CustomThemeOverlay_MaterialCalendar_Fullscreen" parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="materialCalendarStyle">@style/Custom_MaterialCalendar.Fullscreen</item>
<item name="materialCalendarHeaderTitle">@style/customHeaderTitle</item>
<item name="materialCalendarHeaderSelection">@style/CustomHeaderSelection</item>
<item name="buttonBarPositiveButtonStyle">@style/Buttons</item>
<item name="buttonBarNegativeButtonStyle">@style/Buttons</item>
<item name="android:textColorPrimary">@color/...</item>
<item name="colorPrimary">@color/...</item>
<item name="colorSurface">@color/...</item>
<item name="colorOnSurface">@color/...</item>
<item name="colorOnPrimary">@color/...</item>
</style>
<style name="Custom_MaterialCalendar.Fullscreen" parent="@style/Widget.MaterialComponents.MaterialCalendar">
<item name="android:windowFullscreen">false</item>
<item name="rangeFillColor">@color/...</item>
<item name="dayStyle">@style/CustomWidget_Day</item>
<item name="daySelectedStyle">@style/CustomSelected</item>
</style>
<style name="customHeaderTitle" parent="@style/Widget.MaterialComponents.MaterialCalendar.HeaderTitle">
<item name="android:textSize">24sp</item>
<item name="android:textColor">@color/...</item>
<item name="colorSurface">@color/...</item>
</style>
<style name="CustomHeaderSelection" parent="Widget.MaterialComponents.MaterialCalendar.HeaderSelection">
<item name="android:textSize">18sp</item>
<item name="android:textColor">@color/...</item>
</style>
<style name="CustomWidget_Day" parent="Widget.MaterialComponents.MaterialCalendar.Day">
<item name="android:textSize">18sp</item>
<item name="itemTextColor">@color/...</item>
</style>
<style name= "CustomSelected" parent="Widget.MaterialComponents.MaterialCalendar.Day.Selected">
<item name="itemFillColor">@color/...</item>
<item name="itemStrokeColor">@color/...</item>
</style>
<style name="Buttons" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">@color/...</item>
</style>
我能够 this 使用此代码: