材料日期选择器自定义样式

Question

我在这个库中使用了谷歌材料中的范围日期选择器

实现 'com.google.android.material:material:1.2.0-alpha02'

这是我的代码

     MaterialDatePicker.Builder<Pair<Long, Long>> builder =
            MaterialDatePicker.Builder.dateRangePicker();

    CalendarConstraints.Builder constraintsBuilder = new CalendarConstraints.Builder();
    builder.setCalendarConstraints(constraintsBuilder.build());
    MaterialDatePicker<Pair<Long,Long>> picker = builder.build();
    assert getFragmentManager() != null;
    picker.show(getFragmentManager(), picker.toString());

我想自定义对话框选择器更改文本字段，使对话框不是全屏等。我该如何进行所有这些修改

Answer 1

关于全屏。

范围选择器应覆盖整个屏幕（默认 = 单个日期的对话框，范围的全屏）。但是，您可以按照自己的风格更改此行为。

您可以使用该setTheme方法应用主题叠加：

//To apply a dialog
builder.setTheme(R.style.ThemeOverlay_MaterialComponents_MaterialCalendar);
//To apply the fullscreen:
builder.setTheme(R.style.ThemeOverlay_MaterialComponents_MaterialCalendar_Fullscreen);

注意：它至少需要版本1.2.0-alpha01.

作为替代方案，您可以在应用主题中添加该materialCalendarFullscreenTheme属性。

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
   <item name="materialCalendarFullscreenTheme">@style/CustomThemeOverlay_MaterialCalendar_Fullscreen</item>
</style>

在哪里：

  <style name="CustomThemeOverlay_MaterialCalendar_Fullscreen"
      parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen">
    <item name="materialCalendarStyle">@style/Custom_MaterialCalendar.Fullscreen</item>
  </style>

在这里，您可以使用android:windowFullscreen属性覆盖该值：

  <style name="Custom_MaterialCalendar.Fullscreen"
      parent="@style/Widget.MaterialComponents.MaterialCalendar.Fullscreen">
    <item name="android:windowFullscreen">false</item>
  </style>

关于字符串。
目前没有改变字符串的方法。
唯一现有的方法是builder.setTitleText更改标题。

但是，您可以覆盖项目中的所有现有字符串，但此解决方法可能会在下一个版本中停止运行。例如：

  <string name="mtrl_picker_save" description="Confirms the selection [CHAR_LIMIT=12]">....</string>
  <string name="mtrl_picker_text_input_date_range_start_hint" description="Label for the start date in a range selected by the user [CHAR_LIMIT=60]">...</string>
  <string name="mtrl_picker_text_input_date_range_end_hint" description="Label for the end date in a range selected by the user [CHAR_LIMIT=60]">...</string>

在这里您可以找到材料日历中使用的所有字符串1.2.0-alpha02。

Answer 2

基本上，你应该玩弄风格。在您的 AppTheme 中添加一个materialCalendarTheme具有继承 parent 的自定义样式的项目ThemeOverlay.MaterialComponents.MaterialCalendar，并更改样式。

1. 更改文本字段 - 调用MaterialDatePicker.Builder函数setTitleText()
2. 使对话框不全屏 - 您不能为日期范围选择器更改它，文档说默认情况下它是全屏的

移动日期范围选择器允许选择日期范围。它们覆盖了整个屏幕。

这是文档https://material.io/components/pickers

以下是我如何调整一些颜色以匹配我的主题：

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <item name="materialCalendarTheme">@style/ThemeMaterialCalendar</item>
</style>

<style name="ThemeMaterialCalendar" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
    <item name="buttonBarPositiveButtonStyle">@style/ThemeMaterialCalendarButton</item>
    <item name="buttonBarNegativeButtonStyle">@style/ThemeMaterialCalendarButton</item>
    <item name="materialButtonStyle">@style/ThemeMaterialCalendarTextButton</item>
</style>

<style name="ThemeMaterialCalendarButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
    <item name="android:textColor">?themeTextColorPrimary</item>
</style>

<style name="ThemeMaterialCalendarTextButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog.Flush">
    <item name="android:textColor">?themeTextColorPrimary</item>
    <item name="iconTint">?themeTextColorPrimary</item>
</style>

Answer 3

在全屏和对话框版本之间进行更改可以如此简单：

全屏：

val picker = MaterialDatePicker.Builder.dateRangePicker().setTheme(R.style.ThemeOverlay_MaterialComponents_MaterialCalendar_Fullscreen).build()

对话框：

val picker = MaterialDatePicker.Builder.dateRangePicker().setTheme(R.style.ThemeOverlay_MaterialComponents_MaterialCalendar).build()