【今更ダヨ！】APILevel24におけるカレンダーじゃないDatePickerDialogの作り方

やっほー
今をときめく最新技術、色々便利で楽しそう！
だが今回は今更APILevel24におけるDatePickerDialogの作り方のお話だ！
所謂古のお話ってやつだ。

#DatePickerDialogって知ってるか？
DatePickerDialog、こいつぁ日付を選択したりするときに用いる。
ビャっとダイアログが出てきてイカしたカレンダーが出てきて？さっと日付を選択するかっちょいい奴だ。

…だがこいつには弱点が有る。
`年` の選択がめちゃくちゃ苦手なのだ。
実は `年` の部分をタップすると、直接 `年` の選択ができるようになってるのだが、誰も気づかなかったようだ。

MaterialDatePickerでデザインが変わってその辺りの弱点も解消されつつ有る。とは思うけれども。

あぁ、ちなみにコレがMateriDatePickerでのDatepickerだね。やっつけ仕事でつけた赤い枠に注目してほしい。ちゃんと `年` の選択ができるっぽい見た目に変わってる。

知ってた？昔のカレンダー表示なDatepickerってね、年の部分選択できるんだぜ？

|MaterialDatePicker|DatePicker|
|:-:|:-:|
|![Screenshot_1608473422.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82799/2984257d-3a89-f836-0dd0-680029fd1676.png)|![Screenshot_1608473882.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82799/3b6848a6-17c4-0d34-9b62-1160e4a03e1d.png)|



#えー、昔のやつもmode=spinnerでイケるんじゃね？
フフフ…そいつはどうかな？
はい、ここタイトル回収です。

こういった `年` の選択が難しいって問題は、カレンダー表示であることに問題が有るわけで、スピナー形式だったら何も問題ないわけだ。

で、真っ先に考えるのが、DatepickerのThemeをいじって `mode=spinner` を設定する方法だよね？
こんな感じで設定した人は多いんじゃないかな？

```xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.DatePickerDialogSample" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- デフォルトのカラー設定とか色々省略するぞっと！ -->
        <!-- Customize your theme here. -->
        <item name="android:datePickerDialogTheme">@style/MyDialogTheme</item>
    </style>

    <style name="MyDialogTheme" parent="Theme.AppCompat.Light.Dialog" >
        <item name="android:datePickerStyle">@style/MyDatePickerStyle</item>
        <item name="materialButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Dialog</item>
        <item name="colorPrimary">@color/purple_500</item>
    </style>

    <style name="MyDatePickerStyle" parent="android:Widget.Material.DatePicker" >
        <item name="android:datePickerMode">spinner</item>
        <item name="android:calendarViewShown">false</item>
    </style>
</resources>

```

実際それはうまくいくんだ。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82799/7aab3f2e-1c0c-b1ee-46b1-c455f5b21e90.png" width="420px"/>

そう、一部のAPILevelを除いてね…

# APILevel24だけうまく動作しない！？

そう、APILevel24だけうまく動作しない。バージョンで言うと7.0だったかな？
同じ設定でDatePickerDialogを表示すると、このようになる。
…苦い記憶が蘇るねぇ。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82799/c7217959-3bb4-940c-d559-f8c0b842ecb0.png" width="420px" />

# じゃあ、どうするんだよぅ
コレは `DatePickerDialog` だから発生するバグのようだ。
実際、ViewとしてDatePickerを使うと、こういった問題は発生しない。

