Android Material日期范围选择器头部定制：隐藏头部+自定义年月按钮

1. 隐藏选择器头部 #

有两种简单方式可以实现头部隐藏：

方法一：替换为空布局 #

先创建一个空布局文件res/layout/layout_empty_header.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:visibility="gone" />

然后在自定义日历样式中引用该布局：

<style name="Custom_MaterialCalendar.Fullscreen"
    parent="@style/Widget.MaterialComponents.MaterialCalendar.Fullscreen">
    <item name="android:windowFullscreen">false</item>
    <!-- 隐藏头部 -->
    <item name="headerLayout">@layout/layout_empty_header</item>
</style>

方法二：修改头部样式可见性 #

定义一个隐藏头部的样式：

<style name="HiddenCalendarHeader" parent="@style/Widget.MaterialComponents.MaterialCalendar.Header">
    <item name="android:visibility">gone</item>
</style>

再在日历样式中指定该头部样式：

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

2. 自定义年月选择按钮 #

如果需要自定义年月切换控件，需替换默认头部布局并添加交互逻辑：

步骤1：创建自定义头部布局 #

创建res/layout/layout_custom_calendar_header.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp"
    android:gravity="center"
    android:gap="12dp">

    <!-- 年月显示按钮 -->
    <Button
        android:id="@+id/btn_year_month"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2024年6月"
        android:textColor="@color/black"
        android:background="@drawable/custom_button_bg" />

    <!-- 上月切换按钮 -->
    <ImageButton
        android:id="@+id/btn_prev_month"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_arrow_left"
        android:background="?attr/selectableItemBackgroundBorderless" />

    <!-- 下月切换按钮 -->
    <ImageButton
        android:id="@+id/btn_next_month"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_arrow_right"
        android:background="?attr/selectableItemBackgroundBorderless" />

</LinearLayout>

步骤2：在样式中引用自定义布局 #

修改日历样式，指定使用自定义头部：

<style name="Custom_MaterialCalendar.Fullscreen"
    parent="@style/Widget.MaterialComponents.MaterialCalendar.Fullscreen">
    <item name="android:windowFullscreen">false</item>
    <!-- 使用自定义头部 -->
    <item name="headerLayout">@layout/layout_custom_calendar_header</item>
</style>

步骤3：添加按钮交互逻辑 #

在显示日期选择器的代码中，绑定头部控件的逻辑：

MaterialDatePicker.Builder<Pair<Long, Long>> builder = MaterialDatePicker.Builder.dateRangePicker();
builder.setTheme(R.style.CustomThemeOverlay_MaterialCalendar_Fullscreen);
MaterialDatePicker<Pair<Long, Long>> picker = builder.build();

picker.addOnPositiveButtonClickListener(selection -> {
    // 处理选中的日期范围
    Long startDate = selection.first;
    Long endDate = selection.second;
});

// 绑定头部按钮逻辑
picker.addOnAttachListener(view -> {
    Button yearMonthBtn = picker.getView().findViewById(R.id.btn_year_month);
    ImageButton prevBtn = picker.getView().findViewById(R.id.btn_prev_month);
    ImageButton nextBtn = picker.getView().findViewById(R.id.btn_next_month);

    Calendar calendar = Calendar.getInstance();
    updateYearMonthText(yearMonthBtn, calendar);

    // 年月按钮点击：弹出年月选择器
    yearMonthBtn.setOnClickListener(v -> {
        DatePickerDialog datePickerDialog = new DatePickerDialog(
                v.getContext(),
                (datePicker, year, month, day) -> {
                    calendar.set(year, month, day);
                    updateYearMonthText(yearMonthBtn, calendar);
                    picker.getCalendarView().setDate(calendar.getTimeInMillis());
                },
                calendar.get(Calendar.YEAR),
                calendar.get(Calendar.MONTH),
                calendar.get(Calendar.DAY_OF_MONTH)
        );
        datePickerDialog.show();
    });

    // 上月切换
    prevBtn.setOnClickListener(v -> {
        calendar.add(Calendar.MONTH, -1);
        updateYearMonthText(yearMonthBtn, calendar);
        picker.getCalendarView().setDate(calendar.getTimeInMillis());
    });

    // 下月切换
    nextBtn.setOnClickListener(v -> {
        calendar.add(Calendar.MONTH, 1);
        updateYearMonthText(yearMonthBtn, calendar);
        picker.getCalendarView().setDate(calendar.getTimeInMillis());
    });
});

picker.show(getSupportFragmentManager(), "DATE_RANGE_PICKER");

添加辅助方法更新年月文本：

private void updateYearMonthText(Button button, Calendar calendar) {
    String text = String.format("%d年%d月", calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH) + 1);
    button.setText(text);
}

注意事项 #

• 确保项目中存在ic_arrow_left、ic_arrow_right图标和custom_button_bg背景drawable，或替换为自身项目资源。
• 若使用Kotlin，将上述Java代码转换为对应Kotlin语法即可。

内容的提问来源于stack exchange，提问作者ankushlokhande