android时间选择控件,andriod 日期选择器

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

APP产品设计：时间、地点、人选择控件

一、关于时间的控件分为两种：日期时间控件和日历控件。

日期时间控件：当选择的时间包含时分时会采用的控件。一般点击后，我见过的交互有两种方式，一种是在底部弹出选择框，通过滚动的形式可选择年、月、日、时、分，点击完成按钮关闭弹窗。另一种是在点击处下方直接显示，选择的形式同底部弹出选择一样，选择完成后，点击开始的点击处，隐藏选择框。

日历控件：当选择的时间仅仅为日期的时候会选择的控件。我见过的日历控件分为可折叠和不可折叠两种。不可折叠的日历控件都是按月份展示，通过左右滑动，可切换月份。可折叠的日历控件在上滑时会收起，折叠成周历，左右滑动可切换周。两种控件也可结合使用，如图：

二、地点控件，交互上我分为了页面选择控件和底部弹框控件。

页面选择交互：当选择的地点，包括历史访问地点、热门城市等，辅助功能时，可采用这种交互控件。优点：可搜索/索引查找，辅助功能可以多些。缺点：需要页面跳转。

底部弹窗交互：是一种轻松便捷的选择地点的方式，目前也有产品把热门城市选择容进来了，不过如果辅助功能较多，还是觉得选择用页面选择更好。优点：占地小。缺点：当选择的城市区域过多的时候，选择麻烦。所以在功能相对不那么频繁用到的时候，可选择此控件。

三、人员选择控件：根据有组织层级的人员选择还是无组织层级人员选择，有两种交互设计方式，无组织层级的人员选择，搜索框+人员列表即可。有组织层级的人员选择，可通过单页面组织分类，平铺显示人员，也可以通过页面层层下钻的形式，选择人员。

以上就是我个人的一些总结，如有不妥之处，不吝赐教。

- E N D -

相关问答

Q1: 这个控件叫：Picker/选择器/拾取器

Picker（选择器/拾取器/选取器）是指提供多个选项集合供用户选择其中一项的控件。在不同平台Picker的具体控件表现形式不同。在iOS端Picker一般称之为滚轮选择器，而在Android端，Picker的主要表现形式是Dialog（对话框）或dropdown menu（下拉菜单）。

在移动端Picker最常见的用途是选择时间，iOS和Android将时间相关的Picker封装成原生控件。

如果Date Picker呈现形式是日历，也可以称之为Calendar Date Picker（日历选择器）。Date Range Picker（日期范围选择器）是用来选择某个日期范围，常用于旅行、住宿等时间周期相关事项。

Picker展示区域有限，大部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用Picker。

这个控件叫：Badge/徽标/小红点

这个控件叫：A-Z index/字母索引导航

这个控件叫：Segment Controls/分段控件（附录与Tabs的区别）

这个控件叫：Skeleton Screen/加载占位图

这个控件叫：Page Indicator/Page Controls/页面指示器

这个控件叫：Stepper/步进器

这个控件叫：Switch/开关/滑动开关/切换开关

Toast（吐司提示）的曾经、现在与未来

这个控件叫：Soft Keyboard/Virtual Keyboard/软键盘/虚拟键盘

这个控件叫：Action Sheet/动作菜单/动作面板/行动列表

这个控件叫：Popover/气泡弹出框/弹出式气泡/气泡

这个控件叫：Text fields/输入框/文本框

这个控件可能叫：Notice Bar/通告栏

Q2: android自带日期控件怎么调用

1.DatePicker

在Android中，DatePicker用来实现日期输入设置，日期的设置范围为1900年1月1日至2100年12月31日。

1.1常用xml属性

DatePicker的常用xml属性如图1所示：

图1 DatePicker常用xml属性

其中，android:calendarViewShown[boolean]用于设置是否显示calendar view；android:endYear[int]用于设置截至日期；android:maxDate[int]用于设置最大的日期；android:minDate[int]用于设置最小的日期；android:spinnersShown[boolean]用于设置是否显示spinners；android:startYear[int]用于设置起始日期。

1.2常用方法

DatePicker的常用方法有以下一些：

（1）public CalendarView getCalendarView(); //获取CalendarView

（2）public boolean getCalendarViewShown(); 　 //获取CalendarView是否显示

（3）public int getDayOfMonth(); //获取当前日期的日

（4）public long getMaxDate(); //获取最大日期

（5）public long getMinDate(); //获取最小日期

（6）public int getMonth(); 　 //获取当前日期的月

（7）public boolean getSpinnersShown(); //获取Spinners是否显示

（8）public int getYear(); //获取当前日期的年

（9）public void init(int year,int monthOfYear,int dayOfMonth,

DatePicker.OnDateChangedListener onDateChangedListener); //初始化日期

（10）public void setCalendarViewShown(boolean shown);//设置是否显示CalendarView