```xml
<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">

    <!-- セットしてるstyleはさっき定義したやつとおんなじだよ！ -->
    <DatePicker
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/MyDatePickerStyle"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

わぁ、スピナーがちゃんと反映される。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82799/827ca0a2-e105-cc8d-03f6-15f388f68fa8.png" width="420px" />


…と、言うことは？Dialogに何かしらのCustomViewを埋め込んでしまえば問題無くスピナー形式のDatePickerが表示できるのでは？

フフフその通り、ViewをinflateしてAlertDialogに埋め込んでしまえば良い！

では早速、APILevel24のワークアラウンドを差し込んだダイアログを作ってみよう。

# 兎にも角にもSpinner形式のDialogの中身を作ろう

再掲するよん、まずはDialogの中身としてコレを使う。
あ、そうそう、 `dialog_v24_work_around.xml` として新しくLayoutファイルを切り出したよ。違いは初期値設定のためにpickerにIDを振ったところくらいかな…？

```dialog_v24_work_around.xml
<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">

    <!-- セットしてるstyleはさっき定義したやつとおんなじだよ！ -->
    <DatePicker
        android:id="@+id/picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/MyDatePickerStyle"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

# 次に、Dialogに指定してやるThemeを作ろう
コレも再掲、冒頭で定義したThemeと全く同じ
…最近はダークモードとかそのへんの事情が有るし、もうちょいいい感じに分離して定義したほうが良いかもねぇ？


```themes.xml
<style name="MyDialogTheme" parent="Theme.AppCompat.Light.Dialog" >
    <item name="android:datePickerStyle">@style/MyDatePickerStyle</item>
    <item name="materialButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Dialog</item>
    <item name="colorPrimary">@color/purple_500</item>
</style>

<style name="MyDatePickerStyle" parent="android:Widget.Material.DatePicker" >
    <item name="android:datePickerMode">spinner</item>
    <item name="android:calendarViewShown">false</item>
</style>
```

# 最後にDialgFragmentを作ろう

ソースコードを、ドーン！
Fragmentのボイラープレートは削除してるから、呼び出す側で値を渡したかったりとかするときは適宜ボイラープレートを適用するように！ViewBindingもDataBindingも使っていないので、これまたそういうのを利用したいときは適宜コードを書き換えて適用すると良いでしょうなあ。

```DatePickerDialogFragment.kt
class DatePickerDialogFragment : DialogFragment() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return if(Build.VERSION.SDK_INT == Build.VERSION_CODES.N) {
            createV24WorkAround()
        } else {
            DatePickerDialog(
                requireActivity(),
                DatePickerDialog.OnDateSetListener { _, _, _, _ ->
                    Toast.makeText(activity, "DateSelected", Toast.LENGTH_SHORT).show()
                }, // listener とかは適宜設定
                2020,
                12,
                20)
        }
    }

    private fun createV24WorkAround(): Dialog {
        val view = LayoutInflater.from(requireActivity()).inflate(R.layout.dialog_v24_work_around, null, false)
        view.findViewById<DatePicker>(R.id.picker).apply {
            init(2020, 12, 20, null)
        }
        // PositiveButtonのリスナー辺りでinflateしたviewから日付を取り出してなんやかんやすると良いと思う
        return AlertDialog
            .Builder(requireActivity(), R.style.MyDialogTheme)
            .setView(view)
            .setPositiveButton(android.R.string.ok) { _, _ ->
                Toast.makeText(activity, "V24WorkAround", Toast.LENGTH_SHORT).show()
            }
            .setNegativeButton(android.R.string.cancel, null)
            .create()
    }
}
```

# 色々設定したな？Dialogさんを呼び出してみよう
```MainActivity.kt
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // ここね！
        DatePickerDialogFragment().show(supportFragmentManager, null)
    }
}
```

# 呼び出した姿がこちらッ!

わーい :tada: 

|v24|それ以外|
|:-:|:-:|
|![Screenshot_1608480118.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82799/991a9153-daf5-5590-989b-b777bab81f60.png)|![Screenshot_1608480120.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82799/5b5d82d2-f677-a0c9-0fc2-a60ff85ec057.png)|

…以上！

ああ、そうそう、ダイアログ自身の幅が気に入らないッ！ってなった時は、DialogのThemeに

- `android:windowMinWidthMajor`
- `android:windowMinWithMinor`

この2つをいじってみると良いかもねぇ