カテゴリー: Android

[Kotlin]DatePickerDialogとTimePickerDialogを使って見た。

kotlin

1 はじめに
2 Anko Commons
3 DatePickerDialog
- 3.1 DatePickerFlagment
- 3.2 呼び出し方
4 TimePickerDialog
- 4.1 TimePickerFlagment
- 4.2 呼び出し方
5 さいごに
6 おすすめ書籍

はじめに

こんにちは鈴木です。引き続きAndroidとKotlinについて学習中です。
まだまだアプリを一つ作れる段階ではないですが、TimePickerDialogについて、備忘もかねてこちらでまとめさせていただきます。iOSアプリの開発している際にPickerView周りでコード量が増え可読性が悪いコードを書いてしまった悪い思い出があります。。。

Anko Commons

今回ダイアログ周りを使用するにあたりAnko Commonsを利用します。
AnkoはJetBrainsが開発しているライブラリ群です。可読性の高いコードをかきやすくなるなどのメリットもあります。今度詳しくまとめていきたいと思います。
Gradle Scriptsに下記コードを追加します。
build.gradle(Project: プロジェクト名)とbuild.gr
Gradle Scripts>build.gradle(Project: プロジェクト名)
ext.anko_version='0.10.8'

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext.kotlin_version = '1.2.71'
    //Anko
    ext.anko_version='0.10.8'
    repositories {
        google()
        jcenter()
    }
    dependencies {

        classpath 'com.android.tools.build:gradle:3.2.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
~省略〜

Gradle Scripts>build.gradle(Module: app)
implementation "org.jetbrains.anko:anko-commons:$anko_version"

~省略~
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    // Anko Commons
    implementation "org.jetbrains.anko:anko-commons:$anko_version"
}

上記の記述が完了したらSync Nowをタップします。

GradleのSyncが完了したら実際にアラートの内容を実装していきましょう。

DatePickerDialog

DatePickerDialogはその名の通り日付を選択するダイアログです。使用感はAlertDialogとほぼ同じ様に使えます。iOSのPickerみたいに表示する場所とかはあまり考えなくて使える様に思えます。それでは実際に使っていきましょう。
今回は、DatePickerDialogのSetListenerを実装したクラスを作成し、インターフェースで実装できる様に作成していきます。

DatePickerFlagment

DatePickerFlagmentでは決定をタップした際に選択されている値を渡すため、onSelected(year: Int, month: Int, day: Int)をインターフェースで実装します。

class DatePickerFlagment: DialogFragment(),DatePickerDialog.OnDateSetListener {

    interface OnDateSelectedListener{
        fun onSelected(year: Int, month: Int, day: Int)
    }
    //リスナ-作成
    private lateinit var listener: OnDateSelectedListener

    override fun onAttach(context: Context?) {
        super.onAttach(context)
        if (context is OnDateSelectedListener){
            listener = context
        }
    }

    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(context, this, year, month, day )
    }
    //onSelectedインターフェースを呼び出す。
    override fun onDateSet(view: DatePicker?, year: Int, month: Int, dayOfMonth: Int) {
        listener.onSelected(year, month, dayOfMonth)
    }
}

呼び出し方

今回インターフェースで実装したため、onSelectedのoverrideを行い選択時のコードを記述します。

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import java.util.*
//インターフェース実装
class MainActivity : AppCompatActivity(),DatePickerFlagment.OnDateSelectedListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val datePicker = DatePickerFlagment()
        datePicker.show(supportFragmentManager,"date_picker")
    }
//onSelectedをオーバーライドして選択した内容の受け取り
    override fun onSelected(year: Int, month: Int, day: Int) {
        print(year)
        print(month)
        print(day)
    }
}

TimePickerDialog

TimePickerDialogはその名の通り時刻を選択するダイアログです。
DatePickerとほぼ同様なのですが、ダイアログがiOSばかり使っていた自分からすると違和感が、、、

TimePickerFlagment


class TimePickerFragment: DialogFragment(),TimePickerDialog.OnTimeSetListener{
    interface OnTimeSelectedListener{
        fun onSelected(hour: Int, minute: Int)
    }
    private  lateinit var  listener: OnTimeSelectedListener

    override fun onAttach(context: Context?) {
        super.onAttach(context)
        if (context is OnTimeSelectedListener){
            listener = context
        }
    }

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val calendar = Calendar.getInstance()
        val hour = calendar.get(Calendar.YEAR)
        val minute = calendar.get(Calendar.MONTH)
        //第五引数のtrueは24時間表示にするかしないかです。
        return TimePickerDialog(context, this, hour, minute, true)
    }
    //onSelectedインターフェースを呼び出す。
    override fun onTimeSet(view: TimePicker?, hourOfDay: Int, minute: Int) {
        listener.onSelected(hourOfDay, minute)
    }
}

呼び出し方

今回はDatePickerとInterfaceを含めて同じ様に実装しているため、呼び出し方と使い方に大きな違いはありません。

import android.support.v7.app.AppCompatActivity
import android.os.Bundle


class MainActivity : AppCompatActivity(),TimePickerFragment.OnTimeSelectedListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val timePicker = TimePickerFragment()
        timePicker.show(supportFragmentManager, "time_picker")
    }

    override fun onSelected(hour: Int, minute: Int) {
        print(hour)
        print(minute)
    }
}