Android之日期时间选择控件DatePicker和TimePicker实例

这个月根据需求在项目中做了一个时间选择器,虽然没有用到Android原生的时间选择控件,但我羞愧地发现自己竟然从来没有用过这方面控件!趁现在有时间,赶紧查缺补漏,写一篇博客吧。

(注:为了便于区分,本文将选择年月日的控件称为日期选择控件,将选择时分的控件称为时间选择控件。)

1、创建项目

新建一个项目,MainActivity的布局如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:padding="10dp"
  tools:context="com.lindroid.datetimepickerdemo.MainActivity">

  <LinearLayout
    android:id="@+id/ll_date"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="选择日期:"
      android:textSize="18sp" />

    <TextView
      android:id="@+id/tv_date"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#ededed"
      android:padding="8dp"
      android:textSize="18sp" />

  </LinearLayout>

  <LinearLayout
    android:id="@+id/ll_time"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:orientation="horizontal">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="选择时间:"
      android:textSize="18sp" />

    <TextView
      android:id="@+id/tv_time"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#ededed"
      android:padding="8dp"
      android:textSize="18sp" />

  </LinearLayout>
</LinearLayout>

界面效果如下:

点击条目之后就会弹出日期或者时间选择控件,点击确定按钮后,就会将选择的结果显示在浅灰色的方框中。

2、初始化控件和创建相关变量

2.1 初始化控件

初始化控件,并为两个LinearLayout设置监听事件:

  private void initView() {
    llDate = (LinearLayout) findViewById(R.id.ll_date);
    tvDate = (TextView) findViewById(R.id.tv_date);
    llTime = (LinearLayout) findViewById(R.id.ll_time);
    tvTime = (TextView) findViewById(R.id.tv_time);
    llDate.setOnClickListener(this);
    llTime.setOnClickListener(this);
  }

2.2 创建相关变量

使用Calendar类获取当前的日期时间。

  private int year, month, day, hour, minute;
  private void initDateTime() {
    Calendar calendar = Calendar.getInstance();
    year = calendar.get(Calendar.YEAR);
    month = calendar.get(Calendar.MONTH) + 1;
    day = calendar.get(Calendar.DAY_OF_MONTH);
    hour = calendar.get(Calendar.HOUR);
    minute = calendar.get(Calendar.MINUTE);
  }

注意,calendar.get(Calendar.MONTH)获取到的月份下标是从0开始的,值为0时表示一月份,1时表示二月份,以此类推,所以必须加上1。

创建两个StringBuffer变量,用于拼接获取到的时间数据。

private StringBuffer date, time;

3、日期选择控件DatePicker

这里我们选择自定义AlertDialog的形式来显示选择控件。

日期选择控件自定义布局dialog_date.xml如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center_horizontal"
  android:orientation="vertical">

  <DatePicker
    android:id="@+id/datePicker"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:calendarViewShown="false"
    android:endYear="2027"
    android:startYear="2007" />
</LinearLayout>

只需放置一个DatePicker控件即可。不同版本的Android的DatePicker控件外观可能有所不同,比如Android4.4上是滚轮的形式,在7.0上则是一个日历视图。为了避免在4.4等低版本上显示出日历视图占用太多空间,可以将android:calendarViewShown属性设为fasle。

继承接口DatePicker.OnDateChangedListener,实现日期改变的监听方法:

  @Override
  public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
    this.year = year;
    this.month = monthOfYear;
    this.day = dayOfMonth;
  }

这样就可以获取到用户选择的年月日数值了。下面就是创建AlertDialog了:

    AlertDialog.Builder builder = new AlertDialog.Builder(context);
    builder.setPositiveButton("设置", new DialogInterface.OnClickListener() {
      @Override
      public void onClick(DialogInterface dialog, int which) {
        if (date.length() > 0) { //清除上次记录的日期
          date.delete(0, date.length());
        }
        tvDate.setText(date.append(String.valueOf(year)).append("年").append(String.valueOf(month)).append("月").append(day).append("日"));
        dialog.dismiss();
      }
    });
    builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
      @Override
      public void onClick(DialogInterface dialog, int which) {
        dialog.dismiss();
      }
    });
    final AlertDialog dialog = builder.create();
    View dialogView = View.inflate(context, R.layout.dialog_date, null);
    final DatePicker datePicker = (DatePicker) dialogView.findViewById(R.id.datePicker);
    dialog.setTitle("设置日期");
    dialog.setView(dialogView);
    dialog.show();
    //初始化日期监听事件
    datePicker.init(year, month - 1, day, this);

