MaterialDatePicker在安卓上无法正常工作。

13

我想将我的项目中的日期选择器更改为 Material Components for Android 提供的日期选择器,但它不能正常工作。

这是我尝试过的代码:

MaterialDatePicker.Builder<Long> builder = MaterialDatePicker.Builder.datePicker();

MaterialDatePicker<Long> picker = builder.build();

picker.show(getSupportFragmentManager(), picker.toString());

这是它的外观:

第一张图片

而应该是这样的:

第二张图片

有人可以告诉我缺了什么吗?

谢谢


你好,你期望的结果图片丢失了,请修复它,我们会尽力帮助你。 - Dor
5个回答

24

使用Material Components for Android,您可以使用新的MaterialDatePicker

为了正常工作,在您的应用程序中,您必须使用Material Components主题。以此方式您可以继承选择器的样式和主题。

要选择单个日期,只需使用:

MaterialDatePicker.Builder<Long> builder = MaterialDatePicker.Builder.datePicker();
builder.setTitleText(R.string.your_text);
MaterialDatePicker<Long> picker = builder.build();
picker.show(getSupportFragmentManager(), picker.toString());

要选择一个日期范围,您可以使用DateRange Picker:

MaterialDatePicker.Builder<Pair<Long, Long>> builder =
                    MaterialDatePicker.Builder.dateRangePicker();
CalendarConstraints.Builder constraintsBuilder = new CalendarConstraints.Builder();
builder.setCalendarConstraints(constraintsBuilder.build());
MaterialDatePicker<?> picker = builder.build();
picker.show(getSupportFragmentManager(), picker.toString());

enter image description here

检查您主题中使用的颜色。

这些属性定义了您的样式。您不需要添加它们,因为默认情况下Material Components主题已经提供了它们。

<!-- Picker styles and themes. -->
<item name="materialCalendarStyle">@style/Widget.MaterialComponents.MaterialCalendar</item>
<item name="materialCalendarFullscreenTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen</item>
<item name="materialCalendarTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar</item>

基于这些风格,选择器使用的颜色为:

HeaderLaoyout     -> background:colorPrimary, textColor:colorOnPrimary
HeaderSelection   -> background:colorPrimary, textColor:colorOnPrimary
ConfirmButtons    -> background:colorPrimary, textColor:colorOnPrimary
Buttons           -> background:colorPrimary, textColor:colorOnSurface
HeaderToggleButton->                          textColor:colorOnPrimary
Day               ->                          text:colorOnSurface  stroke:colorOnSurface
SelectedDay       -> background:colorPrimary, textColor:colorOnPrimary
RangeFillColor    -> background:colorPrimary

我该如何为此设置主题?我的正/负按钮和标题、强调等都显示为空白。 - DaniloDeQueiroz
你必须按照文档中所述,在你的应用程序中使用Material主题。答案中的样式是所有Material主题的默认样式。 - Gabriele Mariotti
我们如何在XML布局文件中声明选择器而不是通过编程方式? - IgorGanapolsky

5

问题出在colorPrimary上。

我项目的默认颜色是“白色”,Material日期选择器样式使用该colorPrimary为按钮的背景和文本着色。由于标题文本的颜色也是白色,因此当有内容时,它似乎什么都没有。

我通过将样式文件导入到我的项目中并对项目中的样式进行一些调整来解决了这个问题。

感谢所有答案,它们都有助于找到问题!


请分享更改内容。你把 primaryColor 改成除了白色之外的其他颜色了吗? - Mangesh

1

我的主要颜色也是白色,遇到了同样的问题。

简单的解决方案是在日历样式中覆盖 primaryColor

基础主题:

<style name="Base.Theme.YV.Bible" parent="Theme.MaterialComponents.DayNight.NoActionBar">
  <item name="materialCalendarStyle">@style/Theme.YV.Bible.DatePicker</item>
  <item name="android:datePickerDialogTheme">@style/Theme.YV.Bible.DatePicker</item>
</style>

日历/日期选择器主题

<style name="Theme.YV.Bible.DatePicker" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
  <item name="colorPrimary">?colorPrimaryDark</item> // this is the key, we need to use a dark color instead of our theme's primary color
</style>

使用方法

val picker = MaterialDatePicker.Builder
    .datePicker()
    .setCalendarConstraints(CalendarConstraints.Builder().setStart(now().time).build())
    .setSelection(c.timeInMillis)
    .setTheme(com.bible.base.R.style.Theme_YV_Bible_DatePicker)
    .build()
picker.show(fragmentManager, null)

0
为了获得您想要的输出,请在调用show()之前添加以下内容:
builder.setTitleTextResId(R.string.your_text);
// Where R.string.your_text must be equal to "Selected Date" or whatever you want

对于材料设计日期选择器,您需要首先实现最新的库。
implementation 'com.google.android.material:material:1.1.0-alpha09'

那么

  MaterialDatePicker.Builder<Long> builder = 
                        MaterialDatePicker.Builder.datePicker();
  builder.setTitleTextResId(R.string.your_text);
  MaterialDatePicker<Long> picker = builder.build();
  picker.show(getSupportFragmentManager(), picker.toString());

你也可以直接展示DatePickerDialog而不是使用Builder。对于展示对话框和获取选择的数据而言:
EditText date;
DatePickerDialog datePickerDialog;

// Calendar object to hold the selected data
final Calendar c = Calendar.getInstance();
int mYear = c.get(Calendar.YEAR); // current year
int mMonth = c.get(Calendar.MONTH); // current month
int mDay = c.get(Calendar.DAY_OF_MONTH); // current day
// date picker dialog
datePickerDialog = new DatePickerDialog(MainActivity.this,
        new DatePickerDialog.OnDateSetListener() {

            @Override
            public void onDateSet(DatePicker view, int year,
                                  int monthOfYear, int dayOfMonth) {
                // set day of month , month and year value in the edit text
                date.setText(dayOfMonth + "/"
                        + (monthOfYear + 1) + "/" + year);

            }
        }, mYear, mMonth, mDay);
datePickerDialog.show();

我已经实现了最后一个库,但它仍然无法工作。 - Carina
DatePickerDialog不支持区间。 - IgorGanapolsky

0
添加最新依赖:
implementation 'com.google.android.material:material:1.1.0-alpha10'

MaterialDatePicker.Builder<Long> builder = MaterialDatePicker.Builder.datePicker();
       builder.setTitleTextResId(R.string.your_text);// here is the title for your datepicker
       MaterialDatePicker<Long> picker = builder.build();
       picker.show(getSupportFragmentManager(), picker.toString());

其他选项: https://github.com/wdullaer/MaterialDateTimePicker

1
你可以在Google的Maven存储库中查看。Google的Maven存储库 com.google.android.material > material >1.1.0-alpha10 - Manoj Kumar

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接