社区首页 >专栏 >如何自定义 Android 日期选择器，实现各种个性化的效果？

如何自定义 Android 日期选择器，实现各种个性化的效果？

原创

网络技术联盟站

发布于 2023-06-04 11:13:54

6.2K0

在 Android 应用程序开发中，日期选择器是一个非常重要的组件，它允许用户选择日期或者时间。在标准的 Android 库中，已经提供了 DatePicker 和 TimePicker 这两个组件来实现这个功能。然而，有时候我们需要更加自由度的定制日期选择器来满足特定的业务需求。本文将介绍如何自定义 Android 日期选择器，实现各种个性化的效果。

DatePicker 和 TimePicker 的使用

在 Android 应用程序中，DatePicker 和 TimePicker 是两个常用的日期选择器组件。它们分别用于选择日期和时间。

DatePicker

DatePicker 组件允许用户选择年、月、日三个值作为一个日期。它位于 android.widget.DatePicker 包中。

要创建一个 DatePicker，我们可以使用如下代码：

<DatePicker
    android:id="@+id/date_picker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

上面的代码中，我们创建了一个 DatePicker，它的 ID 为 date_picker。我们可以在相应的 Java 代码中通过 findViewById() 方法找到这个组件，并对其进行操作。

例如，当用户选定一个日期时，我们可以监听 DatePicker 的 OnDateChangedListener 事件，并获取用户选择的日期。

DatePicker datePicker = findViewById(R.id.date_picker);
datePicker.init(2022, 5, 1, new DatePicker.OnDateChangedListener() {
    @Override
    public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
        // 用户选择的日期变化了
    }
});

上面的代码中，我们初始化了一个 DatePicker，将其初始值设置为 2022 年 6 月 1 日。当用户选择一个新的日期时，会触发 OnDateChangedListener 事件，并在回调函数中获取用户选择的日期。

TimePicker

TimePicker 组件允许用户选择小时和分钟两个值作为一个时间。它位于 android.widget.TimePicker 包中。

要创建一个 TimePicker，我们可以使用如下代码：

<TimePicker
    android:id="@+id/time_picker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

上面的代码中，我们创建了一个 TimePicker，它的 ID 为 time_picker。我们可以在相应的 Java 代码中通过 findViewById() 方法找到这个组件，并对其进行操作。

例如，当用户选定一个时间时，我们可以监听 TimePicker 的 OnTimeChangedListener 事件，并获取用户选择的时间。

TimePicker timePicker = findViewById(R.id.time_picker);
timePicker.setIs24HourView(true); // 设置为 24 小时制
timePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
    @Override
    public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
        // 用户选择的时间变化了
    }
});

上面的代码中，我们初始化了一个 TimePicker，并将其设置为 24 小时制。当用户选择一个新的时间时，会触发 OnTimeChangedListener 事件，并在回调函数中获取用户选择的时间。

自定义 DatePicker

上面提到了，在标准的 Android 库中，我们可以使用 DatePicker 和 TimePicker 这两个组件来实现日期选择器功能。但是有时候，我们需要更加自由度的定制日期选择器来满足特定的业务需求。

自定义 DatePicker 样式

如果我们只想修改 DatePicker 的样式，可以使用 android:theme 属性来进行自定义。

例如，我们可以创建一个 styles.xml 文件，定义一个 DatePicker 的主题。

<!-- styles.xml 文件 -->
<resources>
    <style name="CustomDatePickerTheme" parent="@android:style/Widget.Material.Light.DatePicker">
        <item name="android:headerBackground">@drawable/date_picker_header_bg</item>
        <item name="android:calendarTextColor">@color/date_picker_calendar_text_color</item>
        <item name="android:dayOfWeekTextColor">@color/date_picker_day_of_week_text_color</item>
        <item name="android:selectedDayTextColor">@color/date_picker_selected_day_text_color</item>
        <item name="android:datePickerMode">spinner</item>
    </style>
</resources>

上面的代码中，我们定义了一个 CustomDatePickerTheme 主题，继承自 Widget.Material.Light.DatePicker 主题。我们可以在主题中设置不同的属性，比如 headerBackground、calendarTextColor、dayOfWeekTextColor 等。我们也可以通过 android:datePickerMode 属性来设置 DatePicker 的模式，有日历模式（calendar）和下拉框模式（spinner）两种。

接下来，在我们的布局文件中，将 android:theme 属性设置为我们的主题名称即可。

<DatePicker
    android:id="@+id/date_picker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/CustomDatePickerTheme" />

自定义 DatePicker 控件

如果我们想更深入地自定义 DatePicker，比如添加新的功能或者修改交互方式，那么我们需要自定义一个 DatePicker 控件。

我们可以继承系统提供的 DatePicker 控件，并重写需要修改的方法来实现自定义功能。

public class CustomDatePicker extends DatePicker {
    public CustomDatePicker(Context context) {
        super(context);
        // 初始化代码
    }

