[watchOS 3] 新たなナビゲーション「Vertical Paging」について

はじめに

こんにちは。モバイルアプリサービス部の平屋です。

本記事では watchOS 向けのアプリ作成をおさらいしつつ、watchOS 3 で追加された「Vertical Paging」を使用する方法を解説します。

watchOS 3 で追加されたナビゲーション「Vertical Paging」とは

watchOS 3 が動く Apple Watch‎ 上で「株価」アプリを見てみましょう。

Master 画面に銘柄の一覧が表示され、各銘柄をタップすると Detail 画面に遷移し、より詳しい情報を確認できます。

Detail 画面で垂直方向にスワイプ操作を行うと前後の銘柄の Detail 画面へ遷移できます。例えば、以下の図だと「Nikkei 225」の Detail 画面で上方向にスワイプすると「Google Inc.」の Detail 画面へ遷移できます。

これが「Vertical Paging」です。他の項目の Detail 画面へ移動したい時に、いちいち Master 画面に戻る必要がありません。

本記事で解説すること

本記事では「Mater-Detail」形式の watchOS 向けアプリを作成し、Vertical Paging を有効にする手順を解説していきます。

手順 [1]〜[6] は「Mater-Detail 形式の watchOS 向けアプリを作成する」手順の解説になります。既に何らかの Xcode プロジェクトがある場合は [1]〜[6] は読み飛ばしても問題ありません。

[1] プロジェクト作成

それでは、さっそく手順を説明していきます。

「iOS App with WatchKit App」テンプレートからプロジェクトを作成します。

今回はプロジェクト名を「WatchOS3VerticalPagingSample」にしました。

手順 [2] からは「<プロジェクト名> WatchKit App」および「<プロジェクト名> WatchKit Extension」グループ以下のファイルを編集していきます。

[2] Interface.storyboard

「<プロジェクト名> WatchKit App」内の Interface.storyboard を編集します。

Interface Controller Scene

Interface Controller Scene はプロジェクト作成時に自動生成されます。アプリのMaster 画面を定義する Scene になります。

この Scene に対して、以下の変更を行います。

• Table 配置
  • Table Row の中に Label 配置
  • Table Row にクラスを割り当てる
    • Class: RowController

Detail Interface Controller Scene

Detail 画面用の Interface Controller 新規追加し、以下の変更を行います。

• Image 配置
• Interface Controller にクラスを割り当てる
  • Class: DetailInterfaceController

Scene 間の設定

「Interface Controller Scene の Table Row」から「Detail Interface Controller」へセグエで繋ぎます。セグエの設定値は以下のようにしました。

• Kind: Push
• Identifier: Segue

[3] InterfaceController.swift

「<プロジェクト名> WatchKit Extension」グループ以下に自動生成される「InterfaceController.swift」を編集します。

このクラスは Master 画面を管理するコントローラーです。以下のように変更します。

import WatchKit
import Foundation

// Master 画面を管理するコントローラー
class InterfaceController: WKInterfaceController {
    // Storyboard からアウトレット接続
    @IBOutlet var table: WKInterfaceTable!

    // 表示データ
    let items = ["Auditorium",
                 "BART",
                 "Bridge",
                 "Store"]

    override func awake(withContext context: Any?) {
        super.awake(withContext: context)

        // Row の準備
        self.table.setNumberOfRows(self.items.count,
                                   withRowType: "RowController")
        for index in 0..<self.items.count {
            let rowController = self.table.rowController(at: index) as! RowController
            rowController.label.setText(self.items[index])
        }
    }

    // セグエ発火時の処理
    override func contextForSegue(withIdentifier segueIdentifier: String,
                                  in table: WKInterfaceTable,
                                  rowIndex: Int) -> Any? {
        return "\(rowIndex)"
    }
}

[4] RowController.swift

「<プロジェクト名> WatchKit Extension」グループ以下に「RowController.swift」を追加します。

RowController は InterfaceController の Table の Row の管理を担当するクラスです。以下のように実装します。

import WatchKit

// InterfaceController の Table の Row の管理を担当するクラス
class RowController: NSObject {
    // Storyboard からアウトレット接続
    @IBOutlet var label: WKInterfaceLabel!
}

[5] DetailInterfaceController.swift

「<プロジェクト名> WatchKit Extension」グループ以下に「DetailInterfaceController.swift」を追加します。

このクラスは Detail 画面を管理するコントローラーです。以下のように実装します。

import WatchKit
import Foundation

class DetailInterfaceController: WKInterfaceController {
    // Storyboard からアウトレット接続
    @IBOutlet var image: WKInterfaceImage!

    override func awake(withContext context: Any?) {
        super.awake(withContext: context)

        // WKInterfaceImage に画像を設定する処理
        if let index = context as? String {
            self.image.setImageNamed("image-\(index)")
        }
    }
}

[6] 画像素材を追加する

「<プロジェクト名> WatchKit App」内の Assets.xcassets に画像素材を追加します。

[7] Vertical Paging を有効にする

「Interface Controller Scene」上の Table を選択し、Attributes inspector で表示させます。そして、「Vertical Detail Paging」にチェックを入れます。これで Vertical Paging が有効になります。

動作結果

作成したアプリを実行すると、以下のような動きになります。

さいごに

本記事では watchOS 向けのアプリ作成をおさらいしつつ、watchOS 3 で追加された「Vertical Paging」を使用する方法を解説しました。この機能の登場により、ショートカット的な画面遷移を簡単に実現できるようになりました!

watchOS 3 向けのアプリを作成中の方の参考になれば幸いです。

参考資料

• WKInterfaceTable - WatchKit | Apple Developer Documentation
• Quick Interaction Techniques for watchOS - WWDC 2016 - Videos - Apple Developer