（11）public void setMaxDate(long maxDate); //设置最大日期

（12）public void setMinDate(long minDate); //设置最小日期

（13）public void setSpinnersShown(boolean shown); //设置是否显示Spinners

（14）public void updateDate(int year,int month,int dayOfMonth); 　 //更新当前日期

2.TimePicker

在Android中，TimePicker用来实现时间输入设置，可以选择12或24小时模式。TimePicker的常用方法有以下一些：

（1）public Integer getCurrentHour(); //获取当前时间的小时

（2）public Integer getCurrentMinute(); //获取当前时间的分钟

（3）public boolean is24HourView(); //获取是否为24小时模式

（4）public void setCurrentHour(Integer currentHour); //设置当前时间的小时

（5）public void setCurrentMinute(Integer currentMinute); //设置当前时间的分钟

（6）public void setIs24HourView(Boolean is24HourView); //设置24小时模式

3.DatePickerDialog

在Android中，DatePickerDialog用来显示日期对话框。DatePickerDialog的常用方法有以下一些：

（1）public DatePicker getDatePicker(); //获取DatePicker中的日期值

（2）public void onClick(DialogInterface dialog,int which); //响应对话框中的点击事件

（3）public void onDateChanged(DatePicker view,int year,int month,int day); //响应日期改变事件

（4）public void updateDate(int year,int monthOfYear,int dayOfMonth); //更新当前日期

4.TimePickerDialog

在Android中，TimePickerDialog用来显示时间对话框。TimePickerDialog的常用方法有以下一些：

（1）public void onClick(DialogInterface dialog,int which); //响应对话框中的点击事件

（2）public void onTimeChanged(TimePicker view,int hourOfDay,int minute); //响应时间改变事件

（3）public void updateTime(int hourOfDay,int minuteOfHour); //更新当前时间

5.AnalogClock

在Android中，AnalogClock用于显示指针式时钟，该时钟仅有时钟和分钟两个指针。

6.DigitalClock

在Android中，DigitalClock用来显示数字式时钟，显示格式为HH:MM:SS AM/PM。

Q3: Android下几个相关的时间日期控件的用法

获取年月日，之前的日期不能选择

日历c = Calendar.getInstance（）; //获取系统的工具类【可以获取时间】DatePickerDialog datePickerDialog = new DatePickerDialog（context，new DatePickerDialog.OnDateSetListener（）{@覆盖public void onDateSet（DatePicker view，int year，int month，int dayOfMonth）{月+ = 1;yuyueTime.setText（year +“ - ”+ month +“ - ”+ dayOfMonth）;}}，c.get（Calendar.YEAR），c.get（Calendar.MONTH），c.get（Calendar.DATE））; //设置默认时间。datePickerDialog.getDatePicker（）setMinDate（c.getTime（）的getTime（））; //设置最小值datePickerDialog.show（）;

相关类的认识

选取器（的DatePicker，TimerPicker，NumberPicker）

其中的DatePicker和TimerPicker都有窗口的形式显示日期和时间，再返回数据。

下面分别介绍这几种时间类的使用方法。

一.DatePicker日期选择类的使用

DatePicker的常用的XML属性

XML属性

描述

机器人：calendarViewShown 设置该日期选择是否显示CalendarView组件。

机器人：endYear 设置日期选择器允许选择的最后一年。

安卓的maxDate 设置该日期选择器的最大日期。以MM / DD / YYYY格式指定最大日期。

安卓的minDate 设置该日期选择器的最小日期。以MM / DD / YYYY格式指定最小日期。

机器人：spinnersShown 设置该日期选择器是否显示微调日期选择组件。

机器人：startYear 设置日期选择器允许选择的第一年。

当用户更改了的DatePicker里的年，月，日时，将触发OnDateChangedListener监听器的onDateChange（）事件。

二.TimePicker日期选择类的使用

当用户更改了TimePicker里的时，分时，将触发OnTimeChangedListener监听器的onTimeChanged事件。

下面是日期选择类和时间选择类的一个使用示例：

（一）布局文件设计

LinearLayout xmlns:android=""xmlns:tools=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" TextView android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="显示日期的控件" /DatePicker android:id="@+id/main_dp"android:layout_width="wrap_content"android:layout_height="wrap_content" /TextView android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="显示时间的控件" /TimePicker android:id="@+id/main_tp_showTime"android:layout_width="wrap_content"android:layout_height="wrap_content" /TextView android:id="@+id/main_tv_showdate"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="显示日期" /TextView android:id="@+id/main_tv_showtime"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="显示时间" //LinearLayout

（二）主代码设计

