今回はUIコンポーネントの中でも謎な部分が多いWKInterfaceTimerを弄ってみたいと思います。
WKInterfaceTimerって何者？
WKInterfaceTimerはその名の通りカウントダウンやカウントアップのタイマーのLabelを表示することが出来ます。
ストップウォッチを作る時や、ゲームの残り時間を表示する時に使えそうですね。
どうやって実装するの？
肝心の実装部分ですが、色々とややこしいところが多いです。
ややこしい躓きポイントについては適宜説明を入れていきます。
基本的には以下の流れで作ります。
カウントダウンの場合
- ControllerにTimerを設置
- カウントダウンの残り時間を決める
- Timerの表示をスタートさせる
カウントアップの場合
- ControllerにTimerを設置
- Timerの表示をスタートさせる
- 必要があればストップさせる
ラーメンタイマーを作ってみる
それではよくありがちなタイマーを使ったシステムであるラーメンタイマーを作ってみたいと思います！
仕様としては、
- 単純に３分間を測れる
のみです。
３分間経ったことを伝えられるようにしようと思ったのですが、
残り時間が０になった時にどうやってイベントを発生させるのかが分からず（あるのかどうかが微妙・・・）断念しております。
まずは先ほど書いた手順の通りに作っていきます！
ControllerにTimerを設置
これは簡単ですね。
以下のTimerをデフォルトで存在するInterfaceControllerにドラッグ＆ドロップで貼り付けてください。
次に、設置したTimerをCtr + ドラッグ＆ドロップでInterfaceController.swiftに登録します。
名前はcountDownTimerで登録しましょう！
注意点としてTImerの設定を見ると以下の様な感じになっています。
Formatは時間の表記の設定です。
主に以下の様になっています。
| Positional | Abbreviated | Short | Full | Spelled Out | |
|---|---|---|---|---|---|
| 表記 | ◯◯:◯◯ | ◯◯m ◯◯s | ◯◯mins, ◯◯secs | ◯◯minutes, ◯◯seconds（画面から見切れる | Full + 数値が文字化される |
| 1分以下の表記 | 01（！？） | ◯◯s | ◯◯secs | ◯◯seconds | Full + 数値が文字化される |
Positionalが見た目としては良さ気ですが、１分を切った時の挙動がおかしいのでここはAbbreviatedにしておきましょう。
Unitsはどこまで時間を表示させるかの設定ですが、ここにチェックが一つもついていない場合何も表示されませんので注意して下さい。
Preview Secsはその名の通り、StoryBoard上で表示されるプレビューな値の設定です。
あと、横幅が小さくて見えない可能性もありますので、sizeのwidthをRelative to Containerとしておきましょう。
ついでにカウントダウン開始のためのSTARTボタンを設置しときましょう。
設置の部分に関しては割愛で。
また、タップした時のアクションを付けたいので、以下の箇所からInterfaceControllerへドラッグ＆ドロップで貼り付けてください。
アクションの名称はtapStartButtonにしましょう。
カウントダウンの残り時間を決める
次に、カウントダウンの際の残り時間を決めるための作業になります。
まず仕様としてWKInterfaceTimerに設定出来る値はNSDateである必要があります。
そしてカウントダウンの残り時間は現在日時からWKInterfaceTimerに設定されたNSDateの日時の差分で決まります。
また、WKInterfaceTimerに時間を設定するにはsetDateを用います。
これを踏まえた上で、次のように残り時間を設定します。
Timerの表示をスタートさせる
最後に、STARTボタンがタップされた時の挙動を実装しましょう。
WKInterfaceTimerはsetDateされた瞬間にカウントダウンする、という仕様です。
なので、事前にsetDateしておいてstart()でカウントダウンを開始するという使い方は出来ませんので注意して下さい。
では、start()は何者かという話ですがstart()はWKInterfaceTimerの表示をenableにするという意味合いで使われております。
逆にsotp()は表示をdisableにするという意味ですので、stop()しても裏側ではしっかりTimerが動いております。
これで動く状態にまで出来ました。
以下ソース。
カウントアップについて
ここまで理解された方ならカウントアップの実装は簡単です。
やることは先程のカウントダウンの作成手順からsetDateの部分を除いてやってみてください。
そうするとカウンタが時間とともにアップしていくはずです。
まとめ
今見た限りだとWKInterfaceTimerが一番仕様的にややこしく情報が少なかったのでまとめてみました。
何かのお役に立てば幸いです！
