`
lovelease
  • 浏览: 382815 次
社区版块
存档分类
最新评论

Android日期时间选择器实现以及自定义大小

datepickertimepicker
阅读更多
本文主要讲两个内容：1.如何将DatePicker和TimePicker放在一个dialog里面；2.改变他们的宽度；
问题1：其实现思路就是自定义一个Dialog，然后往里面同时放入DatePicker和TimePicker，直接贴代码：
date_time_picker.xml： 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal" >

    <!-- <DatePicker
        android:id="@+id/new_act_date_picker"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="0.6"
        android:calendarViewShown="false" />

    <TimePicker 
        android:id="@+id/new_act_time_picker"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="0.3"/> -->
    
    <DatePicker
        android:id="@+id/new_act_date_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:calendarViewShown="false" />

    <TimePicker 
        android:id="@+id/new_act_time_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>


然后在需要显示日期时间选择器的地方（一般是一个onClickListener中）实例化dialog：
DemoActivity.java 
arriveAtBtn.setOnClickListener(new View.OnClickListener(){
			@SuppressLint("NewApi")
			@Override
			public void onClick(View v) {
				View view = View.inflate(getApplicationContext(), R.layout.date_time_picker, null);
				final DatePicker datePicker = (DatePicker)view.findViewById(R.id.new_act_date_picker);
				final TimePicker timePicker = (TimePicker)view.findViewById(R.id.new_act_time_picker);
				
				// Init DatePicker
				int year;
				int month;
				int day;
				if (StringUtils.isEmpty(arriveDateBtn.getText().toString())) {
					// Use the current date as the default date in the picker
					final Calendar c = Calendar.getInstance();
					year = c.get(Calendar.YEAR);
					month = c.get(Calendar.MONTH);
					day = c.get(Calendar.DAY_OF_MONTH);
				} else {
					year = NewActActivity.arrive_year;
					month = NewActActivity.arrive_month;
					day = NewActActivity.arrive_day;
				}
				datePicker.init(year, month, day, null);
				
				// Init TimePicker
				int hour;
				int minute;
				if (StringUtils.isEmpty(arriveTimeBtn.getText().toString())) {
					// Use the current time as the default values for the picker
					final Calendar c = Calendar.getInstance();
					hour = c.get(Calendar.HOUR_OF_DAY);
					minute = c.get(Calendar.MINUTE);
				} else {
					hour = NewActActivity.arrive_hour;
					minute = NewActActivity.arrive_min;
				}
				timePicker.setIs24HourView(true);
				timePicker.setCurrentHour(hour);
				timePicker.setCurrentMinute(minute);
				
				// Build DateTimeDialog
				AlertDialog.Builder builder = new AlertDialog.Builder(NewActActivity.this);
				builder.setView(view);
				builder.setTitle(R.string.new_act_date_time_picker_title);
				builder.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
					@Override
					public void onClick(DialogInterface dialog, int which) {
						arrive_year = datePicker.getYear();
						arrive_month = datePicker.getMonth();
						arrive_day = datePicker.getDayOfMonth();
						String dateStr = DateUtil.formatDate(arrive_year, arrive_month, arrive_day);
						arriveDateBtn.setText(dateStr);
						
						arrive_hour = timePicker.getCurrentHour();
						arrive_min = timePicker.getCurrentMinute();
						String timeStr = DateUtil.formatTime(arrive_hour, arrive_min);
						arriveTimeBtn.setText(timeStr);
					}
				});
				builder.show();
			}
		});


这样就可以实现日期时间选择器了，这里就有点layout上的小问题，你是需要datepicker和timepicker水平排列还是竖直排列，竖直排列是没问题的：下面给出两个数值排列的效果图：
（1）DatePicker控件中设置android:calendarViewShown="false" 时的效果图：


（2）（1）DatePicker控件中设置android:spinnersShown="false" 时的效果图：



当然，如果你android:calendarViewShown和android:spinnersShown都不设置为false的话，会同时显示日历和滚动条样式，我想一般不会有人想要这样的视图吧。

水平排列是有问题的，那就是屏幕太挤，两个控件显示不全，看看效果图：



可是有人就是有水平排列的需求怎么办？这就是本文要讲的第二个问题：改变datepicker和timepicker的宽度。

网上找了很久，没有发现很有效的方法，说是这两个控件的子元素的宽度是不能自定义的，实际上把控件的所有属性看了一遍，也确实没有发现相关的属性；有人是通过自定义DatePicker和TimePicker来实现的，找了个demo，确实是实现了，不过已经相当于是自己写了一个插件了，我嫌麻烦，加之稳定性方面的考虑，没有去用，不过我会在最后把这个demo的src带上，有需要的人可以自己下载来研究。难道真不能改宽度吗？突然想到我是不是能从代码中的datePicker对象一步步往下找到其child，直接改child的宽度呢，于是debug，果然通过这种方式成功改变了宽度值，代码如下，只要在DemoActivity.java中增加一块专门用于实现改宽度的代码就行：

DemoActivity.java： 
arriveAtBtn.setOnClickListener(new View.OnClickListener(){
			@SuppressLint("NewApi")
			@Override
			public void onClick(View v) {
				View view = View.inflate(getApplicationContext(), R.layout.date_time_picker, null);
				final DatePicker datePicker = (DatePicker)view.findViewById(R.id.new_act_date_picker);
				final TimePicker timePicker = (TimePicker)view.findViewById(R.id.new_act_time_picker);
				
				// Change DatePicker layout
				LinearLayout dpContainer = (LinearLayout)datePicker.getChildAt(0)	;	// LinearLayout
				LinearLayout dpSpinner = (LinearLayout)dpContainer.getChildAt(0);		// 0 : LinearLayout; 1 : CalendarView
				for(int i = 0; i < dpSpinner.getChildCount(); i ++) {
					NumberPicker numPicker = (NumberPicker)dpSpinner.getChildAt(i);		// 0-2 : NumberPicker
					LayoutParams params1 = new LayoutParams(120, LayoutParams.WRAP_CONTENT);
					params1.leftMargin = 0;
					params1.rightMargin = 30;
					numPicker.setLayoutParams(params1);
					
//					EditText cusET = (EditText)numPicker.getChildAt(0);		// CustomEditText
//					cusET.setTextSize(14);
//					cusET.setWidth(70);
				}
				
				// Change TimePicker layout
				LinearLayout tpContainer = (LinearLayout)timePicker.getChildAt(0)	;	// LinearLayout
				LinearLayout tpSpinner = (LinearLayout)tpContainer.getChildAt(0);		// 0 : LinearLayout; 1 : CalendarView
				for(int i = 0; i < tpSpinner.getChildCount(); i ++) {
					// child(1) is a TextView ( : )
					if (i == 1) {
						continue;
					}
					NumberPicker numPicker = (NumberPicker)tpSpinner.getChildAt(i);		// 0 : NumberPicker; 1 : TextView; 2 : NumberPicker
					LayoutParams params3 = new LayoutParams(100, LayoutParams.WRAP_CONTENT);
					params3.leftMargin = 0;
					params3.rightMargin = 30;
					numPicker.setLayoutParams(params3);
					
//					EditText cusET = (EditText)numPicker.getChildAt(0);		// CustomEditText
//					cusET.setTextSize(14);
//					cusET.setWidth(70);
				}
				
				// Init DatePicker
				int year;
				int month;
				int day;
				if (StringUtils.isEmpty(arriveDateBtn.getText().toString())) {
					// Use the current date as the default date in the picker
					final Calendar c = Calendar.getInstance();
					year = c.get(Calendar.YEAR);
					month = c.get(Calendar.MONTH);
					day = c.get(Calendar.DAY_OF_MONTH);
				} else {
					year = NewActActivity.arrive_year;
					month = NewActActivity.arrive_month;
					day = NewActActivity.arrive_day;
				}
				datePicker.init(year, month, day, null);
				
				// Init TimePicker
				int hour;
				int minute;
				if (StringUtils.isEmpty(arriveTimeBtn.getText().toString())) {
					// Use the current time as the default values for the picker
					final Calendar c = Calendar.getInstance();
					hour = c.get(Calendar.HOUR_OF_DAY);
					minute = c.get(Calendar.MINUTE);
				} else {
					hour = NewActActivity.arrive_hour;
					minute = NewActActivity.arrive_min;
				}
				timePicker.setIs24HourView(true);
				timePicker.setCurrentHour(hour);
				timePicker.setCurrentMinute(minute);
				
				// Build DateTimeDialog
				AlertDialog.Builder builder = new AlertDialog.Builder(NewActActivity.this);
				builder.setView(view);
				builder.setTitle(R.string.new_act_date_time_picker_title);
				builder.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
					@Override
					public void onClick(DialogInterface dialog, int which) {
						arrive_year = datePicker.getYear();
						arrive_month = datePicker.getMonth();
						arrive_day = datePicker.getDayOfMonth();
						String dateStr = DateUtil.formatDate(arrive_year, arrive_month, arrive_day);
						arriveDateBtn.setText(dateStr);
						
						arrive_hour = timePicker.getCurrentHour();
						arrive_min = timePicker.getCurrentMinute();
						String timeStr = DateUtil.formatTime(arrive_hour, arrive_min);
						arriveTimeBtn.setText(timeStr);
					}
				});
				builder.show();
			}
		});


通过这种方式实现的效果图如下：



其实这种方法也有问题：我的手机是1080P（5.5寸）的屏，显示效果是这样，如果屏幕小点，分辨率更低的屏呢，很可能屏幕宽度不够显示，当然你可以修改一下上面代码的逻辑，根据屏幕大小来动态设置控件的宽度值，而不是设成定值，具体的这些细节按自己的需求来做吧，我这里只是想记录一下自己发现的这种改变datepicker和timepicker宽度的方法，至于是否实用，我不负责，我只当是学习一下android。不过我的项目里最终没有用这个方案，最终选择了垂直排列的日历格式那个方案。

最后附上别人实现的自定义DatePicker和TimePicker（MyPicker）
  • 大小: 235.7 KB
  • 大小: 283.2 KB
  • 大小: 215.7 KB
  • 大小: 224.7 KB
分享到：
| ViewPager刷新单个页面的方法
评论
4 楼 lovelease 2015-08-28  
hupeng420 写道
楼主辛苦了  这个水平排列的时间选择器的源码能不能发一份啊  感谢492520002@qq.com

额，项目中最终没有使用水平排列的方案，所以没有源码，水平排列的只是中间产物，其实水平排列和竖直的一样，只是把orientation改成horizontal，关键的还是改datePicker的宽度，毕竟控件本身没有提供属性可以自定义宽度，我找到的改法也写在文章最后了
3 楼 lovelease 2015-08-28  
和和和和和和 写道
你好，刚刚入门，遇到了需要弄时间控件的，日期、时间控件在一排，可是弄了半天大小都调不对，然后来研究你的代码，也也没调出来，能把你的源码发一份吗？谢谢。1031778303@qq.com

额，项目中最终没有使用水平排列的方案，所以没有源码，水平排列的只是中间产物，其实水平排列和竖直的一样，只是把orientation改成horizontal，关键的还是改datePicker的宽度，毕竟控件本身没有提供属性可以自定义宽度，我找到的改法也写在文章最后了
2 楼 和和和和和和 2015-06-22  
你好，刚刚入门，遇到了需要弄时间控件的，日期、时间控件在一排，可是弄了半天大小都调不对，然后来研究你的代码，也也没调出来，能把你的源码发一份吗？谢谢。1031778303@qq.com
1 楼 hupeng420 2015-04-22  
楼主辛苦了  这个水平排列的时间选择器的源码能不能发一份啊  感谢492520002@qq.com
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    android 日历和日期选择器.zip

    android 日历和日期选择器一个日历和日期选择器。它可以预设一个选定的日期，并可以深度定制 – 你可以自定义几乎所有的文字大小和颜色、背景颜色和月份标题

    自定义pop日期选择器.rar

    android 自定义日期选择器，可自由选择需要的天数，和选择项背景、字体大小、 颜色等前后翻页显示例如90天内的单月数据；每个月显示整月数据 90天以外的灰色字体不可点击选择。

    Android代码-个顺滑的、高度自定义的滚轮控件和选择器，支持类似 iOS 的 3D 效果。

    自定义 View 实现滑动流畅、功能齐全、用法简单、高度自定义的 WheelView，并在 WheelView 基础之上封装了常用的日期选择器（包括年、月、日 WheelView）、选项选择器。 特性（Features） 1. WheelView Features 如...

    WWCalendarTimeSelector：一个受Android启发的iOS日期时间选择器

    Android主题的日期时间选择器。 使用此高度可定制的选择器选择日期和时间。 WWCalendarTimeSelector是一个组件，可以帮助您的用户直观地选择日期。 特征 使用简单 单日选择 多日期选择 范围日期选择 纵向和横向方向...

    仿IOS的日期选择器

    还用自定义的WheelView和Dialog集合成了类似IOS的日期选择器，并根据闰年、大小月及是否是二月进行联动；

    黑马程序员 安卓学院 万元哥项目经理 分享220个代码实例

    |--自定义颜色状态选择资源 |--自定义颜色资源 |--获取网页的源码 |--读取外部资源的文件3种方式 |--读取手机内的短信 |--通信之Application实现应用全局通信 |--重启adb |--隐式转换 页面 |--震动效果的实现

    疯狂Android讲义源码

    　2.4.3 日期、时间选择器（DatePicker 　和TimePicker）的功能和用法 83 　2.4.4 进度条（ProgressBar）的 　功能和用法 85 　2.4.5 拖动条（SeekBar）的功能和 　用法 90 　2.4.6 星级评分条（RatingBar）的 　...

    新版Android开发教程.rar

    ----------------------------------- Android 编程基础 1 封面----------------------------------- Android 编程基础 2 开放手机联盟 --Open --Open --Open --Open Handset Handset Handset Handset Alliance ...

    Google Android SDK开发范例大全(PDF高清完整版1)（4-1）

    4.15 动态输入日期与时间——DatePicker与TimePicker应用 4.16 猜猜红心A在那儿——ImageView点击事件与透明度处理 4.17 后台程序运行进度提示——ProgressBar与Handler的整合应用 4.18 动态文字排版——GridView与...

    Google Android SDK开发范例大全(PDF完整版4)（4-4）

    4.15 动态输入日期与时间——DatePicker与TimePicker应用 4.16 猜猜红心A在那儿——ImageView点击事件与透明度处理 4.17 后台程序运行进度提示——ProgressBar与Handler的整合应用 4.18 动态文字排版——GridView与...

    Google Android SDK开发范例大全(PDF高清完整版3)（4-3）

    4.15 动态输入日期与时间——DatePicker与TimePicker应用 4.16 猜猜红心A在那儿——ImageView点击事件与透明度处理 4.17 后台程序运行进度提示——ProgressBar与Handler的整合应用 4.18 动态文字排版——GridView与...

    android开发实例大全_王东华

    实例015： 使用日期选择器控件DatePicker 28 实例016： 自动选择一个输入时间 30 实例017： 实现屏幕自动滚动 32 实例018： 实现一个进度条效果 32 实例019： 开发一个评分程序 35 实例020： 在屏幕中显示一幅指定的...

    Google Android SDK开发范例大全的目录

    4.15 动态输入日期与时间——DatePicker与TimePicker应用 4.16 猜猜红心A在那儿——ImageView点击事件与透明度处理 4.17 后台程序运行进度提示——ProgressBar与Handler的整合应用 4.18 动态文字排版——GridView与...

    Google Android SDK开发范例大全(完整版附部分源码).pdf

    4.15 动态输入日期与时间——DatePicker与TimePicker应用 4.16 猜猜红心A在那儿——ImageView点击事件与透明度处理 4.17 后台程序运行进度提示——ProgressBar与Handler的整合应用 4.18 动态文字排版——GridView...

    疯狂Android讲义.part2

    2.4.3 日期、时间选择器（DatePicker 和TimePicker）的功能和用法 83 2.4.4 进度条（ProgressBar）的 功能和用法 85 2.4.5 拖动条（SeekBar）的功能和 用法 90 2.4.6 星级评分条（RatingBar） 的 功能和用法 91 ...

    疯狂Android讲义.part1

    2.4.3 日期、时间选择器（DatePicker 和TimePicker）的功能和用法 83 2.4.4 进度条（ProgressBar）的 功能和用法 85 2.4.5 拖动条（SeekBar）的功能和 用法 90 2.4.6 星级评分条（RatingBar） 的 功能和用法 91 ...

    Google Android SDK 开发范例大全01

    4.15 动态输入日期与时间——DatePicker与TimePicker应用 4.16 猜猜红心A在那儿——ImageView点击事件与透明度处理 4.17 后台程序运行进度提示——ProgressBar与Handler的整合应用 4.18 动态文字排版——GridView与...

Magicbox
Global site tag (gtag.js) - Google Analytics