Android--UI之DatePicker、TimePicker...

简介:

前言

  这一篇博客分别讲解Android平台下,关于日期和时间的几个相关控件。包括DatePicker(日期选择控件)、TimePicker(时间选择控件)、DatePickerDialog(日期选择对话框)、TimePickerDialog(时间选择对话框)、AnalogClock(模拟时钟控件)、DigitalClock(数字时钟控件)。对于时间控件,无非就是一个展示、修改、获取等操作,下面一一讲解。

 

DatePicker、TimePicker

  DatePickerTimePicker都继承自android.widget.FrameLayout,并且默认展示风格、与操作风格也类似。DatePicker用于展示一个日期选择控件,TimePicker用于展示一个时间选择控件。

  作为一个日期选择控件,DatePicker可以通过设置属性来确定日期选择范围,也可以通过定义好的方法获取到当前选中的时间,并且在修改日期的时候,有响应的事件对其进行响应。

  DatePicker常用相关属性:

  • android:calendarViewShown:是否显示日历。
  • android:startYear:设置可选开始年份。
  • android:endYear:设置可选结束年份。
  • android:maxDate:设置可选最大日期,以mm/dd/yyyy格式设置。
  • android:minDate:设置可选最小日期,以mm/dd/yyyy格式设置。

  DatePicker的方法而言,除了常用获取属性的setter、getter方法之外,还需要特别注意一个初始化的方法init()方法,用于做DatePicker控件的初始化,并且设置日期被修改后,回调的响应事件。此方法的签名如下:

   init(int year, int monthOfYear, int dayOfMonth, DatePicker.OnDateChangedListener onDateChangedListener)

  从上面的init()方法可以看到,DatePicker被修改时响应的事件是DatePicker.OnDateChangedListener事件,如果要响应此事件,需要实现其中的onDateChanged()方法,其中参数从签名即可了解意思,这里不再累述。

   onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth)

 

  作为一个时间选择控件来说,TimePicker需要与时间相关的getter、setter方法之外,还需要有时间被修改够,回调的响应事件。

  TimePicker常用方法有如下几个:

  • is24HourView():判断是否为24小时制。
  • setIs24HourView():设置是否为24小时制显示。
  • getCurrentXxx():获取当前时间。
  • setCurrentXxx():设置当前时间。
  • setOnTimeChangedListener():设置时间被修改的回调方法。

  TimePicker控件被修改的回调方法,通过setOnTimeChangedListener()方法设置,其传递一个TimePicker.OnTimeChangedListener接口,需要实现其中的onTimeChanged()方法。

  

   下面通过一个示例来讲解这两个控件的使用,在示例中分别展示了这两个控件,并在其修改之后,把修改值通过Toast的方式展示到屏幕上。

  布局代码:

复制代码
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <DatePicker
 8         android:id="@+id/dpPicker"
 9         android:calendarViewShown="false"
10         android:layout_width="match_parent"
11         android:layout_height="wrap_content" />
12 
13     <TimePicker
14         android:id="@+id/tpPicker"
15         android:layout_width="match_parent"
16         android:layout_height="wrap_content" />
17 
18 
19 </LinearLayout>
复制代码

  实现代码: 

复制代码
 1 package com.bgxt.datatimepickerdemo;
 2 
 3 import java.text.SimpleDateFormat;
 4 import java.util.Calendar;
 5 
 6 import android.app.Activity;
 7 import android.os.Bundle;
 8 import android.widget.DatePicker;
 9 import android.widget.DatePicker.OnDateChangedListener;
