WatchKit: Let’s Add a Menu

“The Retina display with Force Touch found on Apple Watch provides a new way to interact with content. Instead of just tapping items on the screen, pressing the screen with a small amount of force activates the context menu (if any) associated with the current interface controller.” – WatchKit Programming Guide

The Apple Watch menu is beautiful and simple to make. It can have a maximum of 4 items, so they all fit on the small screen.

Setup Your Watch App

Follow the instructions in my Hello WatchKit post. Make sure your Watch app is up and running!

Add Menu Items in Storyboard

In the Interface.storyboard, drag the Menu into the relevant Interface Controller – since at this point we only have one, drag it to that one!

WatchKit Interface Menu

As you’ve probably noticed, you can’t actually visually see the menu! Increase the number of Menu Items to 3. Change the Title and choose the default Image for each Item to get started:

Menu Item Default WatchKit

Again, you can’t actually visually see anything in the Storyboard in this version of XCode. To view your Menu, run the app, and Force Touch by holding your click to activate the Menu:

Currently, taping on a Menu Item just brings you back to the app. There’s one more step!

Menu Actions

Connecting a Menu Item to an actual Action is as easy as creating an IBAction via Control + Drag from the Menu Item in the Storyboard to the InterfaceController:

Insert_Connection_and_Interface_storyboard_—_Edited

Notice that while you can make an Action for the Menu Item, you cannot make an IBOutlet!

Menu Item in Code

If your Menu Items are more dynamic, you can also add them in code:

InterfaceController_swift_—_Edited

A new Mute Icon is now added on my Watch App Menu!

Menu

You can view the sourcecode on Github here.

Enjoy the article? Join over 14,500+ Swift developers and enthusiasts who get my weekly updates.

  • Sasa

    I lost 15 minutes on this.
    For Force Touch I need to click and hold it for least 3 to 5 second.

    And I was just holding it for 1 to 2 second, and turing to figure it out why it is not working. Also be sure that simulator is in focus.

  • Developer from China

    Mine doesn’t even work, no matter what I run, it appears just a black screen

    • Developer from China

      I found it, you have to select watch kit when you want to run the app from Xcode.

  • Sandeep Kumar Gupta

    Can I show menu context programatically? If Yes , Please tell me how.

  • Hardik Vaghasia

    I have configured menu object thru storyboard but it is not popped up on Xcode 7.0 watch simulator when i long press on screen. are there any other settings needs to be done on Simulator?