開源項目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