10 import android.widget.TextView;
11 import android.widget.TimePicker;
12 import android.widget.Toast;
13 
14 public class DataTimePicker extends Activity {
15     private DatePicker datePicker;
16     private TimePicker timePicker;
17 
18     @Override
19     protected void onCreate(Bundle savedInstanceState) {
20         super.onCreate(savedInstanceState);
21         setContentView(R.layout.activity_datatimepicker);
22 
23         datePicker = (DatePicker) findViewById(R.id.dpPicker);
24         timePicker = (TimePicker) findViewById(R.id.tpPicker);
25 
26         datePicker.init(2013, 8, 20, new OnDateChangedListener() {
27 
28             @Override
29             public void onDateChanged(DatePicker view, int year,
30                     int monthOfYear, int dayOfMonth) {
31                 // 获取一个日历对象,并初始化为当前选中的时间
32                 Calendar calendar = Calendar.getInstance();
33                 calendar.set(year, monthOfYear, dayOfMonth);
34                 SimpleDateFormat format = new SimpleDateFormat(
35                         "yyyy年MM月dd日  HH:mm");
36                 Toast.makeText(DataTimePicker.this,
37                         format.format(calendar.getTime()), Toast.LENGTH_SHORT)
38                         .show();
39             }
40         });
41 
42         timePicker.setIs24HourView(true);
43         timePicker
44                 .setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
45                     @Override
46                     public void onTimeChanged(TimePicker view, int hourOfDay,
47                             int minute) {
48                         Toast.makeText(DataTimePicker.this,
49                                 hourOfDay + "小时" + minute + "分钟",
50                                 Toast.LENGTH_SHORT).show();
51                     }
52                 });
53 
54     }
55 }
复制代码

  效果展示:

 

DatePickerDialog、TimePickerDialog

  DatePickerDialogTimePickerDialog是两个对话框控件,一个弹出对话框用于选择日期,一个弹出对话框用于选择时间,都继承自android.app.AlertDialog。

  这两个控件的开发过程,其主要就是开发其选择后日期或时间后,相应的事件。

  对于DatePickeDialog而言,通过构造函数可以设置弹出的日期控件的初始值,并且可以指定选中日期后,回调事件的实现,构造函数的签名如下:

    DatePickerDialog(Context context, DatePickerDialog.OnDateSetListener callBack, int year, int monthOfYear, int dayOfMonth)

  其中DatePickerDialog.OnDateSetListener为日期选中的响应事件,其他为日期弹出窗口初始化的日期,对于一个OnDateSetListener接口而言,需要实现其中的onDateSet()方法,在这个方法内,可以得到用户选中的日期。

  对于TimePickerDialog而言,同样可以通过构造函数设置初始值,并且设定选中日期后,回调事件的实现,构造函数的签名如下:

    TimePickerDialog(Context context, TimePickerDialog.OnTimeSetListener callBack, int hourOfDay, int minute, boolean is24HourView)

  其中TimePickerDialog.OnTimeSetListener为时间选中的响应事件,其他为时间弹出窗口初始化的时间,对于一个OnTimeSetListener接口而言,需要实现其中的onTimeSet()方法,在这个方法内,可以得到用户选中的时间。

 

AnalogClock、DigitalClock

   AnalogClockDigitalClock为两个时间展示控件,切只是展示的风格不同而已,没有什么太大的区别。有一点值得注意的就是,这两个控件展示的时间是无法修改的,仅为系统当前时间。看示例就能明白,没什么好详细说的。

  下面通过一个例子说明一下DatePickerDialog、TimePickerDialog、AnalogClock、DigitalClock四个控件的使用。

  布局代码:

复制代码
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content"
10         android:text="指针时钟:" />
11 
12     <AnalogClock
13         android:layout_width="fill_parent"
14         android:layout_height="wrap_content" />
15 
16     <TextView
17         android:layout_width="fill_parent"
18         android:layout_height="wrap_content"
19         android:text="数字时钟:" />
20 
21     <DigitalClock
22         android:layout_width="fill_parent"
23         android:layout_height="wrap_content"
24         android:textSize="20dp" />
25     <Button
26         android:id="@+id/btnTimePickerDialog"
27         android:layout_width="fill_parent"
28         android:layout_height="wrap_content"
29         android:text="Show TimePickerDialog"
30          />
31     <Button
32         android:id="@+id/btnDatePickerDialog"
33         android:layout_width="fill_parent"
34         android:layout_height="wrap_content"
35         android:text="Show DatePickerDialog"
36          />
37 </LinearLayout>
复制代码

  

  实现代码:

复制代码
 1 package com.bgxt.datatimepickerdemo;
 2 
 3 import android.app.Activity;
 4 import android.app.DatePickerDialog;
 5 import android.app.DatePickerDialog.OnDateSetListener;
 6 import android.app.TimePickerDialog;
 7 import android.app.TimePickerDialog.OnTimeSetListener;
 8 import android.os.Bundle;
 9 import android.view.View;
