AppleWatchのSDKであるWatchKitがついに公開されましたね!
という訳で今回はそのWatchKitを色々いじってみたいと思います。
ちなみにObjective-CではなくSwiftでやってます。
前準備
まずは、Xcode6.2-betaをインストールしましょう。
以下からダウンロードできます。
https://developer.apple.com/xcode/downloads/
AppleWatchシミュレータ起動まで
その後、File → New → Target → Watch Appを選択。
選択後、下記画像のようにWatch Appを選択する。
次に、iPhoneシミュレータを起動し、下記のApple Watchを選択。
Apple Watchのテストアプリを作ってみる
さて、それではここからApple Watchのアプリを作ってみましょう。
まだまだ分からないことがたっぷりなので、とりあえずサンプルコードが色々と落ちてる
テーブルを表示し、ラベルをタップすると画面遷移するアプリを作ってみます。
どんなことするの?
WatchKit Extensionの中にswiftファイルをいくつか作成し、storyboardをいじるだけです。
最終的なファイル構成は以下のようになります。
では、ひとつずつやっていきましょう!
InterfaceControllerをいじる!
まずは、InterfaceController.swiftとstoryboardをいじっていきましょう。
storyboardにはデフォルトでInterfaceControllerがあると思いますが、そこにTableとTableの中にLabelを追加します。
追加したら以下の様な構成になります。
次に、InterfaceController.swiftをいじります。
import WatchKit import Foundation class InterfaceController: WKInterfaceController { @IBOutlet weak var hogeTable: WKInterfaceTable! var test = ["Item1", "Item2", "Item3", "Item4", "Item5"] override init(context: AnyObject?) { // Initialize variables here. super.init(context: context) loadTableData() } // TableのLabelにテキストを流し込む private func loadTableData() { hogeTable.setNumberOfRows(test.count, withRowType: "StringTableRowController") for (index, val) in enumerate(test) { let row = hogeTable.rowControllerAtIndex(index) as StringTableRowController row.interfaceLabel.setText(val) } } // Tableをタップした時の画面遷移処理 override func table(table: WKInterfaceTable, didSelectRowAtIndex rowIndex: Int) { self.pushControllerWithName("DetailController", context: self.test[rowIndex]) } }
@IBOutletの部分はstoryboardからCtr+ドラッグ&ドロップで追加するのが吉っぽいです。
Tableのクラスを作る!
次に、Tableのクラスを作成します。
StringTableRowController.swift
import WatchKit class StringTableRowController: NSObject { @IBOutlet weak var interfaceLabel: WKInterfaceLabel! }
こちらもstoryboardから@IBOutletを追加しましょー。
で、このControllerを作成した後にstoryboardのTableをいじります。
Table Row ControllerとなっているところのCustom Classを変更します。
画面遷移先の画面を作る!
最後に画面遷移先の画面を作りましょう。
まずは、storyboardにDetailControllerを作成します。
追加の方法は以下の画面のInterfaceControllerをstoryboard上にドラッグ&ドロップするだけです。
DetailControllerが設置出来たら、中にLabelを一つ追加しましょう。
次に、DetailController.swiftを作成します。
import UIKit import WatchKit class DetailController: WKInterfaceController { @IBOutlet weak var selectData: WKInterfaceLabel! override init(context: AnyObject?) { // Initialize variables here. super.init(context: context) // contextに渡ってきた値をLabelにセット var detailStr = context as String! self.selectData.setText(detailStr) } }
作成後、storyboardに戻りDetailControllerのCustom Classをいじります。
また、今回はIdentiferの項目を変更します。
これをしておかないと、pushControllerWithNameが反応せず画面遷移してくれないので注意です。
さて!これで完成です!
あとは実行してみて正常に動くか確認してみましょう。
試しにItem1をタップしてみましょう。
こう表示されたらOKです!
後記
現在WatchKitの情報が少なく、参考になるコードが色々落ちててもここまで動かすのに苦労しました・・・
DetailControllerのIdentiferの変更に気付くのにだいぶ時間がかかりましたが、コードとstoryboardが密接な関係にあるんだなーと気付くことが出来ました。
また、何か出来ましたら記事書いていきます!