    public CustomDatePicker(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 初始化代码
    }

    public CustomDatePicker(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 初始化代码
    }

    @Override
    public void init(int year, int monthOfYear, int dayOfMonth, OnDateChangedListener onDateChangedListener) {
        super.init(year, monthOfYear, dayOfMonth, onDateChangedListener);
        // 自定义代码
    }
}

上面的代码中，我们继承了系统提供的 DatePicker 控件，并重写了三个构造函数和 init() 方法。在我们的自定义控件中，我们可以添加新的功能或者修改原有的代码逻辑。

例如，我们可以在自定义控件中添加一个新的方法 setMaxDate()，允许用户设置日期选择器的最大日期。

public class CustomDatePicker extends DatePicker {
    private Calendar maxDate;

    public CustomDatePicker(Context context) {
        super(context);
        init();
    }

    public CustomDatePicker(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomDatePicker(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        // 初始化代码
    }

    @Override
    public void init(int year, int monthOfYear, int dayOfMonth, OnDateChangedListener onDateChangedListener) {
        super.init(year, monthOfYear, dayOfMonth, onDateChangedListener);
        applyMaxDate();
    }

    public void setMaxDate(Calendar maxDate) {
        this.maxDate = maxDate;
        applyMaxDate();
    }

    private void applyMaxDate() {
        if (maxDate != null) {
            Calendar c = Calendar.getInstance();
            c.set(getYear(), getMonth(), getDayOfMonth());
            if (c.getTimeInMillis() > maxDate.getTimeInMillis()) {
                updateDate(maxDate.get(Calendar.YEAR), maxDate.get(Calendar.MONTH), maxDate.get(Calendar.DAY_OF_MONTH));
            }
        }
    }
}

上面的代码中，我们添加了一个 setMaxDate() 方法，允许用户设置最大日期。当用户选择的日期超过了最大日期时，我们会将 DatePicker 设置为最大日期。

自定义 TimePicker

除了 DatePicker，我们也可以自定义 TimePicker 来满足特定需求。

自定义 TimePicker 样式

如果我们只想修改 TimePicker 的样式，可以使用 android:theme 属性来进行自定义。

例如，我们可以创建一个 styles.xml 文件，定义一个 TimePicker 的主题。

<!-- styles.xml 文件 -->
<resources>
    <style name="CustomTimePickerTheme" parent="@android:style/Widget.Material.Light.TimePicker">
        <item name="android:headerBackground">@drawable/time_picker_header_bg</item>
        <item name="android:textColorPrimary">@color/time_picker_text_color</item>
        <item name="android:numberPickerStyle">@style/CustomNumberPickerStyle</item>
    </style>

    <style name="CustomNumberPickerStyle" parent="@android:style/Widget.NumberPicker">
        <item name="android:textSize">20sp</item>
        <item name="android:dividerHeight">2dp</item>
        <item name="android:selectionDivider">@drawable/time_picker_divider</item>
    </style>
</resources>

上面的代码中，我们定义了一个 CustomTimePickerTheme 主题，继承自 Widget.Material.Light.TimePicker 主题。我们可以在主题中设置不同的属性，比如 headerBackground、textColorPrimary 等。我们也可以通过 android:numberPickerStyle 属性来设置 NumberPicker 的样式。

接下来，在我们的布局文件中，将 android:theme 属性设置为我们的主题名称即可。

<TimePicker
    android:id="@+id/time_picker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/CustomTimePickerTheme" />

自定义 TimePicker 控件

与自定义 DatePicker 类似，如果我们需要更加深度的自定义 TimePicker，那么我们需要自定义一个 TimePicker 控件，并对其进行修改。

public class CustomTimePicker extends TimePicker {
    public CustomTimePicker(Context context) {
        super(context);
    }

    public CustomTimePicker(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomTimePicker(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

上面的代码中，我们继承了系统提供的 TimePicker 控件，并重写了三个构造函数。在我们的自定义控件中，我们可以添加新的方法或者修改原有的代码逻辑。

例如，我们可以添加一个 setMaxTime() 方法，允许用户设置时间选择器的最大时间。

public class CustomTimePicker extends TimePicker {
    private Calendar maxTime;

    public CustomTimePicker(Context context) {
        super(context);
    }

    public CustomTimePicker(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomTimePicker(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setMaxTime(Calendar maxTime) {
        this.maxTime = maxTime;
        applyMaxTime();
    }

    private void applyMaxTime() {
        if (maxTime != null) {
            Calendar c = Calendar.getInstance();
            c.set(0, 0, 0, getCurrentHour(), getCurrentMinute());
            if (c.getTimeInMillis() > maxTime.getTimeInMillis()) {
                setCurrentHour(maxTime.get(Calendar.HOUR_OF_DAY));
                setCurrentMinute(maxTime.get(Calendar.MINUTE));
            }
        }
    }
}