[iOS][watchOS] 画面をグッと押し込む Force Touch で表示されるメニューを実現する方法

概要

今回は、Apple Watch において Force Touch でメニューを表示し、項目選択から各種アクションを起こすまでの流れを追います。

※ Force Touch は、グッと画面を押し込む操作で、最近発売された MacBook のトラックパッドにも搭載されています。しかしながら、まだ Force Touch 操作が可能なデバイスが限られているため、馴染みの無い方が多くいらっしゃるのではないでしょうか。私自身も当初 "Deep Touch" や "Strong Tap" 等と勘違いしていました。

準備

Xcode の 新規プロジェクト作成後、File > New > Target から、WatchKit App を追加し、Interface.storyboard を表示します。

Interface Controller に Menu を追加

Object Library を開き、Menu を Interface Controller に ドラッグアンドドロップします。

Menu と Menu Item が追加されているのを確認できます。

動作確認

この状態で、Apple Watch の動作を確認してみましょう。起動後、Apple Watch の画面をグッと押しでみます。

何も表示されません！！

Menu Item のプロパティ Image を見てみると、Custom が指定されており、その下を見ると No Image と表示されています。ここで何らかの 画像を指定する必要があります。

Menu Item に、Accept を指定すると、メニューボタンが表示されました。

他に、あらかじめ以下のイメージが用意されています

プリセットメニュー画像名	画像	プリセットメニュー画像名	画像
Accept		Pause
Add		Play
Block		Repeat
Decline		Resume
Info		Share
Maybe		Shuffle
More		Speaker
Mute		Trash

メニューアイコンの画像規格

上記のプリセット画像を使う以外にも、自作のアイコンイメージを使う事ができます。

ただし、メニューアイコン画像の規格は決まっています。

背景は透過、フォーマットはPNG。@2x画像として作成します。

タブバーアイコン同様に、カラーは適用されません。不透明部分は一律黒になります。

38mm の Apple Watch の場合、このようになります。

• 画像全体の大きさは、縦横104ピクセル
• アイコンの絵柄は縦横70ピクセル内に収めること
• アイコン描画領域の目安は、縦横46ピクセルの範囲内

42mm の Apple Watch の場合、上の図のようになります。

• 画像全体の大きさは、縦横120ピクセル
• アイコンの絵柄は縦横80ピクセル内に収めること
• アイコン描画領域の目安は、縦横54ピクセルの範囲内

独自アイコンを使ってみる

上記の規格に従い、42mm の Apple Watch 用にアイコンを作成し、表示してみました。

これが、作成した画像です。

縦横120ピクセル、キャラクターの大きさは縦横54ピクセルに収まるサイズです。

実際に Apple Watch 上のメニューアイコンを測定してみると、アイコン全体の大きさが直径120ピクセル、内部の作成したキャラクターは、作成時と同じ大きさ（縦横54ピクセルに収まるサイズ）でした。

Object Library から Menu Item を Menu に追加することで、メニュー項目を４つまで追加できます。

メニューをタップした時のハンドリング

Menu Item を ctrl を押しながらクリックし、そのまま Interface Controller.m などにドラッグ＆ドロップ。IBAction で接続しましょう。

あとはメニューをタップした時の動きを指定すればOK。

今回は、ラベル表示内容を変更する処理を加えました。

ボタンをタップすると、ラベルの表示内容が変わります。

まとめ

Force Touch という今までにない操作方法を使ったUIを、このように簡単に実現することができます。

是非活用していきましょう。