这个开源项目是模仿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:这个源码下载中我还附上了讲解的图片,方便大家查看。