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

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

阅读更多
本文主要讲两个内容: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
分享到:
评论
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自定义日期选择器源码

    这篇内容将深入探讨如何在Android中创建一个自定义日期选择器,并通过源码分析来增强我们的理解。 首先,我们要明白自定义日期选择器的基本结构。通常,它会包含一个日历视图,让用户可以选择年、月、日,有时还...

    android 自定义时间日期选择器

    总之,`android 自定义时间日期选择器`是Android开发中实现个性化交互的一个典型示例,它涉及到了Android UI设计、事件处理、数据管理等多个方面的技术。通过研究和学习这个源码,开发者可以提升自己在Android自定义...

    android日期时间选择器(年月日时分秒)

    `android日期时间选择器(年月日时分秒)`是一个常见的需求,旨在为用户提供方便、直观的日期和时间选择体验。在这个场景下,我们可以使用自定义的日期时间选择器,例如`CustomDatePicker`,它是开发者`liuwan1992`...

    android 时间选择器

    综上所述,这个“android 时间选择器”项目涉及到Android自定义视图开发、UI定制、事件处理、动画实现等多个技术点,对于提升Android应用的用户体验具有重要意义。通过学习和使用这样的组件,开发者可以更自由地塑造...

    Android自定义漂亮Dialog中嵌入自定义时间选择器和日期选择器

    文件"SelectDateTime"可能是包含了实现上述功能的源码,包括自定义Dialog的布局文件、自定义DialogFragment的Java类以及可能的自定义时间选择器和日期选择器的Java和XML文件。通过查看和学习这些源码,我们可以更...

    Android自定义滚轮式日期(时间)选择控件

    最后,将这些独立的滚轮组合成一个完整的日期和时间选择器。可以创建一个新的自定义View类,继承自`LinearLayout`或其他适合的父视图,然后在该类中包含所有的滚轮控件,并处理它们之间的交互逻辑。 6. **测试与...

    android日期时间选择器

    本示例“android日期时间选择器”提供了一种自定义解决方案,以弥补原生Android日期时间控件功能的不足。下面我们将深入探讨这个话题。 首先,Android原生系统提供了两种基本的日期时间选择器:DatePicker和...

    基于wheelView的自定义日期选择器

    "基于WheelView的自定义日期选择器"就是一个很好的示例,它利用了WheelView这一滚动视图组件来实现用户友好的日期选择功能。这篇内容将深入探讨如何构建这样的选择器,以及其在Android开发中的应用和扩展性。 首先...

    自定义的滑轮城市选择器

    综上所述,实现一个自定义的滑轮城市选择器涉及到Android视图的自定义、数据绑定、布局设计、动画实现、事件处理等多个方面。通过精心设计和优化,我们可以创建出一个既美观又实用的城市选择组件,提升用户在应用...

    Android自定义简易日期选择器

    以上就是创建一个自定义Android日期选择器的基本步骤。实践中,你可能还需要考虑更多细节,比如日期的有效性检查、国际化支持、触摸反馈动画等,以提升用户体验。记得在编码过程中充分测试,确保在不同设备和Android...

    Android自定义时间选择器

    6. 适配不同设备和Android版本:考虑到Android系统的碎片化,自定义时间选择器应兼容多种屏幕尺寸和Android版本,可能需要使用Support Library或AndroidX库来实现向后兼容。 7. 测试:为了确保时间选择器在各种情况...

    Android自定义日期选择器

    总的来说,创建一个自定义的Android日期选择器需要结合UI设计、事件处理、数据绑定等多个方面的知识,通过不断优化和迭代,可以打造出符合应用需求且具有良好用户体验的自定义组件。在实际开发中,可以参考现有的...

    自定义时间选择器

    在Android开发中,自定义时间选择器是一种常见的需求,它允许用户通过滚动界面来选择日期或时间,提供了比系统默认日期选择器更为灵活的交互体验。本教程将深入探讨如何创建一个自定义的时间选择器,重点是使用`...

    android自定义垂直滚动选择器

    通常,这样的组件可以是自定义的时间选择器(TimePicker)或日期选择器(DatePicker),它们替代了Android系统默认的弹出对话框样式,可以更好地融入应用的设计风格。 描述中提到“超好用”,这表明我们关注的...

    Android 滚动时间选择器,爱上租时间选择器

    在Android开发中,时间选择器(DatePicker和TimePicker)是常用的功能组件,它们允许用户方便地选择日期和时间。本文将深入探讨“Android滚动时间选择器”,特别关注“爱上租时间选择器”的实现细节和使用方法。 ...

    android 滚动选择器 滚轮选择器 选择器 自定义控件

    - Android开源项目通常使用WheelView库,如github上的“android-wheel”项目,它提供了一个可滚动的视图,可以用来实现日期选择器、时间选择器等。 2. 使用方法: - 引入第三方库依赖。 - 在XML布局文件中添加...

    android wheelview日期选择器

    "android wheelview日期选择器"项目就是为了解决这个问题而诞生的,它通过使用WheelView来实现一个更具个性化和美观的日期选择界面。 WheelView是Android中一种滚动选择器,它可以展示一系列连续的数据项并允许用户...

    android滚轮时间选择器

    在Android SDK中并没有内置的滚轮时间选择器,但我们可以利用自定义视图或者第三方库来实现这一功能。 1. 自定义滚轮时间选择器: - 创建一个自定义的`WheelView`,继承自`LinearLayout`或`ScrollView`,并添加多...

    Android-YbAndroidPicker日期选择器身高选择器体重选择器城市选择器

    - 自定义配置:开发者可以设置日期选择器的起始日期、结束日期以及默认选中值,还可以调整日期显示格式,以满足不同需求。 2. **身高选择器** - 身高选择器是专为输入身高数据设计的,通常用于健身、医疗等应用中...

    Flutter高阶技术:如何实现自定义日期选择器

    总结起来,实现一个自定义的Flutter日期选择器需要掌握Flutter的基本组件、状态管理、绘图、本地化、触摸事件处理、动画以及性能优化等多个方面的知识。通过不断实践和优化,我们可以创建出既美观又功能强大的日期...

Global site tag (gtag.js) - Google Analytics