10 import android.view.View.OnClickListener;
11 import android.widget.Button;
12 import android.widget.DatePicker;
13 import android.widget.TimePicker;
14 import android.widget.Toast;
15 
16 public class AnalogDigitalClock extends Activity implements OnClickListener {
17     private Button btnDate, btnTime;
18 
19     @Override
20     protected void onCreate(Bundle savedInstanceState) {
21         super.onCreate(savedInstanceState);
22         setContentView(R.layout.activity_anologdigital);
23         btnDate = (Button) findViewById(R.id.btnDatePickerDialog);
24         btnTime = (Button) findViewById(R.id.btnTimePickerDialog);
25         btnDate.setOnClickListener(this);
26         btnTime.setOnClickListener(this);
27     }
28 
29     @Override
30     public void onClick(View v) {
31         switch (v.getId()) {
32         case R.id.btnDatePickerDialog:
33             DatePickerDialog datePicker=new DatePickerDialog(AnalogDigitalClock.this, new OnDateSetListener() {
34                 
35                 @Override
36                 public void onDateSet(DatePicker view, int year, int monthOfYear,
37                         int dayOfMonth) {
38                     // TODO Auto-generated method stub
39                     Toast.makeText(AnalogDigitalClock.this, year+"year "+(monthOfYear+1)+"month "+dayOfMonth+"day", Toast.LENGTH_SHORT).show();
40                 }
41             }, 2013, 7, 20);
42             datePicker.show();
43             break;
44 
45         case R.id.btnTimePickerDialog:
46             TimePickerDialog time=new TimePickerDialog(AnalogDigitalClock.this, new OnTimeSetListener() {
47                 
48                 @Override
49                 public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
50                     // TODO Auto-generated method stub
51                     Toast.makeText(AnalogDigitalClock.this, hourOfDay+"hour "+minute+"minute", Toast.LENGTH_SHORT).show();
52                 }
53             }, 18, 25, true);
54             time.show();
55             break;
56         }
57 
58     }
59 }
复制代码

  效果展示:

  源码下载

总结

   以上就讲解了在Android平台下,几个与时间相关的控件,没有什么特别的,注意设置与响应事件即可。


本文转自承香墨影博客园博客,原文链接:http://www.cnblogs.com/plokmju/p/android_DatePiceker.html,如需转载请自行联系原作者


相关文章
|
4月前
|
前端开发
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
|
JavaScript
vue element-ui (DatePicker)日期选择器获取开始时间和结束时间-均为yyyy-MM-dd 格式
vue element-ui (DatePicker)日期选择器获取开始时间和结束时间-均为yyyy-MM-dd 格式
334 0
|
JavaScript
关于Element-Ui 时间范围选择器DatePicker禁用范围日期问题
饿了么组件库的[DatePicker](https://element.eleme.cn/#/zh-CN/component/date-picker) 日期范围选择,
|
Java Android开发
【安卓开发】Android中日期选择器DatePicker和TimePicker的使用
【安卓开发】Android中日期选择器DatePicker和TimePicker的使用
858 0
【安卓开发】Android中日期选择器DatePicker和TimePicker的使用
SAP UI5的控件DatePicker的DateFormat属性详解
SAP UI5的控件DatePicker的DateFormat属性详解
112 0
SAP UI5的控件DatePicker的DateFormat属性详解
SAP UI5 DatePicker控件和语言设置相关的属性详解
SAP UI5 DatePicker控件和语言设置相关的属性详解
110 0
SAP UI5 DatePicker控件和语言设置相关的属性详解
SAP UI5应用DatePicker控件的设计明细
SAP UI5应用DatePicker控件的设计明细
106 0
SAP UI5应用DatePicker控件的设计明细
SAP UI5的控件DatePicker的DateFormat属性详解
This blog contains my research about the date format determination for DatePicker control.
SAP UI5的控件DatePicker的DateFormat属性详解
SAP UI5 DatePicker setDateValue(tempString)
Created by Wang, Jerry, last modified on Oct 19, 2015
96 0
SAP UI5 DatePicker setDateValue(tempString)