DatePicker需要调用init方法初始化,传入年月日数值和OnDateChangedListener对象。要记住我们前面在给month赋值时已经是对应的月份数值了,而这里需要的是下标值,所以要减1。

运行之后,效果如图所示:

4、时间选择控件TimePicker

这里我们同样需要一个自定义的AlertDialog布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:orientation="vertical">

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

</LinearLayout>

同样,我们需要监听时和分的变化,所以继承TimePicker.OnTimeChangedListener接口,实现以下的方法:

  @Override
  public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
    this.hour = hourOfDay;
    this.minute = minute;
  }

时间选择控件的初始化跟日期选择控件的有所不同,DatePicker一个init方法解决,但TimePicker的工作量稍大一点。看下面代码:

        timePicker.setCurrentHour(hour);
        timePicker.setCurrentMinute(minute);
        timePicker.setIs24HourView(true); //设置24小时制
        timePicker.setOnTimeChangedListener(this);

除了要设置当前要显示的时和分之外,还要设置是24小时制还是12小时制。

效果图如下:

5、完整的MainActivity代码

package com.lindroid.datetimepickerdemo;

import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.DatePicker;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.TimePicker;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity implements View.OnClickListener, DatePicker.OnDateChangedListener, TimePicker.OnTimeChangedListener {
  private Context context;
  private LinearLayout llDate, llTime;
  private TextView tvDate, tvTime;
  private int year, month, day, hour, minute;
  //在TextView上显示的字符
  private StringBuffer date, time;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    context = this;
    date = new StringBuffer();
    time = new StringBuffer();
    initView();
    initDateTime();
  }

  /**
   * 初始化控件
   */
  private void initView() {

    llDate = (LinearLayout) findViewById(R.id.ll_date);
    tvDate = (TextView) findViewById(R.id.tv_date);
    llTime = (LinearLayout) findViewById(R.id.ll_time);
    tvTime = (TextView) findViewById(R.id.tv_time);
    llDate.setOnClickListener(this);
    llTime.setOnClickListener(this);
  }

  /**
   * 获取当前的日期和时间
   */
  private void initDateTime() {
    Calendar calendar = Calendar.getInstance();
    year = calendar.get(Calendar.YEAR);
    month = calendar.get(Calendar.MONTH) + 1;
    day = calendar.get(Calendar.DAY_OF_MONTH);
    hour = calendar.get(Calendar.HOUR);
    minute = calendar.get(Calendar.MINUTE);

  }

  @Override
  public void onClick(View v) {
    switch (v.getId()) {
      case R.id.ll_date:
        AlertDialog.Builder builder = new AlertDialog.Builder(context);
        builder.setPositiveButton("设置", new DialogInterface.OnClickListener() {
          @Override
          public void onClick(DialogInterface dialog, int which) {
            if (date.length() > 0) { //清除上次记录的日期
              date.delete(0, date.length());
            }
            tvDate.setText(date.append(String.valueOf(year)).append("年").append(String.valueOf(month)).append("月").append(day).append("日"));
            dialog.dismiss();
          }
        });
        builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
          @Override
          public void onClick(DialogInterface dialog, int which) {
            dialog.dismiss();
          }
        });
        final AlertDialog dialog = builder.create();
        View dialogView = View.inflate(context, R.layout.dialog_date, null);
        final DatePicker datePicker = (DatePicker) dialogView.findViewById(R.id.datePicker);

        dialog.setTitle("设置日期");
        dialog.setView(dialogView);
        dialog.show();
        //初始化日期监听事件
        datePicker.init(year, month - 1, day, this);
        break;
      case R.id.ll_time:
        AlertDialog.Builder builder2 = new AlertDialog.Builder(context);
        builder2.setPositiveButton("设置", new DialogInterface.OnClickListener() {
          @Override
          public void onClick(DialogInterface dialog, int which) {
            if (time.length() > 0) { //清除上次记录的日期
              time.delete(0, time.length());
            }
            tvTime.setText(time.append(String.valueOf(hour)).append("时").append(String.valueOf(minute)).append("分"));
            dialog.dismiss();
          }
        });
        builder2.setNegativeButton("取消", new DialogInterface.OnClickListener() {
          @Override
          public void onClick(DialogInterface dialog, int which) {
            dialog.dismiss();
          }
        });
        AlertDialog dialog2 = builder2.create();
        View dialogView2 = View.inflate(context, R.layout.dialog_time, null);
        TimePicker timePicker = (TimePicker) dialogView2.findViewById(R.id.timePicker);
        timePicker.setCurrentHour(hour);
        timePicker.setCurrentMinute(minute);
        timePicker.setIs24HourView(true); //设置24小时制
        timePicker.setOnTimeChangedListener(this);
        dialog2.setTitle("设置时间");
        dialog2.setView(dialogView2);
        dialog2.show();
        break;
    }
  }

  /**
   * 日期改变的监听事件
   *
   * @param view
   * @param year
   * @param monthOfYear
   * @param dayOfMonth
   */
  @Override
  public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
    this.year = year;
    this.month = monthOfYear;
    this.day = dayOfMonth;
  }

  /**
   * 时间改变的监听事件
   *
   * @param view
   * @param hourOfDay
   * @param minute
   */
  @Override
  public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
    this.hour = hourOfDay;
    this.minute = minute;
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android 实现IOS 滚轮选择控件的实例(源码下载)

     Android 实现IOS 滚轮选择控件的实例 最近根据项目需要,整理了一个相对比较全面的 WheelView 使用控件,借用之前看到的一句话来说,就是站在巨人肩膀上,进行了一些小调整. 这里先贴上效果图 一般常用的时间选择格式,,单项选择,以及城市联动,这里基本都可以满足了. 这里把 单项选择,和 日期时间选择 给提出到 Util 类中,代码如下: public class Util { /** * 时间选择回调 */ public interface TimerPickerCallBack

  • Android实现滑动选择控件实例代码

    前言 最近做了个滑动选择的小控件,拿出来给大家分享一下,先上图 运行效果 实现步骤 这里分解为3个动作:Down.Move.Up来进行分析,博主文采不好,大家直接看流程图吧!! 代码分析 前置知识 1.这个地方使用的是RecyclerView的代码,使用RecyclerView只能使用LinearLayoutManager,ListView的运行效果稍微要比RecyclerView差一些 //这里使用dispatchTouchEvent,因为onTouchEvent容易被OnTouchListe

  • Android自定义View实现多图片选择控件

    前言 相信很多朋友在开发中都会遇到图片上传的情况,尤其是多图上传,最经典的莫过于微信的图片选择了.所有很多情况下会使用到多图选择,所以就有了这篇文章,今天抽点时间写了个控件.  •支持自定义选择图片的样式  •支持设置图片选择数量  •支持图片预览,删除  •支持图片拍照 先来看看效果 实现分析 假如不定义控件,我们要实现这样一个功能,无非是写个GridView在item点击的时候去显示图片进行选择,在返回界面的时候进行GridView的数据刷新.我们把这些逻辑写在我们自定义的GridView中

  • 可支持快速搜索筛选的Android自定义选择控件

    Android 自定义支持快速搜索筛选的选择控件使用方法,具体如下 项目中遇到选择控件选项过多,需要快速查找匹配的情况. 做了简单的Demo,效果图如下: 源码地址:https://github.com/whieenz/SearchSelect 这个控件是由Dialog+SearchView+ListView实现的.Dialog用来承载选择控件,SearchView实现输入,ListView展示结果.设计概要图如下: 一.自定义Dialog Dialog布局文件 <?xml version=&quo

  • Android自定义控件之日期选择控件使用详解

    Android日期选择控件效果如下: 调用的代码: @OnClick(R.id.btn0) public void btn0() { final AlertDialog dialog = new AlertDialog.Builder(context).create(); dialog.show(); Window window = dialog.getWindow(); window.setContentView(R.layout.dialog_change_date); window.set

  • 轻松实现可扩展自定义的Android滚轮时间选择控件

    项目需求中有个功能模块需要用到时间选择控件,但是android系统自带的太丑了,只能自己优化下,结合WheelView实现滚轮选择日期,好像网上也挺多这种文章的.但是适用范围还是不同,希望这个能够对需求相同的朋友有一定帮助.控件标题还有年月日时分秒这些可以自己控制是否显示,先来看效果. 1.有年月日时分的开始时间 2.只有年月日的结束时间 3.用于有时身份证到期的时间选择(分为勾选长期和直接选择时间两种,另外长期后面自己也可以进行扩展) 4.项目结构 5.直接贴代码,代码里面注释很详细 <spa

  • Android高仿IOS 滚轮选择控件

    最近根据项目需要,整理了一个相对比较全面的 WheelView 使用控件,借用之前看到的一句话来说,就是站在巨人肩膀上,进行了一些小调整. 这里先贴上效果图 一般常用的时间选择格式,,单项选择,以及城市联动,这里基本都可以满足了. 这里把 单项选择,和 日期时间选择 给提出到 Util 类中,代码如下: public class Util { /** * 时间选择回调 */ public interface TimerPickerCallBack { void onTimeSelect(Stri

  • android实现双日期选择控件(可隐藏日,只显示年月)

    在安卓开发中,会碰到选开始日期和结束日期的问题.特别是在使用Pad时,如果弹出一个Dialog,能够同时选择开始日期和结束日期,那将是极好的.我在开发中在DatePickerDialog的基础上做了修改,实现了这种Dialog.效果如下: 具体实现方法为: 先新建一个安卓项目DoubleDatePicker,在res/layout文件夹下新建date_picker_dialog.xml,内容如下: <?xml version="1.0" encoding="utf-8&

  • Android之日期时间选择控件DatePicker和TimePicker实例

    这个月根据需求在项目中做了一个时间选择器,虽然没有用到Android原生的时间选择控件,但我羞愧地发现自己竟然从来没有用过这方面控件!趁现在有时间,赶紧查缺补漏,写一篇博客吧. (注:为了便于区分,本文将选择年月日的控件称为日期选择控件,将选择时分的控件称为时间选择控件.) 1.创建项目 新建一个项目,MainActivity的布局如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • Android HorizontalScrollView内子控件横向拖拽实例代码

    前言 网上ListView上下拖动的例子有,效果也很好,但是项目要横着拖的,只要硬着头皮自己写(主要是没找到合适的),参考文章1修改而来,分享一下. 正文 截图 实现代码: public class HoDragActivity extends Activity { private LinearLayout main; private GestureDetector mGestureDetector; @Override public void onCreate(Bundle savedInst

  • Android日期选择控件使用详解

    本文实例为大家分享了Android日期选择控件的使用方法,供大家参考,具体内容如下 1.创建dialog 布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" an

  • datePicker——日期选择控件(with jquery)

    demo: http://demo.jb51.net/js/2011/jQuery_calendar/index.html down: http://www.jb51.net/jiaoben/19622.html 用法很简单,而且js文件也很小,之前也见过一些日期选择控件,但个头都比较大,影响速度可以设置日期的格式,可以选择日期的起止时间,如果不加参数的话,默认就是之前的日期不可选,而只能从今天开始选择 现在My97 DatePicker也不错,不用jquery 一款很不错的基于JavaScri

  • bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法

    筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z-index) z-index 的值越大优先级越高 就会越显示靠前上图的情况就是dialog的 x-index的值大于datepicker的值 上图找到了对应控件的css样式后修改x-index的值直到datepicker 的控件显示在dialog之前: 记住这个x-index的值(假设1100)后

  • JS日期和时间选择控件升级版(自写)

    鉴于网上找到的几个日期选择程序有些问题,遂着手重写一个程序,大部分还是借鉴前人的代码,添加了时间选择功能,隐藏会遮挡控件的标签select,object. 开始本想使用window.createPopup()来弹出日历的选择,这样就可以跨过任何标签. 不过做到中途发现用createPopup窗口实现理论上是行不通的: 一是因为不在窗体里单击任何地方都会关闭窗口,而当用下拉框选择年份时,很有可能会单击到窗体外的地方,当然这个可以自己写select来避免,但是比较麻烦: 二是窗体的宽度和高度只能在弹

  • Ext JS框架中日期函数的用法及日期选择控件的实现

    Ext.Date是一个单例,封装了一系列日期操作函数,扩展JavaScript Date的功能,下面列出一些常用的功能. 基本函数: Ext.Date.add(date, interval, value) 给date增加或减少时间,这个函数不改变原有Date对象的值,而是返回一个新的Date对象. Ext.Date.between(date, start, end) 判断date是否在start和end之间. Ext.Date.clearTime(date, clone) 把date的时间设置成

  • Ext JS 4实现带week(星期)的日期选择控件(实战二)

    前言 JavaScript 中的日期和时间 Ext JS 4实现带week(星期)的日期选择控件(实战一) 如对本篇的一些预备知识需详尽了解,可参考以上两篇. Javascript 有提供Date 对象用于处理时间.但是Date 并没有提供获取星期的方法. 要在web 端通过js 方式获取某个时间是这一年的第几个星期,可以根据一些算法去实现. 当然, jquery 的扩展组件 等有直接提供这样的一些现成包. 像Ext js 就有提供获取星期的方法 Ext.Date.getWeekOfYear(d

随机推荐