package com.example.timer;import java.util.Calendar;import android.app.Activity;import android.os.Bundle;import android.widget.DatePicker;import android.widget.DatePicker.OnDateChangedListener;import android.widget.TextView;import android.widget.TimePicker;import android.widget.TimePicker.OnTimeChangedListener;public class MainActivity extends Activity {int year = 0;int monthOfYear = 0;int dayOfMonth = 0;int minute = 0;int houre = 0;TextView showDate = null;TextView showtime = null;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();showDate(year, monthOfYear + 1, dayOfMonth);showTime(houre, minute);}private void initView() {// 日期控件对象DatePicker date = (DatePicker) findViewById(R.id.main_dp);// 获得日历对象Calendar c = Calendar.getInstance();// 获取当前年份year = c.get(Calendar.YEAR);// 获取当前月份monthOfYear = c.get(Calendar.MONTH);// 获取当前月份的天数dayOfMonth = c.get(Calendar.DAY_OF_MONTH);// 获取当前的小时数houre = c.get(Calendar.HOUR_OF_DAY);// 获取当前的分钟数minute = c.get(Calendar.MINUTE);// 时间显示的文本对象showDate = (TextView) findViewById(R.id.main_tv_showdate);// 为日期设置监听事件date.init(year, monthOfYear, dayOfMonth, new OnDateChangedListener() {@Overridepublic void onDateChanged(DatePicker view, int year,int monthOfYear, int dayOfMonth) {MainActivity.this.year = year;MainActivity.this.monthOfYear = monthOfYear;MainActivity.this.dayOfMonth = dayOfMonth;showDate(year, monthOfYear + 1, dayOfMonth);}});// 显示时间的文本控件showtime = (TextView) findViewById(R.id.main_tv_showtime);// 时间显示的控件TimePicker time = (TimePicker) findViewById(R.id.main_tp_showTime);// 为时间控件设置监听事件time.setOnTimeChangedListener(new OnTimeChangedListener() {@Overridepublic void onTimeChanged(TimePicker view, int hourOfDay, int minute) {showTime(hourOfDay, minute);}});}//显示日期的方法private void showDate(int year, int monthOfYear, int dayOfMonth) {showDate.setText("日期是：" + year + "年" + monthOfYear + "月" + dayOfMonth+ "日");}//显示时间的方法private void showTime(int houre2, int minute2) {showtime.setText("时间是：" + houre2 + "时" + minute2 + "分");}}

运行后显示的结果：

可以从运行结果直接看到，控件的显示，可以上下拖动选择自己想要的日期和时间，但是，我们看到这样做是比较占屏幕空间的。所以后面介绍的用窗口选择日期和时间是比较常用的。

三。DatePickerDialog

DatePickerDialog和TimePickerDialog，与的DatePicker和TimePicker，最大的区别是的DatePicker和TimePicker是直接显示在屏幕画面上的，而DatePickerDialog和TimePickerDialog对象则是以弹出对话框的方式来显示。

创建DatePickerDialog的语法如下：

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

参数说明：

上下文：当前上下文;

回调：OnDateSetListener日期改变监听器;

年：初始化的年;

monthOfYear：初始化的月（从0开始计数，所以实际应用时需要加1）;

请将dayOfMonth：初始化的日;

当用户更改了DatePickerDialog里的年，月，日时，将触发OnDateSetListener监听器的onDateSet（）事件。

四。TimePickerDialog

创建TimePickerDialog的语法如下：

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

参数说明：

上下文：当前上下文;

听众：时间改变监听器;

hourOfDay：初始化的小时;

分钟：

初始化的分钟; is24HourView：是否以24小时显示时间;

当用户更改了TimePickerDialog里的时，分时，将触发OnTimeSetListener监听器的onTimeSet（）事件。

下面是日期和时间以窗口的形式显示的示例：

（一）布局文件设计

（二）代码设计

package com.java.pickerDialog;import com.example.timer.R;import android.app.Activity;import android.app.DatePickerDialog;import android.app.TimePickerDialog;import android.os.Bundle;import android.view.View;import android.widget.DatePicker;import android.widget.TextView;import android.widget.TimePicker;public class PickerDialog extends Activity {TextView tv_date = null;TextView tv_time = null;int year = 2016;int month = 10;int day = 8;int houre = 15;int minute = 20;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_pickerdialog);initView();}private void initView() {tv_date = (TextView) findViewById(R.id.dialog_tv_date);tv_time = (TextView) findViewById(R.id.dialog_tv_time);}// 点击事件,湖区日期public void getDate(View v) {new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() {@Overridepublic void onDateSet(DatePicker view, int year, int monthOfYear,int dayOfMonth) {PickerDialog.this.year = year;month = monthOfYear;day = dayOfMonth;}}, 2016, 10, 8).show();showDate();}// 点击事件,湖区日期public void getTime(View v) {new TimePickerDialog(this, new TimePickerDialog.OnTimeSetListener() {@Overridepublic void onTimeSet(TimePicker view, int hourOfDay, int minute) {houre = hourOfDay;PickerDialog.this.minute = minute;}}, 15, 20, true).show();showTime();}// 显示选择日期private void showDate() {tv_date.setText("你选择的日期是：" + year + "年" + month + "月" + day + "日");}// 显示选择日期private void showTime() {tv_time.setText("你选择的时间是：" + houre + "时" + minute + "分");}}

