Android 基于DatePicker和TimePicker实现日期+时间的控件

这是我参与 8 月更文挑战的第 5 天，活动详情查看： 8月更文挑战

背景

上篇文章简单介绍google的时间控件TimePicker,一朋友提出了一个疑问:material design可以提供可以同时选择日期+时间的控件吗？基于这个问题写了这篇文章,旨在交流

效果

老规矩先上效果

实现

思路

大体思路就是既然PickerView和TimePicker都是一个单独控件,而google又不提供这两个控件的组合,那么我们可以不可以自己把这两个控件进行组装呢,答案是可以的

xml

由于这次做的比较简单,就部分步骤了,直接上实现,把两个控件宽度都设为wrap_content,并且放到一排

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_dialog_data"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <RelativeLayout
        android:id="@+id/title"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="#FFf5f5f5"
        android:layout_width="match_parent"
        android:layout_height="46dp">
        <TextView
            android:id="@+id/tv_data_dialog_cancel"
            android:layout_width="80dp"
            android:text="@string/cancel"
            android:textSize="14sp"

            android:gravity="center"
            android:textColor="@color/app_theme_color"
            android:layout_height="match_parent"/>
        <TextView
            android:id="@+id/date_text"
            android:textSize="14sp"
            android:gravity="center"
            android:layout_centerHorizontal="true"
            android:textColor="@color/black"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"/>
        <TextView
            android:id="@+id/tv_data_dialog_done"
            android:layout_width="80dp"
            android:text="@string/done"
            android:textSize="14sp"
            android:layout_alignParentEnd="true"
            android:gravity="center"
            android:textColor="@color/app_theme_color"
            android:layout_height="match_parent"/>
    </RelativeLayout>
    <DatePicker
        android:id="@+id/data_picker"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title"
        android:layout_width="wrap_content"
        android:background="#FFFFFFFF"
        android:calendarViewShown="false"
        android:datePickerMode="spinner"
        android:layout_height="wrap_content"/>
    <TimePicker
        android:id="@+id/time_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFFFFFF"
        android:timePickerMode="spinner"
        app:layout_constraintLeft_toRightOf="@id/data_picker"
        app:layout_constraintTop_toBottomOf="@id/title"/>
</androidx.constraintlayout.widget.ConstraintLayout>

实现逻辑

全局维护一个Calendar日历对象,在日期控件有修改时仅修改对象的年月日部分,在时间控件有修改时仅修改对象时分部分,最后通过getTimeInMillis()方法获取时间戳并返回

以上是一个简单的实现逻辑,如有需要自行扩展

注意

目前此实现仅支持时间为24小时制,如果是12小时制,会导致时间控件显示不全,谨慎使用,在google上大概找到了一个解决方案,即拿到两个控件中的NumPicker对象,设置其文字大小,滑块宽度等.可自行操作

如果需求有要求可选择的时间不可超出某个时间点,日期控件可用minDate和maxDate控制,时间控件就需要自行根据时间点进行判断写对应的逻辑

项目地址

项目地址