[Android] DatePickerDialogを使ってEditTextに年月日を入力する-Androidアプリ個人開発者の実践的アドバイス集

ユーザー登録フォームや何かしらの入力において、EditText内に年月日を入力させたいことがあります。
  
<code>DatePickerDialog</code>を使ってそれを実現する方法を紹介します。
  
## DatePickerDialogでカレンダーを表示し、ユーザーに選択させる
  
DatePickerDialogでカレンダーを表示するkotlinでのコード例を以下に示します。
  
```kotlin
// 初期値として今日現在の日付を設定
val calendar = Calendar.getInstance()
val year = calendar.get(Calendar.YEAR)
val month = calendar.get(Calendar.MONTH)
val day = calendar.get(Calendar.DAY_OF_MONTH)

selectedYear = year
selectedMonth = month
selectedDay = day

EditText.setOnClickListener {
	val datePickerDialog = DatePickerDialog(requireContext(), R.style.MySpinnerDatePickerStyle,
    	{_, year, month, dayOfMonth ->
        	selectedYear = year
            selectedMonth = month
            selectedDay = dayOfMonth
            val selectedDateString = "$selectedYear/${selectedMonth + 1}/$selectedDay"
            EditText.setText(selectedDateString)
        }, selectedYear, selectedMonth, selectedDay)
  
    datePickerDialog.datePicker.touchables[0].performClick()
    datePickerDialog.show()
}
```
<code>{_, year, month, dayOfMonth -> ... }</code>は、DatePickerDialogで日付が選択されたときに呼び出されるコールバック関数です。選択された年、月、日の情報が引数として渡されます。<code>_</code>は未使用の引数を表します。

コールバック関数内では、まず選択された年月日を保持するための変数 selectedYear、selectedMonth、selectedDay に値を設定します。（selectedMonthには0から始まるインデックスが使われているため、1を加算して正しい月を表します。）
  
次に、選択された年月日を文字列に整形します。斜線（"/"）区切りにし、例えば、"2023/1/11"のような形式にします。
  
そして、EditTextに、選択された日付の文字列を設定します。
  
その後の行の<code>}, selectedYear, selectedMonth, selectedDay)</code>は、DatePickerDialogの初期選択日付を設定しています。
  
最後に、<code>.show()</code>メソッドでdatePickerDialogを表示します。
  
<br>

ところで、定義したスタイルリソースである<code>R.style.MySpinnerDatePickerStyle</code>は、R.values.themes.xml内に以下のように定義しています。
  
```xml
<style name="MySpinnerDatePickerStyle" parent="Theme.AppCompat.Light.Dialog">
        
        <item name="colorAccent">@color/blue_default</item>
        
        <item name="android:textColorPrimary">@color/off_black</item>
        
        <item name="android:textColorSecondary">@color/off_black</item>
        
        <item name="android:spinnersShown">true</item>
        
        <item name="android:calendarTextColor">@color/black</item>
        
        <item name="colorOnPrimary">@color/blue_default</item>
</style>  
```

colors.xmlは以下のように定義しています。
  
```xml
<color name="black">#FF000000</color>
<color name="off_black">#212121</color>
<color name="blue_default">#2572E5</color>
```

上記の設定により、EditTextをクリックすると以下のようなカレンダーが表示されます。（正確には年の選択画面が出ますが、年を選択後、こちらの月日選択が表示されます。詳細は次の章をご参照ください。）

### 年の選択を最初に行えるようにする

先ほど、<code>datePickerDialog.datePicker.touchables[0].performClick()</code>について説明を省きました。
  
これは、DatePickerDialogで選択する年月日の順序を替えるために記述しています。通常、DatePickerDialogでは月日の選択から行えるようになっていますが、年の設定ができることがとてもわかりづらいです。ユーザーによっては、指定したい年を指定するために前月/翌月への移動を何度も繰り返してしまうかもしれません。
  
そこで、上記の記述をすると、以下の画像のようにまずは年から選択させることができます。これにより、ユーザビリティの向上が期待できる可能性があります。

