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