Android--UI之DatePicker、TimePicker...

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

前言

　　這一篇部落格分別講解Android平臺下，關於日期和時間的幾個相關控制元件。包括DatePicker（日期選擇控制元件）、TimePicker（時間選擇控制元件）、DatePickerDialog（日期選擇對話方塊）、TimePickerDialog（時間選擇對話方塊）、AnalogClock（模擬時鐘控制元件）、DigitalClock（數字時鐘控制元件）。對於時間控制元件，無非就是一個展示、修改、獲取等操作，下面一一講解。

DatePicker、TimePicker

　　DatePicker、TimePicker都繼承自android.widget.FrameLayout，並且預設展示風格、與操作風格也類似。DatePicker用於展示一個日期選擇控制元件，TimePicker用於展示一個時間選擇控制元件。

　　作為一個日期選擇控制元件，DatePicker可以通過設定屬性來確定日期選擇範圍，也可以通過定義好的方法獲取到當前選中的時間，並且在修改日期的時候，有響應的事件對其進行響應。

　　DatePicker常用相關屬性：

android:calendarViewShown：是否顯示日曆。
android:startYear:設定可選開始年份。
android:endYear：設定可選結束年份。
android:maxDate：設定可選最大日期，以mm/dd/yyyy格式設定。
android:minDate：設定可選最小日期，以mm/dd/yyyy格式設定。

　　DatePicker的方法而言，除了常用獲取屬性的setter、getter方法之外，還需要特別注意一個初始化的方法init()方法，用於做DatePicker控制元件的初始化，並且設定日期被修改後，回撥的響應事件。此方法的簽名如下：

　　　init(int year, int monthOfYear, int dayOfMonth, DatePicker.OnDateChangedListener onDateChangedListener)

　　從上面的init()方法可以看到，DatePicker被修改時響應的事件是DatePicker.OnDateChangedListener事件，如果要響應此事件，需要實現其中的onDateChanged()方法，其中引數從簽名即可瞭解意思，這裡不再累述。

　　　onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth)

　　作為一個時間選擇控制元件來說，TimePicker需要與時間相關的getter、setter方法之外，還需要有時間被修改夠，回撥的響應事件。

　　TimePicker常用方法有如下幾個：

is24HourView()：判斷是否為24小時制。
setIs24HourView()：設定是否為24小時制顯示。
getCurrentXxx()：獲取當前時間。
setCurrentXxx()：設定當前時間。
setOnTimeChangedListener()：設定時間被修改的回撥方法。

　　TimePicker控制元件被修改的回撥方法，通過setOnTimeChangedListener()方法設定，其傳遞一個TimePicker.OnTimeChangedListener介面，需要實現其中的onTimeChanged()方法。

　　下面通過一個示例來講解這兩個控制元件的使用，在示例中分別展示了這兩個控制元件，並在其修改之後，把修改值通過Toast的方式展示到螢幕上。

　　佈局程式碼：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <DatePicker
 8         android:id="@+id/dpPicker"
 9         android:calendarViewShown="false"
10         android:layout_width="match_parent"
11         android:layout_height="wrap_content" />
12 
13     <TimePicker
14         android:id="@+id/tpPicker"
15         android:layout_width="match_parent"
16         android:layout_height="wrap_content" />
17 
18 
19 </LinearLayout>

　　實現程式碼：

 1 package com.bgxt.datatimepickerdemo;
 2 
 3 import java.text.SimpleDateFormat;
 4 import java.util.Calendar;
 5 
 6 import android.app.Activity;
 7 import android.os.Bundle;
 8 import android.widget.DatePicker;
 9 import android.widget.DatePicker.OnDateChangedListener;
