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

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 } ~省略〜

// 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" }

~省略~

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) } }

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) } }

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) } }

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) } }

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)

}

さいごに

最後までありがとうございます。
AndroidとAndroid Studioをもう少し使いこなせないとやりたい事がなかなかできません。
iOSで作ったアプリのコピーアプリをAndroidで作ってみるなどで本格的に着手する必要を感じております。

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28

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

はじめに

Anko Commons

DatePickerDialog

DatePickerFlagment

呼び出し方

TimePickerDialog

TimePickerFlagment

呼び出し方

さいごに

おすすめ書籍

フォロー

アプリ情報