开源项目DataTimePicker实现时间和日期的选择

   

这个开源项目是模仿Google官方的time选择器做的，是否漂亮。让我爱不释手，真心喜欢。很有幸和大家一起分享下，那么话不多说开始讲解。

开源项目地址：https://github.com/flavienlaurent/datetimepicker

这个项目依赖于NineOldAndroids https://github.com/JakeWharton/NineOldAndroids 

我这里直接将NineOldAndroids作为jar包copy到我给的lib中了，所以大家只需要使用一个lib就好。

原理：其实这个dialog就是一个fragmentDialog，所以我们可以直接启动这个控件就行了，不用任何布局文件的支持。此外我们还需要绑定监听器来判断用户的选择信息。下面是项目实现。

一、布局文件（就几个按钮，没啥好说的）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity" >

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="vibrate"
        android:layout_marginBottom="30dp"
        android:id="@+id/checkBoxVibrate"
        android:checked="true"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="close on single tap day"
        android:layout_marginBottom="30dp"
        android:id="@+id/checkBoxCloseOnSingleTapDay"
        android:checked="true"/>

    <Button
        android:id="@+id/dateButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:text="Select Date" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="close on single tap minute"
        android:layout_marginBottom="30dp"
        android:id="@+id/checkBoxCloseOnSingleTapMinute"
        android:checked="true"/>

    <Button
        android:id="@+id/timeButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Select Time" />

</LinearLayout>

 

java代码（里面注释已经很详尽了，十分简单易用）:

package com.kale.datatimepicker;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.CheckBox;
import android.widget.Toast;

import com.fourmob.datetimepicker.date.DatePickerDialog;
import com.fourmob.datetimepicker.date.DatePickerDialog.OnDateSetListener;
import com.sleepbot.datetimepicker.time.RadialPickerLayout;
import com.sleepbot.datetimepicker.time.TimePickerDialog;

import java.util.Calendar;

public class MainActivity extends FragmentActivity implements OnDateSetListener, TimePickerDialog.OnTimeSetListener {

    public static final String DATEPICKER_TAG = "datepicker";
    public static final String TIMEPICKER_TAG = "timepicker";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final Calendar calendar = Calendar.getInstance();

        final DatePickerDialog datePickerDialog = DatePickerDialog.newInstance(this, 
                calendar.get(Calendar.YEAR), 
                calendar.get(Calendar.MONTH), 
                calendar.get(Calendar.DAY_OF_MONTH), 
                isVibrate());
        
        final TimePickerDialog timePickerDialog = TimePickerDialog.newInstance(this, 
                calendar.get(Calendar.HOUR_OF_DAY) ,
                calendar.get(Calendar.MINUTE), 
                false, false);//最后两个参数，是否是24小时制，是否抖动。推荐false，false

        findViewById(R.id.dateButton).setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                datePickerDialog.setVibrate(isVibrate());//是否抖动，推荐true
                datePickerDialog.setYearRange(1985, 2028);//设置年份区间
                datePickerDialog.setCloseOnSingleTapDay(isCloseOnSingleTapDay());//选择后是否消失，推荐false
                datePickerDialog.show(getSupportFragmentManager(), DATEPICKER_TAG);//展示dialog，传一个tag参数
            }
        });

        findViewById(R.id.timeButton).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                timePickerDialog.setVibrate(isVibrate());//是否抖动
                timePickerDialog.setCloseOnSingleTapMinute(isCloseOnSingleTapMinute());//选择后是否消失，推荐false
                timePickerDialog.show(getSupportFragmentManager(), TIMEPICKER_TAG);//展示dialog，传一个tag参数
            }
        });

        //保存状态
        if (savedInstanceState != null) {
            DatePickerDialog dpd = (DatePickerDialog) getSupportFragmentManager().findFragmentByTag(DATEPICKER_TAG);
            if (dpd != null) {
                dpd.setOnDateSetListener(this);
            }

            TimePickerDialog tpd = (TimePickerDialog) getSupportFragmentManager().findFragmentByTag(TIMEPICKER_TAG);
            if (tpd != null) {
                tpd.setOnTimeSetListener(this);
            }
        }
    }

    private boolean isVibrate() {
        return ((CheckBox) findViewById(R.id.checkBoxVibrate)).isChecked();
    }

    private boolean isCloseOnSingleTapDay() {
        return ((CheckBox) findViewById(R.id.checkBoxCloseOnSingleTapDay)).isChecked();
    }

    private boolean isCloseOnSingleTapMinute() {
        return ((CheckBox) findViewById(R.id.checkBoxCloseOnSingleTapMinute)).isChecked();
    }

    
    //日期设置的监听器，得到年月日
    @Override
    public void onDateSet(DatePickerDialog datePickerDialog, int year, int month, int day) {
        Toast.makeText(MainActivity.this, "new date:" + year + "-" + month + "-" + day, Toast.LENGTH_LONG).show();
    }

    //时间设置的监听器，得到时分
    @Override
    public void onTimeSet(RadialPickerLayout view, int hourOfDay, int minute) {
        /**
         * 这里返回的hourOfDay是24小时制的小时，就是说无论你设置的timePicker是否是24小时制，这里都返回24小时制的小时。
         * 很方便我们来做判断。比如如果hourOfDay>12就说明是下午了。
         */
        Toast.makeText(MainActivity.this, "new time:" + hourOfDay + "-" + minute, Toast.LENGTH_LONG).show();
    }
}

 

下面重点来了，如何修改开源项目中选择框的颜色。

我先给出默认的配色方案：

 

下面我将这几个配色属性进行编号，我还做了按编号来展示的示意图片。

 

根据不同的编号属性，进行单一变量的设置。图解如下：

 

 

 

:-(，我真是操碎了心啊。好啦，这样就大功告成了，下面是源码下载。PS：这个源码下载中我还附上了讲解的图片，方便大家查看。

 

源码下载：http://download.csdn.net/detail/shark0017/8080835