android时间选择控件,andriod 日期选择器
APP产品设计:时间、地点、人选择控件
一、关于时间的控件分为两种:日期时间控件 和 日历控件。
创新互联公司专注于企业全网营销推广、网站重做改版、东丰网站定制设计、自适应品牌网站建设、H5场景定制、电子商务商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为东丰等各大城市提供网站开发制作服务。
日期时间控件: 当选择的时间包含时分时会采用的控件 。一般点击后,我见过的交互有两种方式,一种是在底部弹出选择框,通过滚动的形式可选择年、月、日、时、分,点击完成按钮关闭弹窗。另一种是在点击处下方直接显示,选择的形式同底部弹出选择一样,选择完成后,点击开始的点击处,隐藏选择框。
日历控件 :当选择的时间仅仅为日期的时候会选择的控件。我见过的日历控件分为可折叠和不可折叠两种。不可折叠的日历控件都是按月份展示,通过左右滑动,可切换月份。可折叠的日历控件在上滑时会收起,折叠成周历,左右滑动可切换周。两种控件也可结合使用,如图:
二、地点控件,交互上我分为了页面选择控件和底部弹框控件。
页面选择交互 :当选择的地点,包括历史访问地点、热门城市等,辅助功能时,可采用这种交互控件。优点:可搜索/索引查找,辅助功能可以多些。缺点:需要页面跳转。
底部弹窗交互 :是一种轻松便捷的选择地点的方式,目前也有产品把热门城市选择容进来了,不过如果辅助功能较多,还是觉得选择用页面选择更好。优点:占地小。缺点:当选择的城市区域过多的时候,选择麻烦。所以在功能相对不那么频繁用到的时候,可选择此控件。
三、人员选择控件:根据有组织层级的人员选择还是无组织层级人员选择,有两种交互设计方式,无组织层级的人员选择,搜索框+人员列表即可。有组织层级的人员选择,可通过单页面组织分类,平铺显示人员,也可以通过页面层层下钻的形式,选择人员。
以上就是我个人的一些总结,如有不妥之处,不吝赐教。
- E N D -
这个控件叫: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/通告栏
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。
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
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控件,就可以了。
但是这样做相对来的要出来的数据还是比较多一点的。
以上就是时间控件的使用的方法和简单使用,总的来的还是以窗口的形式来显示还是比较符合设计思想的,也是我们要重点掌握的。
本文名称:android时间选择控件,andriod 日期选择器
转载源于:http://scyanting.com/article/dscdopc.html