2. 程式人生 > >Android之日期時間選擇控制元件DatePicker和TimePicker

Android之日期時間選擇控制元件DatePicker和TimePicker

阿新 • • 發佈：2019-01-22

這個月根據需求在專案中做了一個時間選擇器，雖然沒有用到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的形式來顯示選擇控制元件。
（關於AlertDialog的使用可以參考我的這篇文章：Android之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;
    }
}

相關推薦

Android之日期時間選擇控制元件DatePicker和TimePicker

這個月根據需求在專案中做了一個時間選擇器，雖然沒有用到Android原生的時間選擇控制元件，但我羞愧地發現自己竟然從來沒有用過這方面控制元件！趁現在有時間，趕緊查缺補漏，寫一篇部落格吧。 （注：為了便於區分，本文將選擇年月日的控制元件稱為日期選擇控制元件，將選

自定義Android日期時間選擇控制元件DateTimePickerDialog

ad = new AlertDialog.Builder(activity).setIcon(R.drawable.datetimeicon).setTitle(initDateTime).setView(dateTimeLayout).setPositiveButton("設定",

日期時間選擇控制元件

計算兩個日期和時間的間隔 在日期時間控制元件裡選擇控制元件事件 編輯函式 void Cdemo10Dlg::OnDtnDatetimechangeDatetimepicker1(NMHDR *pN

ExtJs 基於ExtJs2.2以上的日期時間選擇控制元件datetimefield

自己收集了一個ExtJs的日期時間選擇空間，網上流傳了很多版本，自己做了一點改，我的3.4版本的專案中使用都還正常。 這個適用於2.0以上的版本。以下是原始碼。 Ext.ns('Ext.ux.form');    Ext.ux.form.TimePickerField

EXT--日期時間選擇控制元件（精確到秒）

一。一些廢話近日來，有幾個專案用到了EXTJS作為Web前端。也看到了一些童鞋苦苦在網上尋覓可以選擇時間的控制元件，由於EXTJS版本差異較大，利用官方3.2的Demo製作了一個可以選擇到秒的時間控制元件，該控制元件只能夠用於ExtJs2.2以上的版本。經過測試ExtJs2.02版本不適用該控制元件，如

好用的js日期時間選擇控制元件

把日期時間控制元件包放到web目錄下，使用的頁面如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib p

安卓原生時間選擇器，DatePicker和TimePicker並用，彈窗dialog

轉自 https://blog.csdn.net/mxiaoyem/article/details/51565341#commentBox 核心程式碼 import android.app.AlertDialog; import android.content.Co

android之Toolbar取消子控制元件左邊留白

android之Toolbar/Actionbar取消子控制元件左邊留白 1.xml檔案裡面直接設定 <android.support.v7.widget.Toolbar     android:layout_width="match_parent"  

input域之file附件選擇控制元件

form表單提交時， 如果file控制元件有name屬性，那麼即使沒選擇檔案，即相當於這個域的值為空，後臺接收時依然會把它當做一個檔案處理， 如果這個域沒有name屬性，那麼提交form表單時就不會把這個控制元件提交到後臺， 所以通過這點，可以自由的控制form表單提交時，是否需要把這個

android之自定義組合控制元件

---------------setting_item---------------<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.an

Android之ScrollView滾動佈局控制元件使用以及顯示新聞網頁

ScrollView滾動佈局使用原理： ①滾動產生的條件是，裡面的內容大於物理尺寸 ②ScrollView裡面只有一個子元素，這個子元素就是一個線性佈局LinearLayout，我們可以線上性佈局中新增我們需要的內容，所以ScrollView中得包裹一層，並且線性佈局中設計

安卓開發-高仿ios時間選擇控制元件timepicker

在開發中如果有地址或者日期選擇等就會涉及到時間或者條件選擇器，大家都會想到仿ios的三級聯動的效果，用wheelview實現，其實安卓原生自帶了時間和日期選擇器可能是效果來說太粗獷了，所以很多產品效果圖都是清一色的ios那種效果，ok，廢話說完了上圖 demo地址：htt

自定義時間選擇控制元件（仿ios滾動效果）

1.先上自定義的控制元件： /** * 滾輪選擇器 * author LH * data 2016/8/20 17:26 */ public class WheelView extends View { public static final String

WinForm時間選擇控制元件（DateTimePicker）如何選擇（顯示）時分秒

WinForm時間選擇控制元件（DateTimePicker）如何選擇（顯示）時分秒 C# Windows窗體應用中，用到時間選擇控制元件DateTimePicker,發現不能選擇時分秒，難道要自己寫一個控制元件？！ 答案是否定的，通過屬性修改是可以選擇時間的，DateTimePicker完

android之用scrollview實現控制元件滑動固定效果

專案中最近用到需要佈局滑動到某一個地方的時候某個控制元件固定在螢幕頂部不動，就去研究了下，思路其實挺簡單的。我置頂的懸浮控制元件上邊還需要留個控制元件，比如搜尋框之類的，專案需求不一樣就留的不一樣，所以就研究了一下，網上也有很多，其實方法思路都一樣的，很簡單，自定義一下Sc

android 之RadioButton單選控制元件

示例程式碼：前端程式碼：<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

andriod studio 時間選擇控制元件的使用

首先是佈局檔案activity_main.xml<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andr

jquery時間選擇控制元件-laydate

檢視演示website立刻下載錯誤提交 填加用法 layDate致力於成為全球最用心的web日期支撐，為國內外所有從事web應用開發的同仁提供力所能及的動力。她基於原生JavaScript精心雕琢，相容了包括IE6在內的所有主流瀏覽器。她具備優雅的內部程式碼，良好的效能體驗

pc/手機端時間選擇控制元件

pc端 <input class="Wdate" type="text" onClick="WdatePicker()"> <font color=red>&lt;- 點我彈出日期控制元件</font> <in

Android 滾動的時間日期選擇控制元件

最近在學習滾動控制元件的輸入，發現原生態的Android4.0的時間控制元件輸入很美觀，就根據找到的資源寫了個小demo，喜歡的朋友可以去下載，介面的確漂亮。不過demo還有一點小 bug，希望高手朋友能幫忙解決下，謝謝。 下面是demo的一些截圖：