博報堂アイ・スタジオの技術チームが運営するブログです。

Apple Watchの開発が出来るようになったので「Watchkit」でアナログ時計を作ってみた

apple-watch-fi

はじめに

WatchKitについて、WatchKit Programming GuideWatchKit Human Interface Guidelinesを見て、シンプルに作れるなという印象と、あまり色々やれなそうだなっていうのが感想でした。

ただその中で、アニメーションはあるけどパラパラ漫画だし、Appleが公式で作ってるようなアナログ時計ってどうやって表示したら良いの、という疑問が合ったので、色々試した結果できました。

実装(Objective-c)

既に動かすところまでの記事が投稿されてたりするので、下記の参考にプロジェクトを作って下さい。動いた所から記述します。

1分でつくれるAppleWatch対応アプリ & WatchKit 全API解説

WatchKit Catalog(サンプルコード)を起動する方法 

 

では実装です。

Interface.storyboardでMainのInterfaceにImageを貼り付けます、スクショを貼り付けられないので申し訳ないのですが、Interface.storyboardを開いて、Mainの矢印が書いてあるInterface ControllerにImageを貼り付けて下さい。

貼り付けたImageを選択した状態で、attribute inspectorを開いて下さい、Sizeという項目があるのでWidthもHeightもSize to Fit Contentから、Relative to Containerにして下さい。

そして貼り付けたImageをInterfaceController.mで参照できるようにOutletを設定して下さい。

ここまででStoryboardの設定はおしまいです。

続きまして、一秒毎に表示を更新するため、NSTimerを実装します。

これで後は描画だけです、tickメソッドが1秒毎に呼ばれるので、そこで描画します。

これで完成です!

実行するとアナログ時計が表示されます。

スクリーンショットが無いと寂しすぎますが、CoreGraphicsでUIImage作ってImageにset出来るなら、表示面ではなんとかなるかなと思います。

追伸:さすがに寂しいので、現行XCodeで、同じコード実装してスクショ取りました。下記のような時計が表示されて、一秒ごとに針が動きます。

スクリーンショット 2014-11-21 19.43.52

 

更に追伸:まだ実機デバックができたわけではないので、もしかしたら大丈夫かもしれませんが、 今回のように画像を動的に作る場合、時針、分針、秒針は別々のImageに描画したり、頻繁に動く秒針はキャッシュしておかないと電池消費が激しくなったりするかもです。画像のキャッシュに関しては下記の記事に書きましたので、よろしかったらどうぞ。

WatchKitでTwitterの画像を一覧表示してみた【AppleWatch】

●この記事を書いた人