WatchKitのMenu


WatchKitでもメニューというものがあるようなので、いじったメモです。

![Context Menus](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/WatchKitProgrammingGuide/Art/context_menu_overview.png)

# メニュー追加方法
WatchKitのメニューはForce Touch（LongTapのイメージで同じ場所をタップし続ける）というジェスチャーで起動します。全ての画面でそれぞれのメニューを設定でき、メニューを持つ画面とそうでない画面を区別させることができます。
逆に、共通メニューを作りたい場合は自分でクラス構成を工夫してくれ、ということなのでしょう。

Menuの構造はMenuという土台の上にMenuItemを設定することで１〜４のMenuItemを表示することができます。後述しますが、５つ以上のMenuItemを設定しても無視されます。（[WatchKit Programming Guide](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/WatchKitProgrammingGuide/Menus.html)にも「４つまで」とありました）
なお、MenuItemの配置は追加した順にWatchKitが勝手に配置するため、開発する側は位置の指定はできないようです。

以下はMenu,MenuItemの設定方法です。
## StoryBoardで追加
StoryBoardではメニューを追加したいSceneに土台となるMenuをドラッグし、Menu配下にMenuItemをドラッグします。
![スクリーンショット 2014-11-26 9.01.18.png](https://qiita-image-store.s3.amazonaws.com/0/60457/198be58a-5502-c1b2-1315-c6330a6005c5.png "スクリーンショット 2014-11-26 9.01.18.png")


MenuはForceTapされるまで非表示になるためか、MenuやMenuItemをドラッグしてもUIとして表示はないようです。
そのため、MenuItemを増やす場合は、MenuのAttributes inspectorで個数を指定するか、階層の中にあるMenu配下へドラッグします。
![スクリーンショット 2014-11-26 9.01.07.png](https://qiita-image-store.s3.amazonaws.com/0/60457/90d864f9-32c2-a69f-ce35-cab0052ad836.png "スクリーンショット 2014-11-26 9.01.07.png")

MenuのAttributes inspectorで設定できる値はMenuItemの数だけです。これを増やすとMenuItemが階層内に増えてくれます。
※Attributes inspectorで数字を設定するとなぜか４を超える値を設定でき、MenuItemsも増えていきますが、５つ目から後は実行時は無視されますので４までにしておくと良いと思います。
![スクリーンショット 2014-11-26 9.08.22.png](https://qiita-image-store.s3.amazonaws.com/0/60457/804a18e1-b911-2fdf-d3d9-5021cab7a874.png "スクリーンショット 2014-11-26 9.08.22.png")

MenuItemのAttributes inspectorで設定できる値は画面上に表示されるTitle、アイコンイメージ、カスタムイメージの場合のファイル名の３つです。
標準のアイコンはiOSアプリのToolButton同様にいくつか用意されているようです。
標準アイコンのイメージは[AppleのAPIドキュメント](https://developer.apple.com/library/prerelease/ios/documentation/WatchKit/Reference/WKInterfaceController_class/index.html#//apple_ref/c/tdef/WKMenuItemIcon)にあります。

![スクリーンショット 2014-11-26 9.08.31.png](https://qiita-image-store.s3.amazonaws.com/0/60457/888dd83f-3f99-713c-bfa2-1ea8efe2764c.png "スクリーンショット 2014-11-26 9.08.31.png")

![スクリーンショット 2014-11-26 9.08.40.png](https://qiita-image-store.s3.amazonaws.com/0/60457/c8432dcf-4743-a49e-ff8a-8cf123cde0e1.png "スクリーンショット 2014-11-26 9.08.40.png")

それぞれのMenuItemをタップされた時のアクションはConnection inspectorでButtonなどと同様にoutletを使って設定します。
![スクリーンショット 2014-11-26 9.19.03.png](https://qiita-image-store.s3.amazonaws.com/0/60457/62ab7211-2fa2-9ad0-c5e3-b9517df2566b.png "スクリーンショット 2014-11-26 9.19.03.png")

## コーディングで追加
コーディングで追加する場合は、以下の３つのどれかを使って設定します。通常であれば場所はinitでしょう。
**なお、コーディングだけを使ってMenuItemを追加する場合はStoryboardにMenuがなくても勝手に追加されます。**

```methods
addMenuItemWithItemIcon:title:action:   //標準アイコンにする場合
addMenuItemWithImageNamed:title:action: //xcassetsにある画像ファイル名を指定する場合
addMenuItemWithImage:title:action:      //UIImageインスタンスを設定する場合
```

こんな感じになります。

```init
    override init(context: AnyObject?) {

        super.init(context: context)
        
        addMenuItemWithImageNamed("bug", title: "add init", action: Selector("doMenu4"))
        
        NSLog("%@ init", self)
    }
```

また、MenuItemをクリアする方法として`clearAllMenuItems`が用意されているようです。
が！APIによると、addMenuItemWithImage:title:action:かaddMenuItemWithImageNamed:title:action:で追加したメニューを消すけど、Storyboardで追加したMenuは消せない、とのことです。

# アイコン設定
アイコンは前述のとおり、標準のものが用意されていますがカスタムアイコンで「？」な所があったのでこちらもメモしておきます。

## 標準アイコン
標準アイコンはStoryBoardかコーディングで指定すれば万事OKです。

## カスタムアイコン
まず、Apple Watchには38mmと42mmという２つのサイズがあります。[Appleさん曰く](https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/MenuImages.html#//apple_ref/doc/uid/TP40014992-CH18-SW1)、「MenuItemのアイコンをカスタムする場合は38mmなら70x70,42mmなら80x80のサイズで作ってね。あと、メニューのボーダー（丸いグレーのやつ）とアイコン画像の間にちゃんとスペース必要だから、自作アイコンのマークは38mmは46x46、42mmは54x54でよろしく」
ということなんですが、Xcode6.2betaの時点で38mmと42mmの使い分けをどうやるのかわかりせんでした。これはxcassetsを使いこなせていない自分のせいなのか、これからなのかは不明です。。。

ということで、今回は80x80でとりあえず押し通してみました。

80x80のアイコンを用意して、xcassetsに追加します。DevicesはUniversalで2xにセットしました。DevicesをSpecificにするとApple Watchは2xしかないのでこれにしています。
そのほか、駄目モトで白黒ではないものも用意しました。

xcassetsはWatchKit ExtensionとWatch Appの２つに存在しますが、Watch Appのほうに設定しないと認識できないようです。

![スクリーンショット 2014-11-26 10.17.46.png](https://qiita-image-store.s3.amazonaws.com/0/60457/06844140-c09b-1fe6-6797-9a47b20de893.png "スクリーンショット 2014-11-26 10.17.46.png")

![スクリーンショット 2014-11-26 10.17.58.png](https://qiita-image-store.s3.amazonaws.com/0/60457/9de47ffe-c276-40c8-a9b3-e8c7210fc315.png "スクリーンショット 2014-11-26 10.17.58.png")

Stosyboardで設定します。４つ目はコーディングで実装の所に書いたinitで追加するようにしました。

![スクリーンショット 2014-11-26 10.23.17.png](https://qiita-image-store.s3.amazonaws.com/0/60457/185547ca-f9d9-3433-6bb9-25a90a74c519.png "スクリーンショット 2014-11-26 10.23.17.png")

![スクリーンショット 2014-11-26 10.23.27.png](https://qiita-image-store.s3.amazonaws.com/0/60457/ec0a1ac6-3f2e-38a6-4ee6-839539130de2.png "スクリーンショット 2014-11-26 10.23.27.png")

![スクリーンショット 2014-11-26 10.23.35.png](https://qiita-image-store.s3.amazonaws.com/0/60457/262e373b-9b12-a0ea-5859-33513fab7c67.png "スクリーンショット 2014-11-26 10.23.35.png")

こうなりました。

![Untitled.gif](https://qiita-image-store.s3.amazonaws.com/0/60457/d0bb4c2c-ad15-adc9-e893-eb2d57077425.gif "Untitled.gif")

白黒のPNGではないlionは真っ黒になってしまいました。ガイドラインでは透過PNGも避けるようにとの記述があるので、注意ですね。

あと、Menu表示時にForce Touchを行うとMenuをキャンセルする動作になるようです。ユーザに分かるかどうかはアレですが、「何もせずにメニューを閉じる」というボタンは不要にしてもよさそうです。