エンジニアブログ担当の近藤です。
前回の「HelloWorld編」に引き続き、今回はAppleWatchの画面を作ってみましょう。
いくつかのUI部品の簡単な使い方を紹介していこうと思います。
プロジェクト作成
前回の記事を参考にXcode 6.2 betaでプロジェクトを作成してください。
→Watch KitでApple Watchアプリを作ってみる（Hello World編）
Apple Watchアプリで使えるUI
interface.storyboardを開くとApple Watchアプリの画面を編集する画面が開きます。
画面右側のObject LibraryからUIをドラッグ&ドロップで配置していくのは前回紹介しましたが、使えるUIは下記のようにたくさん用意されています。
UIのオブジェクトはWKInterfaceObjectというクラスで管理されています。
UIKitで言うところのUIViewクラスのようなものです。
それぞれが下記のようにWKInterfaceObjectのサブクラスで構成されています。
またWatchKitのUIオブジェクトはUIKitのUIオブジェクトと同じようにIBActionでメソッドとひも付けたり、IBOutletで変数にひも付けをする事ができます。
各クラスのメソッドやプロパティ等の詳細はリファレンスを参照してください。
| UI | クラス名 |
|---|---|
| Table（テーブル） | WKInterfaceTable |
| Image（画像） | WKInterfaceImage |
| Separater（区切り線） | WKInterfaceSeparator |
| Button（ボタン） | WKInterfaceButton |
| Switch（スイッチ） | WKInterfaceSlider |
| Slider（スライダー） | WKInterfaceSlider |
| Label（ラベル） | WKInterfaceLabel |
| Date（日時表示ラベル） | WKInterfaceDate |
| Timer（タイマー表示ラベル） | WKInterfaceTimer |
| Map（地図） | WKInterfaceMap |
画面遷移をやってみる
画面を複数作成して画面遷移をやってみましょう。
Watch Kitでの画面遷移はUIKitと同じようにPushとModalによる遷移です。
Object Libraryの一番上の「Interface Controller」がApple Watchのひとつの画面になります。
UIKitでのViewControllerと思えば良いでしょう。
storyboardにドラッグ＆ドロップで配置しましょう。
ボタンを配置してボタンをタップしたら次の画面へ遷移するようにします。
１個目の画面（Main→ が付いてる方）にボタンを配置して、「次の画面へ」など好きなようにボタンの文字を変えましょう。
UIKitでアプリを作っていたときと同じように「Control」ボタンを押しながら次の画面へドラッグします。
すると、画面遷移方法を「push」か「modal」を選ぶ事ができます。
今回は「push」を選びましょう。
これで「次の画面へ」ボタンを押したときに画面遷移します。
早速実行してみましょう
【１個目の画面】
ボタンをタップすると次の画面へ遷移します。
【２個目の画面】
２個目の画面ではUIKitのUINavigationControllerのように画面左上に戻るボタンが配置されており、これをたっぷすることで１個目の画面に戻る事ができます。
いろいろUIKitに似ている部分がありますね。
各画面にメニューをつけてみる
ここまではUIKitでも見かけるよくある機能でしたが、つぎはApple Watch独自のUIを触ってみましょう。
InterfaceControllerには↓の画像のような「メニュー」をつける事ができます。
メニューは各画面毎に最大４つのボタン(Menu Item)を設置する事ができ、AppleWatchのシミュレータの画面を長押しすると表示されます。
Menu ItemからIBActionでメソッドを呼び出して何らかの操作をする事ができます。
メニューのドキュメントはこちら
では、画面にメニューを配置してみましょう。
画像のように、まずObject Libraryから「Menu」をInterfaceControllerに配置します。
これでメニューをその画面で利用する事ができるようになります。
次にメニューを複数配置するためには「Menu Item」ドラッグ＆ドロップして「Menu」の中に追加します。
４つ配置してみましょう。
先ほど配置したMenu Itemを選択し、ボタンのタイプを選択できます。
画像のようにたくさん用意されています。好きなものを選んで、どんな種類のボタンがあるのか試してみてください。
４つともボタンのタイプを選択したら実行してみましょう。
Apple Watchのシミュレータが起動したら画面を長押ししてみましょう。
メニュー画面が開いてメニューのボタンが表示されます。
IBActionを設定していないのでメニューのボタンを押しても何も起きませんが、このメニューのボタンを使っていろんなアプリの操作ができるようになります。
今回はWatchKitのごく一部の機能使ってをApple Watchの画面の実装してみました。
基本的な画面の作り方はUIKitの時とだいたい同じような感覚で作り込んでいく事ができる様です。
WatchKitをどんどん調べていく事で、Apple Watchがどんな製品なのか見えてくるかもしれないですね。
ティムクックがApple Watchは4月に発売する名言したと言われていますが、日本での発売が今から楽しみですね。