[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 を追加

Screen Shot 2015-07-23 at 16.33.18

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

Screen_Shot_2015-07-23_at_16_33_30

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

動作確認

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

IMG_5630

何も表示されません!!

Screen Shot 2015-07-23 at 17.27.00

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

Screen Shot 2015-07-27 at 14.56.52

IMG_5634

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

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

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

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

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

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

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

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

38mmGuide

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

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

42mmGuide

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

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

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

iOS Simulator Screen Shot - Apple Watch Jul 27, 2015, 11.30.42

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

42mmIconImage

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

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

42mmIconImageGuided

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

Screen Shot 2015-07-27 at 12.30.18

iOS Simulator Screen Shot - Apple Watch Jul 27, 2015, 12.31.44

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

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

Screen Shot 2015-07-27 at 14.39.43

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

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

Screen Shot 2015-07-27 at 14.45.20

iOS Simulator Screen Shot - Apple Watch Jul 27, 2015, 12.36.54 iOS Simulator Screen Shot - Apple Watch Jul 27, 2015, 12.37.10 iOS Simulator Screen Shot - Apple Watch Jul 27, 2015, 12.37.20

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

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

まとめ

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

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