运行后显示的界面：

点击日期按钮后

点击时间按钮后

之后显示的效果

这个以对话框的形式来选择时间还是比较常见的。而且用户体验也是比较好的。

五。NumberPicker

NumberPicker是数值选择器，用于让用户输入数值，用户既可以通过键盘输入数值，也可以通过拖动来选择数值。

NumberPicker的常用方法如下：

方法

描述

setMinValue（int minVal）设置该组件支持的最小值。

setMaxValue（int maxVal）设置该组件支持的最大值。

setValue（int value）设置该组件的当前值。

getMaxValue（）获得该组件设置的最大值。

getMinValue（）获得该组件设置的最小值。

的getValue（）获得当前组件显示的值。

setValue（int value）设置当前组件显示的值。

使用NumberPicker让用户选择年月日的示例：

（一）布局文件设计

?xml version="1.0" encoding="utf-8"?LinearLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" TableLayout android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center" TableRow android:layout_width="match_parent"android:layout_height="wrap_content" TextView android:layout_margin="5dp"android:background="#e2a617"android:gravity="center"android:text="年"android:textSize="20sp" /TextView android:layout_margin="5dp"android:background="#0d637f"android:gravity="center"android:text="月"android:textSize="20sp" /TextView android:layout_margin="5dp"android:background="#aa2266"android:gravity="center"android:text="日"android:textSize="20sp" //TableRowTableRow android:layout_width="match_parent"android:layout_height="wrap_content" NumberPicker android:id="@+id/number_np_year"android:layout_width="wrap_content"android:layout_height="wrap_content" /NumberPicker android:id="@+id/number_np_month"android:layout_width="wrap_content"android:layout_height="wrap_content" /NumberPicker android:id="@+id/number_np_day"android:layout_width="wrap_content"android:layout_height="wrap_content" //TableRow/TableLayoutTextView android:id="@+id/number_tv_year"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="日期：" //LinearLayout

（二）的Java代码的设计

package com.java.timepicker;import android.app.Activity;import android.os.Bundle;import android.widget.NumberPicker;import android.widget.NumberPicker.OnValueChangeListener;import android.widget.TextView;import com.example.timer.R;public class NumberPickerActivity extends Activity {NumberPicker num_year = null;NumberPicker num_month = null;NumberPicker num_day = null;TextView tv_year = null;int year = 2016;int month = 10;int day = 8;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_numberpicker);initView();}private void initView() {// 实例化NumberPicker对象num_year = (NumberPicker) findViewById(R.id.number_np_year);num_month = (NumberPicker) findViewById(R.id.number_np_month);num_day = (NumberPicker) findViewById(R.id.number_np_day);// 实例化显示年份的文本对象Ftv_year = (TextView) findViewById(R.id.number_tv_year);initYear();initMonth();initDay();}private void initYear() {// 设置NumberPicker对象的相关属性num_year.setMaxValue(100000);num_year.setMinValue(1900);num_year.setValue(2016);// 为NumberPicker设置监听事件num_year.setOnValueChangedListener(new OnValueChangeListener() {@Overridepublic void onValueChange(NumberPicker picker, int oldVal,int newVal) {year = newVal;showDate();}});}private void initMonth() {// 设置NumberPicker对象的相关属性num_month.setMaxValue(12);num_month.setMinValue(1);num_month.setValue(10);// 为NumberPicker设置监听事件num_month.setOnValueChangedListener(new OnValueChangeListener() {@Overridepublic void onValueChange(NumberPicker picker, int oldVal,int newVal) {month = newVal;showDate();}});}private void initDay() {// 设置NumberPicker对象的相关属性num_day.setMaxValue(31);num_day.setMinValue(1);num_day.setValue(8);// 为NumberPicker设置监听事件num_day.setOnValueChangedListener(new OnValueChangeListener() {@Overridepublic void onValueChange(NumberPicker picker, int oldVal,int newVal) {day = newVal;showDate();}});}void showDate() {tv_year.setText("你选择的日期是：" + year + "年" + month + "月" + day + "日");}}

程序运行后的效果：

选择日期之后的效果

可以看到同样可以显示出日期。

这里是用来三个NumberPicker控件才能有这个效果，如果要具体时间要多加两个NumberPicker控件，就可以了。

但是这样做相对来的要出来的数据还是比较多一点的。

以上就是时间控件的使用的方法和简单使用，总的来的还是以窗口的形式来显示还是比较符合设计思想的，也是我们要重点掌握的。