10 import android.widget.TextView;
11 import android.widget.TimePicker;
12 import android.widget.Toast;
13 
14 public class DataTimePicker extends Activity {
15     private DatePicker datePicker;
16     private TimePicker timePicker;
17 
18     @Override
19     protected void onCreate(Bundle savedInstanceState) {
20         super.onCreate(savedInstanceState);
21         setContentView(R.layout.activity_datatimepicker);
22 
23         datePicker = (DatePicker) findViewById(R.id.dpPicker);
24         timePicker = (TimePicker) findViewById(R.id.tpPicker);
25 
26         datePicker.init(2013, 8, 20, new OnDateChangedListener() {
27 
28             @Override
29             public void onDateChanged(DatePicker view, int year,
30                     int monthOfYear, int dayOfMonth) {
31                 // 獲取一個日曆物件，並初始化為當前選中的時間
32                 Calendar calendar = Calendar.getInstance();
33                 calendar.set(year, monthOfYear, dayOfMonth);
34                 SimpleDateFormat format = new SimpleDateFormat(
35                         "yyyy年MM月dd日  HH:mm");
36                 Toast.makeText(DataTimePicker.this,
37                         format.format(calendar.getTime()), Toast.LENGTH_SHORT)
38                         .show();
39             }
40         });
41 
42         timePicker.setIs24HourView(true);
43         timePicker
44                 .setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
45                     @Override
46                     public void onTimeChanged(TimePicker view, int hourOfDay,
47                             int minute) {
48                         Toast.makeText(DataTimePicker.this,
49                                 hourOfDay + "小時" + minute + "分鐘",
50                                 Toast.LENGTH_SHORT).show();
51                     }
52                 });
53 
54     }
55 }

　　效果展示：

DatePickerDialog、TimePickerDialog

　　DatePickerDialog、TimePickerDialog是兩個對話方塊控制元件，一個彈出對話方塊用於選擇日期，一個彈出對話方塊用於選擇時間，都繼承自android.app.AlertDialog。

　　這兩個控制元件的開發過程，其主要就是開發其選擇後日期或時間後，相應的事件。

　　對於DatePickeDialog而言，通過建構函式可以設定彈出的日期控制元件的初始值，並且可以指定選中日期後，回撥事件的實現，建構函式的簽名如下：

　　　　DatePickerDialog(Context context, DatePickerDialog.OnDateSetListener callBack, int year, int monthOfYear, int dayOfMonth)

　　其中DatePickerDialog.OnDateSetListener為日期選中的響應事件，其他為日期彈出視窗初始化的日期，對於一個OnDateSetListener介面而言，需要實現其中的onDateSet()方法，在這個方法內，可以得到使用者選中的日期。

　　對於TimePickerDialog而言，同樣可以通過建構函式設定初始值，並且設定選中日期後，回撥事件的實現，建構函式的簽名如下：

　　　　TimePickerDialog(Context context, TimePickerDialog.OnTimeSetListener callBack, int hourOfDay, int minute, boolean is24HourView)

　　其中TimePickerDialog.OnTimeSetListener為時間選中的響應事件，其他為時間彈出視窗初始化的時間，對於一個OnTimeSetListener介面而言，需要實現其中的onTimeSet()方法，在這個方法內，可以得到使用者選中的時間。

AnalogClock、DigitalClock

　　AnalogClock、DigitalClock為兩個時間展示控制元件，切只是展示的風格不同而已，沒有什麼太大的區別。有一點值得注意的就是，這兩個控制元件展示的時間是無法修改的，僅為系統當前時間。看示例就能明白，沒什麼好詳細說的。

　　下面通過一個例子說明一下DatePickerDialog、TimePickerDialog、AnalogClock、DigitalClock四個控制元件的使用。

　　佈局程式碼：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content"
10         android:text="指標時鐘：" />
11 
12     <AnalogClock
13         android:layout_width="fill_parent"
14         android:layout_height="wrap_content" />
15 
16     <TextView
17         android:layout_width="fill_parent"
18         android:layout_height="wrap_content"
19         android:text="數字時鐘：" />
20 
21     <DigitalClock
22         android:layout_width="fill_parent"
23         android:layout_height="wrap_content"
24         android:textSize="20dp" />
25     <Button
26         android:id="@+id/btnTimePickerDialog"
27         android:layout_width="fill_parent"
28         android:layout_height="wrap_content"
29         android:text="Show TimePickerDialog"
30          />
31     <Button
32         android:id="@+id/btnDatePickerDialog"
33         android:layout_width="fill_parent"
34         android:layout_height="wrap_content"
35         android:text="Show DatePickerDialog"
36          />
37 </LinearLayout>

