生涯未熟

プログラミングをちょこちょこと。

WatchKitを色々弄ってみた

AppleWatchのSDKであるWatchKitがついに公開されましたね!

という訳で今回はそのWatchKitを色々いじってみたいと思います。

ちなみにObjective-CではなくSwiftでやってます。



前準備

まずは、Xcode6.2-betaをインストールしましょう。
以下からダウンロードできます。
https://developer.apple.com/xcode/downloads/

AppleWatchシミュレータ起動まで

Xcodeを立ち上げ、iPhoneアプリを作成。

f:id:syossan:20141124004237p:plain

f:id:syossan:20141124004325p:plain

その後、File → New → Target → Watch Appを選択。

選択後、下記画像のようにWatch Appを選択する。

f:id:syossan:20141124004755p:plain

次に、iPhoneシミュレータを起動し、下記のApple Watchを選択。

f:id:syossan:20141124004906p:plain

Xcodeに戻り、Apple WatchをRunすれば一先ずはApple Watchのシミュレータの起動まで完了。

Apple Watchのテストアプリを作ってみる

さて、それではここからApple Watchのアプリを作ってみましょう。
まだまだ分からないことがたっぷりなので、とりあえずサンプルコードが色々と落ちてる
テーブルを表示し、ラベルをタップすると画面遷移するアプリを作ってみます。

どんなことするの?

WatchKit Extensionの中にswiftファイルをいくつか作成し、storyboardをいじるだけです。
最終的なファイル構成は以下のようになります。

f:id:syossan:20141124011901p:plain


では、ひとつずつやっていきましょう!

InterfaceControllerをいじる!

まずは、InterfaceController.swiftとstoryboardをいじっていきましょう。

storyboardにはデフォルトでInterfaceControllerがあると思いますが、そこにTableとTableの中にLabelを追加します。

f:id:syossan:20141124012548p:plain

f:id:syossan:20141124012553p:plain

追加したら以下の様な構成になります。

f:id:syossan:20141124012726p:plain


次に、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を変更します。

f:id:syossan:20141124020515p:plain

画面遷移先の画面を作る!

最後に画面遷移先の画面を作りましょう。

まずは、storyboardにDetailControllerを作成します。
追加の方法は以下の画面のInterfaceControllerをstoryboard上にドラッグ&ドロップするだけです。

f:id:syossan:20141124020835p:plain

DetailControllerが設置出来たら、中にLabelを一つ追加しましょう。

f:id:syossan:20141124021224p:plain


次に、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をいじります。

f:id:syossan:20141124021340p:plain

また、今回はIdentiferの項目を変更します。
これをしておかないと、pushControllerWithNameが反応せず画面遷移してくれないので注意です。

f:id:syossan:20141124021423p:plain


さて!これで完成です!
あとは実行してみて正常に動くか確認してみましょう。

f:id:syossan:20141124021635p:plain

試しにItem1をタップしてみましょう。

f:id:syossan:20141124021707p:plain


こう表示されたらOKです!

後記

現在WatchKitの情報が少なく、参考になるコードが色々落ちててもここまで動かすのに苦労しました・・・
DetailControllerのIdentiferの変更に気付くのにだいぶ時間がかかりましたが、コードとstoryboardが密接な関係にあるんだなーと気付くことが出来ました。

また、何か出来ましたら記事書いていきます!

神参考URL


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


Xcode - Apple Watchのアプリを開発してみた - Qiita


WatchKit: Let’s Create a Table