iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
Mobile Development

Android開發系列 第 6

[Day6] Dialog的基本運用4

  • 分享至 

  • xImage
  •  

今天我們繼續示範Dialog的其他用法,今天會示範Dialog裡面的DatePickerDialog和TimePickerDialog,顧名思義,這兩個Dialog分別是選擇日期的Dialog和選擇時間的Dialog,那我們就開始示範吧!

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:text="選擇日期"
        android:textSize="25sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="選擇時間"
        android:textSize="25sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvDate" />

    <TextView
        android:id="@+id/tvDate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="選擇的日期"
        android:textSize="25sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnDate" />

    <TextView
        android:id="@+id/tvTime"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="選擇的時間"
        android:textSize="25sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnTime" />


</androidx.constraintlayout.widget.ConstraintLayout>

在layout頁面我給他兩個按鈕加兩個TextView,一個按鈕負責選擇日期,一個按鈕負責選擇時間,TextView負責顯示選擇到的日期和時間。

MainActivity

package com.example.day30_dilaog_3;

import androidx.appcompat.app.AppCompatActivity;

import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.TimePicker;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Button btnDate,btnTime;
    private TextView tvDate,tvTime;
    private EditText editDate,editTime;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        btnDate = findViewById(R.id.btnDate);
        btnTime = findViewById(R.id.btnTime);
        btnDate.setOnClickListener(this);
        btnTime.setOnClickListener(this);
        tvDate = findViewById(R.id.tvDate);
        tvTime = findViewById(R.id.tvTime);
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btnDate:
                dataPicker();
                break;
            case R.id.btnTime:
                timePicker();
                break;
        }
    }

    private void dataPicker() {
        Calendar calendar = Calendar.getInstance();
        int year = calendar.get(Calendar.YEAR);
        int month = calendar.get(Calendar.MONTH);
        int day = calendar.get(Calendar.DAY_OF_MONTH);
        new DatePickerDialog(MainActivity.this, new DatePickerDialog.OnDateSetListener() {
            @Override
            public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {
                String mDate = String.valueOf(year) + "-" + String.valueOf(month+1) + "-" + String.valueOf(dayOfMonth);
                tvDate.setText(mDate);
            }
        },year,month,day).show();
    }

    private void timePicker(){
        Calendar calendar = Calendar.getInstance();
        int hour = calendar.get(Calendar.HOUR_OF_DAY);
        int min = calendar.get(Calendar.MINUTE);
        new TimePickerDialog(MainActivity.this, new TimePickerDialog.OnTimeSetListener() {
            @Override
            public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                String mTime = String.valueOf(hourOfDay) + ":" + String.valueOf(minute);
                tvTime.setText(mTime);
            }
        },hour,min,true).show();
    }
}

我們先來看看選擇日期的程式碼:

 private void dataPicker() {
        Calendar calendar = Calendar.getInstance();
        int year = calendar.get(Calendar.YEAR);
        int month = calendar.get(Calendar.MONTH);
        int day = calendar.get(Calendar.DAY_OF_MONTH);
        new DatePickerDialog(MainActivity.this, new DatePickerDialog.OnDateSetListener() {
            @Override
            public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {
                String mDate = String.valueOf(year) + "-" + String.valueOf(month+1) + "-" + String.valueOf(dayOfMonth);
                tvDate.setText(mDate);
            }
        },year,month,day).show();
    }

Calender 會拿取到現在的日期,在程式碼裡面我們拿取到了年、月、日,當我們點選了選擇日期的按鈕,會彈出顯示當前日期的Dialog。

在onDateSet裡面我們有一個String.valueof(month+1),為甚麼要加一是因為它顯示出的月份會是我們選擇的月份減掉一個月,假如我們選擇8月31,最後會顯示7月31日,所以在這我們給他加1。

成功會顯示和下圖差不多的畫面:

接下來我們來看看TimePickerDialog的程式碼:

private void timePicker(){
        Calendar calendar = Calendar.getInstance();
        int hour = calendar.get(Calendar.HOUR_OF_DAY);
        int min = calendar.get(Calendar.MINUTE);
        new TimePickerDialog(MainActivity.this, new TimePickerDialog.OnTimeSetListener() {
            @Override
            public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                String mTime = String.valueOf(hourOfDay) + ":" + String.valueOf(minute);
                tvTime.setText(mTime);
            }
        },hour,min,true).show();
    }

在這裡我們藉由Calender來得到現在的時間,在code的後面hour,min,true,true是用來設定是否顯示24小時制,True代表要用24小時制,反之false則是選擇不要用24小時制,成功後應該會出現和下圖類似的畫面:

今天就介紹到這了謝謝大家
/images/emoticon/emoticon12.gif


上一篇
[Day5] Dialog的基本運用3
下一篇
[Day7]Dialog的基本用法5
系列文
Android開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言