## SharedPreferencesで入力された情報を記憶する

先ほどの章で年月日の入力はできるようになったわけですが、複数のアクティビティまたはフラグメントを持つアプリケーションだと仮定すると、このままだと戻るボタンを押した後、再びDatePickerDialogを使うアクティビティやフラグメントが生成された際に、DatePickerDialogの値は初期値に戻ってしまいます。
  
もしDatePickerDialogの初期選択日付が2023年1月1日だとして、ユーザーが1970年6月30日を指定したかったらどう感じるでしょう？一回なら設定しても良いでしょうが、それを何度も設定し直すのは間違いなくストレスです。
  
そこで、SharedPreferencesを用いて、EditTextの内容を保存しておけば、この問題を解決できます。先ほどのkotlinコードに追記修正した例を以下に示します。
  
```kotlin
EditText.text = Editable.Factory.getInstance().newEditable(sharedPreferences.getString(SharedPreferencesKey.EditTextDate.name, ""))

if (EditText.text.isNullOrEmpty()) {
	selectedYear = year
	selectedMonth = month
   	selectedDay = day
} else {
    val savedList: List<String> = EditText.text.split("/")
    selectedYear = savedList[0].toInt()
    selectedMonth = savedList[1].toInt() - 1
    selectedDay = savedList[2].toInt()
}
  
EditText.setOnClickListener {
	val datePickerDialog = DatePickerDialog(requireContext(), R.style.MySpinnerDatePickerStyle,
    	{_, year, month, dayOfMonth ->
        	selectedYear = year
            selectedMonth = month
            selectedDay = dayOfMonth
            val selectedDateString = "$selectedYear/${selectedMonth + 1}/$selectedDay"
            EditText.setText(selectedDateString)

// 値の保持
            val editor = sharedPreferences.edit()
            editor.putString(SharedPreferencesKey.EditTextDate.name, selectedDateString)
            editor.apply()

}, selectedYear, selectedMonth, selectedDay)
    datePickerDialog.datePicker.touchables[0].performClick()
    datePickerDialog.show()
}

```

まず、<code>EditText.text.isNullOrEmpty()</code>でEditTextの中身が空かどうかをチェックします。
  
次に、空でなければ<code>SharedPreferences</code>で保存されたEditTextの値が格納されています。EditTextはコード例に示すように斜線（"/"）区切りで格納されているので、この文字列をsplitしてListに格納し、DatePickerDialogの初期選択日付にします。
  
これによって、ユーザーが指定した前回の日付を保持できるようになりました。
  
SharedPreferencesの使い方については、以下の記事をご参照ください。
  
<iframe class="hatenablogcard" style="width:100%;height:175px;margin:15px 0;max-width:680px;" title="%title%" src="https://hatenablog-parts.com/embed?url=https://androidappsadvices.blogspot.com/2023/05/sharedpreferences.html" frameborder="0" scrolling="no"></iframe>

## 月日が一桁だった時に0を頭に付ける

先ほどまでのコード例だと、月日が一桁だった場合には頭に0は付きません。そのため、例えば<b>"2023/1/1"</b>という表示になります。
 
これを<b>"2023/01/01"</b>のように表示したい場合は、selectedDateStringに値を代入する行を以下のように書き換えてください。
  
```
val selectedDateString = String.format("%04d/%02d/%02d", selectedYear, selectedMonth + 1, selectedDay)
```
  
  
## 最後に
  
本記事では、以下の項目を紹介しました。最後までお読みいただきありがとうございました。
  
- DatePickerDialogの基本的な使い方
- DatePickerDialogの初期値の変更方法
- DatePickerDialogで年を最初に選択させる方法
- DatePickerDialog結果の保存方法
- 月、日のフォーマット制御

[Android] DatePickerDialogを使ってEditTextに年月日を入力する

0 件のコメント:

コメントを投稿

このブログを検索

ラベル

自己紹介

人気の投稿

不正行為を報告

リリースしたAndroidアプリ