15. 【Android/Kotlin】TimePickerDialog

はじめに
TimePickerDialogとは
TimePickerDialog追加
1. Activityを作成
2. レイアウトのxmlを作成
アプリ起動
終わりに

はじめに

DreamHanksのMOONです。

前回は「DatePickerDialog」について説明をしました。

14. 【Android/Kotlin】DatePickerDialog

今回は「TimePickerDialog」について説明していきます。

TimePickerDialogとは

「TimePickerDialog」は「DatePickerDialog」と同じダイアログの一種で、時計形式のダイアログです。

下のダイアログの形式です。

TimePickerDialog追加

Activityを作成

TimePickerDialogActivity.kt

package com.example.practiceapplication

import android.app.DatePickerDialog
import android.app.TimePickerDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.*
import java.text.SimpleDateFormat
import java.util.*

class TimePickerDialogActivity : AppCompatActivity() {

    lateinit var text_et: EditText

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_timepickerdialog)

        text_et = findViewById<EditText>(R.id.text_et)              //EditText（入力エリア）

        //EditTextのクリックイベントを設定
        text_et.setOnClickListener {
            showTimePickerDialog()
        }

    }

    /* 時間ダーダイアログを開くためのメソッド */
    fun showTimePickerDialog() {
        val calendar: Calendar = Calendar.getInstance()

        val cal = Calendar.getInstance()
        val timeSetListener = TimePickerDialog.OnTimeSetListener { timePicker, hour, minute ->
            cal.set(Calendar.HOUR_OF_DAY, hour)
            cal.set(Calendar.MINUTE, minute)
            //EditTextに選択された時間を設定
            text_et.setText(SimpleDateFormat("HH:mm").format(cal.time))
        }

        //タイムピッカーダイアログを生成および設定
        TimePickerDialog(this, timeSetListener, cal.get(Calendar.HOUR_OF_DAY), cal.get(Calendar.MINUTE), true).show()
    }

}

package com.example.practiceapplication

import android.app.DatePickerDialog

import android.app.TimePickerDialog

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.widget.*

import java.text.SimpleDateFormat

import java.util.*

class TimePickerDialogActivity : AppCompatActivity() {

lateinit var text_et: EditText

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_timepickerdialog)

text_et = findViewById<EditText>(R.id.text_et) //EditText（入力エリア）

//EditTextのクリックイベントを設定

text_et.setOnClickListener {

showTimePickerDialog()

}

/* 時間ダーダイアログを開くためのメソッド */

fun showTimePickerDialog() {

val calendar: Calendar = Calendar.getInstance()

val cal = Calendar.getInstance()

val timeSetListener = TimePickerDialog.OnTimeSetListener { timePicker, hour, minute ->

cal.set(Calendar.HOUR_OF_DAY, hour)

cal.set(Calendar.MINUTE, minute)

//EditTextに選択された時間を設定

text_et.setText(SimpleDateFormat("HH:mm").format(cal.time))

}

//タイムピッカーダイアログを生成および設定

TimePickerDialog(this, timeSetListener, cal.get(Calendar.HOUR_OF_DAY), cal.get(Calendar.MINUTE), true).show()

}

①TimePickerDialogの生成するためのメソッドを追加

②現在の時間を「Calendar」で取得

③TimePickerDialogを生成し、現在の時間とクリックイベントを設定

④最後にEditTextのクリックイベントにそのメソッドを配置

レイアウトのxmlを作成

activity_timePickerDialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".TimePickerDialogActivity"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/main_tv"
        android:textSize="20dp"
        android:text="TimePickerDialog" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text_et"
        android:inputType="text"
        android:hint="クリックしてください。"/>

</LinearLayout>