この記事ではAndroidでTimePickerDialogを実装する方法について解説します。
TimePickerDialogはアラームアプリやスケジュール管理でユーザーが時間を選択できるようになる便利な機能です。
Kotlinのサンプルコード付きで説明しているので、是非参考にして実装してみてください。
TimePickerDialogとは
TimePickerDialogは名前の通り、ユーザーが時間を選択するために表示するダイアログのことです。
TimePickerDialogでは時と分を選択することができます。
アラームアプリやスケジュール管理アプリで時間を選択するときに使われているのをよく目にする機能です。
完成イメージ
画像のように、ボタンを押したときにTimePickerDialogを表示して、選択された時間をTextViewに表示するようにします。
今回は
- 時計型（24時間表記・AM/PM表記）
- ドラムロール型（24時間表記・AM/PM表記）
以上の2種類のTimePickerDialogの実装方法をそれぞれ紹介します。
実装
ここから実装方法を解説していきます。時計型とドラムロール型に分けてそれぞれ紹介します。
時計型
最初に時計型のTimePickerDialogを実装する方法について解説していきます。
activity_main.xml
MainActivityのレイアウトを作成します。以下のコードがactivity_main.xmlの全体のコードです。
今回は選択された時間を表示するためのTextViewとTimePickerDialogを呼び出すためのボタンを配置しています。
<?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">
<TextView
android:id="@+id/time_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:00"
android:textSize="64sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="24dp"/>
<Button
android:id="@+id/select_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/time_text"
android:layout_marginTop="24dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>DialogFragmentを追加
プロジェクトにTimePickerという名前のファイルを新たに作成します。
新たにファイルを追加する理由は、TimePickerDialogを使う際にはDialogFragmentの使用が推奨されているからです。
以下のコードがTimePickerの全体のコードになります。
import android.app.AlertDialog
import android.app.Dialog
import android.app.TimePickerDialog
import android.os.Bundle
import android.widget.TimePicker
import androidx.fragment.app.DialogFragment
import java.util.Calendar
class TimePicker : DialogFragment(), TimePickerDialog.OnTimeSetListener {
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val calendar = Calendar.getInstance()
val hour = calendar.get(Calendar.HOUR_OF_DAY)
val minute = calendar.get(Calendar.MINUTE)
return TimePickerDialog(requireContext(), activity as MainActivity, hour, minute,true)
}
override fun onTimeSet(view: TimePicker?, hourOfDay: Int, minute: Int) {
}
}TimePickerのコードをポイントに分けて解説していきます。
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val calendar = Calendar.getInstance()
val hour = calendar.get(Calendar.HOUR_OF_DAY)
val minute = calendar.get(Calendar.MINUTE)
return TimePickerDialog(requireContext(), activity as MainActivity, hour, minute,true)
}onCreateDialogはTimePickerが呼び出された時にダイアログ(今回はTimePickerDialog)を生成して返す処理を行っています。
TimePickerが呼び出された時、上のコードの2～4行目現在の時刻を取得してTimePickerDialogの第3引数と第4引数にセットして初期状態で表示するようになっています。
return TimePickerDialog(requireContext(), activity as MainActivity, hour, minute,true)TimePickerDialogの第1引数にはcontext、第2引数にはTimePickerDialogを表示したいActivity、第3引数に最初に表示する時、第4引数に最初に表示する分、第5引数に24時間表記にするかをbooleanで記述します。
24時間表記にしたい場合はTimePickerDialogの第5引数をtrue、AM/PM表記にしたい場合はfalseにしましょう。
override fun onTimeSet(view: TimePicker?, hourOfDay: Int, minute: Int) {
}onTimeSetでは時刻の選択後の処理を記述します。
今回はMainActivity内で記述するのでonTimeSet内は空のままです。
MainActivity
MainActivityではボタンが押された時にTimePickerDialogを呼び出す処理や選択された時間をTextViewに表示する処理を記述します。
以下のコードがMainActivityの全体のコードです。
import android.app.TimePickerDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import android.widget.TimePicker
class MainActivity : AppCompatActivity(), TimePickerDialog.OnTimeSetListener{
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val selectButton:Button = findViewById(R.id.select_button)
selectButton.setOnClickListener {
val timeFragment = TimePicker()
timeFragment.show(supportFragmentManager,"timePicker")
}
}
override fun onTimeSet(view: TimePicker?, hourOfDay: Int, minute: Int) {
val timeText:TextView = findViewById(R.id.time_text)
val selectedTime = String.format("%02d:%02d",hourOfDay,minute)
timeText.text = selectedTime
}
}MainActivityのコードもポイントに分けてそれぞれ解説していきます。
val selectButton:Button = findViewById(R.id.select_button)
selectButton.setOnClickListener {
val timeFragment = TimePicker()
timeFragment.show(supportFragmentManager,"timePicker")
}上のコードではButtonが押された時に、先ほど定義したDialogFragmentのTimePickerを呼び出す処理を記述しています。
override fun onTimeSet(view: TimePicker?, hourOfDay: Int, minute: Int) {
val timeText:TextView = findViewById(R.id.time_text)
val selectedTime = String.format("%02d:%02d",hourOfDay,minute)
timeText.text = selectedTime
}onTimeSetは先ほど定義したTimePickerでも紹介した通り、TimePickerDialogで時間を選択した後の処理を記述します。
ここではTextViewに取得した時・分をセットしています。
ドラムロール型
ここからはドラムロール型のTimePickerDialogを実装する方法について解説します。
activity_main.xmlとMainActivityのコードは時計型のTimePickerDialogのコードと共通しています。
時計型のTimePickerDialogのコードはこちらからご覧ください。
TimePicker
DialogFragmentのTimePickerのコードを変更します。
変更前
return TimePickerDialog(requireContext(), activity as MainActivity, hour, minute,true)変更後
return TimePickerDialog(requireContext(),AlertDialog.THEME_HOLO_LIGHT, activity as MainActivity, hour, minute,true)TimePickerDialogの第2引数にAlertDialog.THEME_HOLO_LIGHTを追加します。
AlertDialog.THEME_HOLO_LIGHTを追加してダイアログのStyleを変更することでドラムロール型のTimePickerDialogを作成することができます。
時計型のTimePickerDialogと同様に、24時間表記にしたい場合はTimePickerDialogの第6引数をtrue、AM/PM表記にしたい場合はfalseにしましょう。
TimePickerの全体のコードを確認したい方はこちらからご覧ください。
まとめ
今回はTimePickerDialogの実装方法を紹介しました。いかがだったでしょうか。
TimePickerDialogは特にアラームアプリを作る時には必須の機能なので、是非この記事を参考にして実装してみてください。
参考：
TimePickerDialog | Android Developers
アプリに選択ツールを追加する | Views | Android Developers
以下の記事ではDatePickerDialogの実装方法を解説しています。
DatePickerDialogは日付を選択するためのダイアログで、TimePickerDialogと一緒に使うことも多いと思います。是非こちらの記事も併せて読んでみてください。
コメント