スマートフォンでカップ麺タイマーをつくろう。まずは基本のタイマーから
以前、Webアプリでカップ麺タイマーをつくったのだが、やはりちょっと使い勝手がわるくAndroidのネイティブアプリで作った方が使いやすそうなので、今回挑戦して見る。最終的には出来上がりで音鳴らしたりバイブレーションを起動したりしたいが、ひとまず最も基本なカウントダウンするタイマーを実装してみる。
環境
開発PC環境
Windows 10
Android Studio 4.1.1
実行Android環境
機種：Xperia X Performance SOV33
Androidバージョン：7.0
Kotlinのコードとレイアウト
今回は参考文献のコードを参考に以下のようにKotlinのコードを書いた。タイマーの時間はゆくゆくは自由に設定できるようにしたいが、まずは固定の3分（180000ミリ秒）でタイマー機能を実装した。ボタンを押すとタイマーがカウントダウンし始めて、もう一度ボタンを押すと3分にリセットされる。ポーズ（一時停止）とリセットの両方を作ろうかと思ったけど、カップ麺タイマーは途中で止めることないよなぁと思って、ひとまずリセットだけにした。
| package com.example.cupnoodletimer | |
| import android.os.Bundle | |
| import android.os.CountDownTimer | |
| import android.widget.Button | |
| import android.widget.TextView | |
| import androidx.appcompat.app.AppCompatActivity | |
| class MainActivity : AppCompatActivity() { | |
| val TIMERTIME: Long = 180000; | |
| lateinit var timerText: TextView | |
| lateinit var timer: CountDownTimer | |
| var isRunning: Boolean = false; | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| setContentView(R.layout.activity_main) | |
| val startButton: Button = findViewById(R.id.buttonStart) | |
| startButton.setOnClickListener { | |
| if (isRunning) { | |
| timer.cancel() | |
| setTime(TIMERTIME) | |
| isRunning = false | |
| startButton.text = "START" | |
| } else { | |
| timer = object : CountDownTimer(TIMERTIME, 1000) { | |
| override fun onTick(millisUntilFinished: Long) { | |
| setTime(millisUntilFinished) | |
| } | |
| override fun onFinish() { | |
| setTime(0) | |
| isRunning = false | |
| startButton.text = "START" | |
| } | |
| } | |
| timer.start() | |
| isRunning = true | |
| startButton.text = "RESET" | |
| } | |
| } | |
| } | |
| private fun setTime(t: Long) { | |
| timerText = findViewById(R.id.textViewTime) | |
| var time: Long = t | |
| var minutes: Long = (time / 1000) / 60 | |
| var seconds: Long = (time / 1000) % 60 | |
| timerText.setText("%d:%02d".format(minutes, seconds)) | |
| } | |
| } |
こちらがレイアウトのxml。
| <?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/textViewTime" | |
| android:layout_width="wrap_content" | |
| android:layout_height="wrap_content" | |
| android:layout_marginTop="24dp" | |
| android:text="3:00" | |
| android:textSize="72sp" | |
| app:layout_constraintEnd_toEndOf="parent" | |
| app:layout_constraintStart_toStartOf="parent" | |
| app:layout_constraintTop_toTopOf="parent" /> | |
| <Button | |
| android:id="@+id/buttonStart" | |
| android:layout_width="wrap_content" | |
| android:layout_height="wrap_content" | |
| android:layout_marginTop="24dp" | |
| android:text="START" | |
| app:layout_constraintEnd_toEndOf="parent" | |
| app:layout_constraintHorizontal_bias="0.498" | |
| app:layout_constraintStart_toStartOf="parent" | |
| app:layout_constraintTop_toBottomOf="@+id/textViewTime" /> | |
| </androidx.constraintlayout.widget.ConstraintLayout> |
動かしてみた結果
こちらが実行中の画面。この画面でスタートを押すと動き始める。
以下がカウントダウン中の画面。ここでRESETを押すと、タイマーが停まって3分にリセットされる。
このままでも時間は測れるが、タイマーが0:00になったときに気づかないとカップ麺がのびのびになるので通知機能くらいは欲しい。次回は0:00になったらバイブレーションを鳴らして通知するように変更したい。
参考文献
今回は以下のサイトを参考にさせて頂きましたm(_ _)m
Working with Countdown Timer in Android Studio Using Kotlin
CountDownTimer | Android デベロッパー | Android Developers
Androidアプリをつくって遊ぼう日記まとめ
以下にAndoirdアプリで遊んでみた軌跡を残しています。興味があればのぞいてみてください。