　　實現程式碼：

 1 package com.bgxt.datatimepickerdemo;
 2 
 3 import android.app.Activity;
 4 import android.app.DatePickerDialog;
 5 import android.app.DatePickerDialog.OnDateSetListener;
 6 import android.app.TimePickerDialog;
 7 import android.app.TimePickerDialog.OnTimeSetListener;
 8 import android.os.Bundle;
 9 import android.view.View;
10 import android.view.View.OnClickListener;
11 import android.widget.Button;
12 import android.widget.DatePicker;
13 import android.widget.TimePicker;
14 import android.widget.Toast;
15 
16 public class AnalogDigitalClock extends Activity implements OnClickListener {
17     private Button btnDate, btnTime;
18 
19     @Override
20     protected void onCreate(Bundle savedInstanceState) {
21         super.onCreate(savedInstanceState);
22         setContentView(R.layout.activity_anologdigital);
23         btnDate = (Button) findViewById(R.id.btnDatePickerDialog);
24         btnTime = (Button) findViewById(R.id.btnTimePickerDialog);
25         btnDate.setOnClickListener(this);
26         btnTime.setOnClickListener(this);
27     }
28 
29     @Override
30     public void onClick(View v) {
31         switch (v.getId()) {
32         case R.id.btnDatePickerDialog:
33             DatePickerDialog datePicker=new DatePickerDialog(AnalogDigitalClock.this, new OnDateSetListener() {
34                 
35                 @Override
36                 public void onDateSet(DatePicker view, int year, int monthOfYear,
37                         int dayOfMonth) {
38                     // TODO Auto-generated method stub
39                     Toast.makeText(AnalogDigitalClock.this, year+"year "+(monthOfYear+1)+"month "+dayOfMonth+"day", Toast.LENGTH_SHORT).show();
40                 }
41             }, 2013, 7, 20);
42             datePicker.show();
43             break;
44 
45         case R.id.btnTimePickerDialog:
46             TimePickerDialog time=new TimePickerDialog(AnalogDigitalClock.this, new OnTimeSetListener() {
47                 
48                 @Override
49                 public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
50                     // TODO Auto-generated method stub
51                     Toast.makeText(AnalogDigitalClock.this, hourOfDay+"hour "+minute+"minute", Toast.LENGTH_SHORT).show();
52                 }
53             }, 18, 25, true);
54             time.show();
55             break;
56         }
57 
58     }
59 }

　　效果展示：

　　原始碼下載

總結

　　以上就講解了在Android平臺下，幾個與時間相關的控制元件，沒有什麼特別的，注意設定與響應事件即可。

　　請支援原創，尊重原創，轉載請註明出處。謝謝。

Android--UI之DatePicker、TimePicker...

Android--UI之DatePicker、TimePicker...

Android 高階UI控制元件：DatePicker、TimePicker、Spinner

Android之DatePicker和TimePicker實現以及自定義大小

DatePicker、TimePicker的使用和改變字型樣式及picker大小

Android UI之RecyclerView——細節記錄

Android UI之底部彈框的學習與總結

Android UI之自定義頭部指示器

Android集合之SparseArray、ArrayMap詳解

Android GUI之Activity、Window、View

（Android UI）shape、selector以及layer-list

Android UI之五種基本佈局詳解

Android UI 之 RecyclerView實現常見首頁佈局

Android 佈局之邊框、分割線

DatePicker、TimePicker基本用法

UI之CoordinatorLayout、AppbarLayout、CollapsingToolbarLayout的使用

AndroidのUI之Spinner箭頭效果

Android UI 之選項卡

Android UI之switch的thumb與track屬性定製自己的switch

Android UI 之自定義RadarView——高仿微信雷達掃描

Android UI之ImageView旋轉的幾種方式

Android--UI之DatePicker、TimePicker...

相關推薦