甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
一、关于时间的控件分为两种：日期时间控件 和 日历控件。
创新互联公司专注于企业全网营销推广、网站重做改版、东丰网站定制设计、自适应品牌网站建设、H5场景定制、电子商务商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为东丰等各大城市提供网站开发制作服务。
日期时间控件： 当选择的时间包含时分时会采用的控件 。一般点击后，我见过的交互有两种方式，一种是在底部弹出选择框，通过滚动的形式可选择年、月、日、时、分，点击完成按钮关闭弹窗。另一种是在点击处下方直接显示，选择的形式同底部弹出选择一样，选择完成后，点击开始的点击处，隐藏选择框。
日历控件 ：当选择的时间仅仅为日期的时候会选择的控件。我见过的日历控件分为可折叠和不可折叠两种。不可折叠的日历控件都是按月份展示，通过左右滑动，可切换月份。可折叠的日历控件在上滑时会收起，折叠成周历，左右滑动可切换周。两种控件也可结合使用，如图：
二、地点控件，交互上我分为了页面选择控件和底部弹框控件。
页面选择交互 ：当选择的地点，包括历史访问地点、热门城市等，辅助功能时，可采用这种交互控件。优点：可搜索/索引查找，辅助功能可以多些。缺点：需要页面跳转。
底部弹窗交互 ：是一种轻松便捷的选择地点的方式，目前也有产品把热门城市选择容进来了，不过如果辅助功能较多，还是觉得选择用页面选择更好。优点：占地小。缺点：当选择的城市区域过多的时候，选择麻烦。所以在功能相对不那么频繁用到的时候，可选择此控件。
三、人员选择控件：根据有组织层级的人员选择还是无组织层级人员选择，有两种交互设计方式，无组织层级的人员选择，搜索框+人员列表即可。有组织层级的人员选择，可通过单页面组织分类，平铺显示人员，也可以通过页面层层下钻的形式，选择人员。
以上就是我个人的一些总结，如有不妥之处，不吝赐教。
- E N D -
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/通告栏
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。
获取年月日，之前的日期不能选择
日历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
1
（二）主代码设计
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 + "分");}}
1
运行后显示的结果：
可以从运行结果直接看到，控件的显示，可以上下拖动选择自己想要的日期和时间，但是，我们看到这样做是比较占屏幕空间的。所以后面介绍的用窗口选择日期和时间是比较常用的。
三。DatePickerDialog
DatePickerDialog和TimePickerDialog，与的DatePicker和TimePicker，最大的区别是的DatePicker和TimePicker是直接显示在屏幕画面上的，而DatePickerDialog和TimePickerDialog对象则是以弹出对话框的方式来显示。
创建DatePickerDialog的语法如下：
DatePickerDialog(Context context, DatePickerDialog.OnDateSetListener callBack, int year, int monthOfYear, int dayOfMonth)
1
参数说明：
上下文：当前上下文;
回调：OnDateSetListener日期改变监听器;
年：初始化的年;
monthOfYear：初始化的月（从0开始计数，所以实际应用时需要加1）;
请将dayOfMonth：初始化的日;
当用户更改了DatePickerDialog里的年，月，日时，将触发OnDateSetListener监听器的onDateSet（）事件。
四。TimePickerDialog
创建TimePickerDialog的语法如下：
TimePickerDialog(Context context, TimePickerDialog.OnTimeSetListener listener, int hourOfDay,int minute, boolean is24HourView)
1
参数说明：
上下文：当前上下文;
听众：时间改变监听器;
hourOfDay：初始化的小时;
分钟：
初始化的分钟; is24HourView：是否以24小时显示时间;
当用户更改了TimePickerDialog里的时，分时，将触发OnTimeSetListener监听器的onTimeSet（）事件。
下面是日期和时间以窗口的形式显示的示例：
（一）布局文件设计
?xml version="1.0" encoding="utf-8"?LinearLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="getDate"android:text="设置日期" /Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="getTime"android:text="设置时间" /TextView android:id="@+id/dialog_tv_date"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="getTime"android:text="日期：" /TextView android:id="@+id/dialog_tv_time"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="时间：" //LinearLayout
1
（二）代码设计
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 + "分");}}
1
运行后显示的界面：
点击日期按钮后
点击时间按钮后
之后显示的效果
这个以对话框的形式来选择时间还是比较常见的。而且用户体验也是比较好的。
五。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
1
（二）的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 + "日");}}
1
程序运行后的效果：
选择日期之后的效果
可以看到同样可以显示出日期。
这里是用来三个NumberPicker控件才能有这个效果，如果要具体时间要多加两个NumberPicker控件，就可以了。
但是这样做相对来的要出来的数据还是比较多一点的。
以上就是时间控件的使用的方法和简单使用，总的来的还是以窗口的形式来显示还是比较符合设计思想的，也是我们要重点掌握的。