この記事ではAndroidでDatePickerDialogを実装する方法について解説します。
Kotlinのサンプルコード付きで説明しています。是非参考にして実装してみてください。
DatePickerDialogとは
DatePickerDialogとは名前の通り日付を選択するために表示するダイアログのことです。
DatePickerDialogでは年、月、日を選択することができます。
カレンダーアプリで日付を指定するときなど、特にスケジュール管理系のアプリでよく使われているのを目にする機能です。
完成イメージ
上の画像のように、ボタンを押したときにDatePickerDialogを表示して、選択された日付をTextViewに表示するようにします。
今回は
- カレンダー型
- ドラムロール型
以上の2種類のDatePickerDialogの実装方法をそれぞれ紹介します。
実装
ここからDatePickerDialogの実装方法を説明します。
カレンダー型とドラムロール型に分けてそれぞれ解説していきます。
カレンダー型
activity_main.xml
MainActivityのレイアウトを作成します。以下のコードがactivity_main.xml全体のコードです。
今回は、日付を表示するためのTextViewとDatePickerDialogを呼び出すためのボタンを配置したシンプルなレイアウトになっています。
<?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/date_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2024/3/9"
android:textSize="48sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="32dp"/>
<Button
android:id="@+id/date_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="日付を選択"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/date_text"
android:layout_marginTop="32dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>DialogFragmentを追加
プロジェクトにDatePickという名前のファイルを新規作成します。
新たにファイルを作成する理由は、DialogFragmentを使用するからです。
DatePickerDialogを作成するときにはDialogFragmentを作成する必要があります。
以下のコードがDatePickに記述するコード全体です。
import android.app.AlertDialog
import android.app.DatePickerDialog
import android.app.Dialog
import android.icu.util.Calendar
import android.os.Bundle
import android.widget.DatePicker
import androidx.fragment.app.DialogFragment
class DatePick: DialogFragment(), DatePickerDialog.OnDateSetListener{
override fun onCreateDialog(savedInstanceState: Bundle?):Dialog {
val calendar = Calendar.getInstance()
val year = calendar.get(Calendar.YEAR)
val month = calendar.get(Calendar.MONTH)
val day = calendar.get(Calendar.DAY_OF_MONTH)
return DatePickerDialog(requireContext(),activity as MainActivity, year, month, day)
}
override fun onDateSet(view: DatePicker?,year: Int, month: Int, day: Int) {
}
}DatePick内のコードをいくつかに分けて詳しく解説します。
override fun onCreateDialog(savedInstanceState: Bundle?):Dialog {
val calendar = Calendar.getInstance()
val year = calendar.get(Calendar.YEAR)
val month = calendar.get(Calendar.MONTH)
val day = calendar.get(Calendar.DAY_OF_MONTH)
return DatePickerDialog(requireContext(),activity as MainActivity, year, month, day)
}onCreateDialogはDatePickが呼び出された時にダイアログ（今回はDatePickerDialog）を生成して返します。
デフォルトの状態ではCalendar.getInstance()で今日の日付を取得して表示するように指定します。
override fun onDateSet(view: DatePicker?,year: Int, month: Int, day: Int) {
}onDateSetでは日付の選択が完了したときの処理を記述します。
onDateSetは後ほどMainActivityで記述するので、DatePick内にあるonDateSetの中身は空のままで大丈夫です。
MainActivity
MainActivityではボタンを押したときの動きやTextViewに日付を表示するためのコードを記述していきます。
以下のコードがMainActivityのコード全体です。
import android.app.DatePickerDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.DatePicker
import android.widget.TextView
class MainActivity : AppCompatActivity(), DatePickerDialog.OnDateSetListener {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val dateButton:Button = findViewById(R.id.date_button)
dateButton.setOnClickListener {
val dateFragment = DatePick()
dateFragment.show(supportFragmentManager,"datePicker")
}
}
override fun onDateSet(view: DatePicker?, year: Int, month: Int, dayOfMonth: Int) {
val dateText:TextView =findViewById(R.id.date_text)
val selectedDate = "$year/${month.plus(1)}/$dayOfMonth"
dateText.text = selectedDate
}
}MainActivityのソースコードについてもポイントごとに分けて解説していきます。
dateButton.setOnClickListener {
val dateFragment = DatePick()
dateFragment.show(supportFragmentManager,"datePicker")
}このコードではボタンを押したときの動きを定義しています。
ボタンが押された時にdateFragment.showでDatePickが呼び出されるようになっています。
override fun onDateSet(view: DatePicker?, year: Int, month: Int, dayOfMonth: Int) {
val dateText:TextView =findViewById(R.id.date_text)
val selectedDate = "$year/${month.plus(1)}/$dayOfMonth"
dateText.text = selectedDate
}onDateSetはDatePickで日付の選択が完了したときの処理を記述します。
ここでは選択された年、月、日を取得してStringに変換後、TextViewに表示する処理が行われます。
ドラムロール型
次にドラムロール型のDatePickerDialogを表示する方法を紹介します。
カレンダー型のDatePickerDialogを表示するコードとほとんど変わらないので、上で紹介したコードを参考にしながら読んでください。
activity_main.xml
カレンダー型のDatePickerDialogのactivity_main.xmlと同じです。
確認したい方はこちらからご覧ください。
DatePick(DialogFragment)
先ほど解説したDatePickの一部を変更します。
変更前
return DatePickerDialog(requireContext(),activity as MainActivity, year, month, day)変更後
return DatePickerDialog(requireContext(),AlertDialog.THEME_HOLO_LIGHT,activity as MainActivity, year, month, day)上のコードのようにDatePickerDialogの第2引数にAlertDialog.THEME_HOLO_LIGHTを追加しましょう。
AlertDialog.THEME_HOLO_LIGHTでAlertDialogのスタイルが変更されてドラムロール型のDatePickerDialogが表示されるようになります。
このコードを追加するだけでドラムロール型のDatePickerDialogを作成することができます。
DatePickのコード全体を確認したい方はこちらからお読みください。
MainActivity
MainActivityもカレンダー型のDatePickerDialogのコードと同じです。
MainActivityのコード全体を確認したい方はこちらからご覧ください。
まとめ
今回はAndroidでDatePickerDialogを実装する方法を紹介しました。いかがだったでしょうか。
DatePickerDialogはアプリ開発で使う機会も多い機能です。是非この記事を参考にして実装してみてください。
参考：
DatePickerDialog | Android Developers
DialogFragment | Android Developers
DatePickerDialog.OnDateSetListener | Android Developers
アプリに選択ツールを追加する | Views | Android Developers
以下の記事ではToastの表示方法について解説しています。
DatePickerDialogで日付を選択した後にToastを表示するなど、今回紹介したことと組み合わせて実装してみるといいかもしれません。
是非こちらの記事も併せて読んでみてください。
コメント