android 物料日期选择器自定义样式

qacovj5a  于 2023-05-21  发布在  Android
关注(0)|答案(5)|浏览(201)

我已经使用范围日期选择器从谷歌材料与此库
implementation '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());

我想自定义对话框选择器更改文本字段,使对话框不全屏等。我怎么能做所有这些修改

gywdnpxw

gywdnpxw1#

关于全屏
范围选择器应覆盖整个屏幕(默认值为单个日期为对话框,范围为全屏)。但是,您可以在样式中更改此行为。
您可以使用**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中的物料日历所使用的all the strings

mi7gmzs6

mi7gmzs62#

基本上,你应该玩风格。在你的AppTheme中添加一个materialCalendarTheme项,它继承了父项ThemeOverlay.MaterialComponents.MaterialCalendar的自定义样式,然后更改样式。
1.更改文本字段-调用MaterialDatePicker.Builder函数setTitleText()
1.使对话框不全屏-你不能改变它的日期范围选择器,文档说,它是全屏默认情况下
移动的日期范围选择器允许选择日期范围。它覆盖了整个屏幕。
以下是文档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>
ujv3wf0j

ujv3wf0j3#

在全屏和对话框版本之间进行切换非常简单:

全屏

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()
ulydmbyx

ulydmbyx4#

虽然发布的答案完全有效,但似乎没有必要全局设置materialCalendarTheme-您可以通过MaterialDatePicker.BuildersetTheme(int themeResId)方法设置它。以下是他们如何在Material Design Catalog应用程序中执行此操作的示例。

val datePicker = MaterialDatePicker.Builder.dateRangePicker().apply {
    context?.resolveOrNull(R.attr.materialCalendarTheme)?.let {
        setTheme(it)
    }
    setCalendarConstraints(getConstraints())
    }.build()
// ...

resolveOrThrow辅助方法:

fun Context.resolveOrNull(@AttrRes attributeResId: Int): Int? {
    val typedValue = TypedValue()
    if (theme.resolveAttribute(attributeResId, typedValue, true)) {
        return typedValue.data
    }
    return null
}

这样你的DatePicker对话框就不会是全屏的,而是一个普通的对话框。

46scxncf

46scxncf5#

postfixNotation给出的答案是正确的,但并不完全正确,因为他忘了提到该样式可用的包名称。我挠头了大约30分钟才发现,因为它不能直接在ridostyle...所以这是一个答案,如果这件事发生在别人身上,它会对所有人都有效。
在全屏和对话框版本之间进行切换非常简单:

全屏

val picker = MaterialDatePicker.Builder.dateRangePicker().setTheme(com.google.android.material.R.style.ThemeOverlay_MaterialComponents_MaterialCalendar_Fullscreen).build()

对话框

val picker =  MaterialDatePicker.Builder.dateRangePicker().setTheme(com.google.android.material.R.style.ThemeOverlay_MaterialComponents_MaterialCalendar).build()

相关问题