WatchKitで画面遷移する

はじめに

WatchKitで画面遷移を作成する方法を説明します。

対象

iOSアプリを少しでも作成したことのある人
言語はSwiftを使用しますが、objective-Cでもやり方に大きな違いはありません

つくるもの

・2枚の画面からなる画面遷移
・ボタンを押して、新しい画面に遷移する
・遷移後、戻るボタンにより元の画面に戻る

・遷移方法がmodal, pushの2種類あるのでそれぞれを試します
iOSアプリを開発したことがある方はご存知の通り、modal遷移は詳細表示のための一時的な画面遷移、push遷移は階層構造を持った画面を行き来するための画面遷移です。

作成手順

1. iPhoneアプリを作成する

File -> new -> ProjectからiOSアプリを作成します。
TemplateはiOS -> Application -> Single View Applicationとします。

Product NameはWatchKitTransitionとします。
言語はSwiftを選択します。Core Dataは使用しません。

2. iPhoneアプリと連携するWatchKitアプリを作成する

File -> New -> TargetからApple Watch Targetを追加します。
TemplateはiOS -> Apple Watch -> WatchKit Appとします。
言語はSwiftです。
Include Notification Sceneにチェックが入った状態で、Finishします。
SchemeはActiveさせましょう。

3. 遷移のトリガーとなるボタンを配置する

interface.storyboard上でInterfaceController上にボタンを2つ配置します。
1つにはmodal遷移を、もう1つにはpush遷移を設定していきます。

ボタンを配置したら、ソースコード上へ参照を引っ張りましょう。
storyboardファイルとInterfaceControllerファイルを同時に開き、ctrl + ドラッグでSent Actionsからの参照を張ります。これで、ボタンを押した時の処理を記述できるようになりました。modal遷移用のボタンに対してはpresentButtonTapped、push遷移用のボタンに対してはpushButtonTappedという名前をつけます。

4. 遷移先画面を作成する

遷移した先の画面を作成しましょう。
modal遷移、push遷移それぞれで遷移先の画面を作成するので、
interface.storyboard上に新しいInterface Controllerを2つ配置します。
modal遷移用のInterface Controllerに対してはIdentifierを”PresentNewView”として設定します。
push遷移用のInterface Controllerに対してはIdentifierを”PushNewView”として設定します。

5. 画面遷移を作成する

InterfaceControllerのソースコードを編集していきます

presentButtonTappedメソッドを以下のように編集します

@IBAction func presentButtonTapped() {
    presentControllerWithName("PresentNewView", context: nil)
}

pushButtonTappedメソッドを以下のように編集します

@IBAction func pushButtonTapped() {
    pushControllerWithName("PushNewView", context: nil)
}

これで完成です。

起動

Xcodeシミュレータで実際に動かしてみましょう。

TargetをWatchKitTransition WatchKit Appに変更します。
ちなみにCommand + control + [でTargetの切り替えが出来ます。
同様にCommand + Rで起動しましょう。

iPhoneのシミュレータとApple Watchのシミュレータが同時に起動します。
もしApple Watchのシミュレータが起動しなければ、
メニューのHardware -> External Displays -> Apple Watchを選択するとシミュレータ画面が追加されます。

デモ

ボタンを押すことで画面遷移します。
遷移先の画面には自動で戻るボタンが設置されているため、自由に行き来できます。

ソースコード

こちらからどうぞ
https://github.com/takanori-matsumoto-mulodo/WatchKitTransition