Swift転職なら=>【LevTech】
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大

頭痛が減ったので共有です!

rebuild.fmを応援しています!

HOME > WatchKitでタイマーアプリを作成する

WatchKitでタイマーアプリを作成する。

サンプル画像

簡単なアプリを作成しながらAppleWatchを学んでいきます。前回の記事で大まかな動きは理解できましたので、 つぎはAppleWatchとアプリとの連携をタイマー機能を利用して検証していきます


参考:Apple Watchでカウントダウンアプリを作る

やってみた(AppleWatch上でのタイマー処理)

ひとまず簡単なものを作成してみます。iPhone端末のメインアプリ側との連携をしないで、AppleWatch側だけでタイマー処理設定ー>実行するタイマーです

サンプル画像

StoryBoardに手動でラベル(WKInterfaceLabel)をドラッグして、WatchKit ExtensionのInterfaceController.swiftにIBOutletで関連付けます。(※プログラムから動的にaddSubView追加しようと しましたができませんでした、できないのかな?方法はまだ不明。)

タイマー処理を追加します。


import WatchKit
import Foundation

class InterfaceController: WKInterfaceController {
    
    @IBOutlet weak var timerLabel: WKInterfaceLabel!
    var higeCnt = 0;
    
    override func awakeWithContext(context: AnyObject?) {
        super.awakeWithContext(context)
        var timer = NSTimer.scheduledTimerWithTimeInterval(1.0, target: self, selector: Selector("onHigenobita"), userInfo: nil, repeats: true);
    }
    func onHigenobita(){
        //ここが実行されます
        timerLabel.setText("ひげが\(++higeCnt)本のびた");
    }

    override func willActivate() {
        // This method is called when watch view controller is about to be visible to user
        super.willActivate()
    }

    override func didDeactivate() {
        // This method is called when watch view controller is no longer visible
        super.didDeactivate()
    }
}

サンプル画像

特に問題なくAppleWatchでもひげが伸びるタイマーを作成できました!

カスタマイズ

どうせなので以下のアニメーションgif画像も一緒に表示できるかを検証してみます。

ヒゲサンプル画像

そもそもアニメーションGIFを表示できるのか


参考:WatchKit Framework Reference WKInterfaceImage Class Reference
参考:WatchKitでWKInterfaceImageを使ってアニメーション

このあたりを読むとWKInterfaceImageはアニメーションGIFをそのまま読み込むのは無理そうで、パラパラマンガ的に表示させるとのことです。ということで、 このサイトでgifを分割します。こんな便利なサイト知りませんでした、超オススメ! Gifをフレームに分割してくれるサイト=ezgif.com

サンプル画像サンプル画像

このサイトからgifのフレームをゲット!そのままだとXCodeでインポートできなかったのでJpegに変換

ヒゲサンプル画像

イメージアセットに追加します。

ヒゲサンプル画像

StoryBoardにWKInterfaceImageをドラッグして追加して同じようにIBOutletで関連づけます。(Ctrlドラッグ)

ヒゲサンプル画像

プロパティで、imageファイル名(連番)、Duration, Animateを調整します。プレビューの画像がはてなになるけどOKです。

そして、実行すると、、、、

サンプル画像

なんだかキモい

まとめ

最終的にキモいものが出来上がってしまいました。ごめんなさい。

前の記事はこちらからです!

次の記事はこちらからです!

↓こんな記事もありますよ!

アイコン一括作成サービス紹介

アプリのアイコンを作るのは手間で面倒くさい。と、思いながらPhotoshopで一つ一つサイズを変えて作っていたのですが、 簡単につくれるサービスやっぱりありました。Macのスクリプトだったり、Webサービスだったりと揃っていましたので共有します。

NSURLSessionでバックグラウンドで通信処理

NSURLConnectionの進化版のような立ち位置に私は感じております。アプリがバックグラウンドになっても通信処理を続けてくれる優れものです。 以前まではどうやら音声や位置情報だけに限られていましたが、このクラスによって大きなデータをユーザに気持ちよくDLしてもらうことも可能にです。

presentViewControllerで画面遷移下からビョーン

下からビョーンとUIViewControllerを出す方法を記載します。この処理も多用していたのですがこのHPになかったので追記しました。 Navigationと連動させた横へシャーと移動するスライドの関数(pop)とは違うので注意です。
このエントリーをはてなブックマークに追加
右側のFacebookのLikeをクリック頂けると記事更新の際に通知されますので宜しければご利用下さい!