Chapter 7. Adding Menus to Your App

Apple introduced a new, easy-to-use API to create context menus on the WatchKit platform. This simple API doesn't require you to include any delegate callbacks within your code, and these menu items can be easily created using Interface Builder; all you have to do is connect them to each of the Action methods, similar to what you would do with buttons or other Interface Builder objects.

The Apple Watch retina display includes a new touch-based technology known as Force Touch, which is nothing more than a long press gesture on iOS devices or 3D Touch on newer devices and is detected when the user applies slightly more pressure than performing a tap gesture. Whenever Apple Watch detects that a Force Touch gesture has been applied, the WatchKit app that is running displays the context menu, if one is configured.

In this chapter, we will begin by providing an overview of context menus before working through an application that builds upon our Shopping List...

Introduction to gestures and the menu interface

Before we can begin creating a menu for our Shopping List application, we need to get an understanding of how WatchKit context menus work within the WatchKit framework and how you can go about creating them.

Understanding WatchKit context menu gestures

Under the iOS platform, you will be familiar with a gesture called long press, which you can define in your code using the UILongPressGestureRecognizer gesture, whereas under the WatchKit platform, the only gesture that is available to you is the Force Touch gesture.

So, what happens when a user initiates a Force Touch gesture? The Apple Watch hardware determines the difference between a hard force touch to bring up a menu and a tap to handle when a tap happens. All of the user swipe gestures to navigate forward and backward through your view controllers and scrolling through views within the WatchKit layout are automatically handled for you, and there is no need to add any additional code or gesture...

Design considerations for WatchKit context menu icons

When designing your WatchKit context menu icons, they must contain actions that users can perform, and each action must contain a label and icon. Text labels associated with the menu can contain up to two lines of text, and menu icons are template images, which use the image's alpha value to define their shape.

The following table explains the different menu icon sizes for each of the associated asset image types:

Asset image types	Apple Watch (38 mm)	Apple Watch (42 mm)
The notification center icon	48 pixels	55 pixels
The long-look notification icon	80 pixels	88 pixels
The home screen icon	80 pixels	80 pixels
The short look icon	172 pixels	196 pixels

The following screenshot highlights the required design considerations that you must adhere to when creating your customized menu icons. You need to consider using line weights that are appropriate for your device size, and the complexity of the icon by setting the line thickness...

Adding a menu to our Shopping List application – WatchKit

In this section, you will learn how to add a menu to our existing Shopping List application from the previous chapter. Perform the following steps:

1. Select the ShoppingList.xcodeproj file from the Chapter 06 folder in the accompanying code bundle, as shown in the following screenshot:

   

2. Next, ensure that the ShoppingList Xcode project file is open within the Xcode development IDE.

3. Now, select the Interface.storyboard file located within the ShoppingList WatchKit Extension group in the project navigation window.

4. Then, from Object Library, drag a WKInterfaceMenu control to the watch area canvas.

   

5. Next, select the Menu (WKInterfaceMenu) control that we added previously.

6. Then, from the Attributes Inspector section in the Menu section, change the Items property to 4.

   

7. Now, select the first Menu Item (WKInterfaceMenuItem) object under Menu on the left-hand side and modify the Title property to Clear List and the Image property to Trash.

   

8. Repeat the same...

Establishing the WatchKit context menu connections

There are two ways in which we can go about creating WatchKit context menu items. In the previous section, we discussed how we can drag and drop a WKInterfaceMenu control in InterfaceController within the storyboard that will contain the menu.

You can also create them programmatically using the WKInterfaceController method and provide an image, a title, and the associated action method that will get executed when the menu item is tapped by the user. Simply perform the following steps:

1. Open the InterfaceController.swift file located within the ShoppingList WatchKit Extension group from the project navigation window.

2. Next, locate the awakeWithContext method and enter the following highlighted code snippet:

   override func awakeWithContext(context: AnyObject?) {
      super.awakeWithContext(context)
           
      // Perform any final initialization of your application.
      if WCSession.isSupported() {
         let session = WCSession.defaultSession()
      ...

Design considerations when using Taptic Engine

According to Apple, Taptic Engine is an electromagnetic linear actuator, which is basically a small electronic motor that controls a magnetic field to produce haptic feedback.

Haptic feedback is basically a series of small taps that notifies you in response to different actions. An example of this would be if you were iterating through items within an array and wanted to be notified once you scrolled to the end of the list, you could send a .Click haptic for the table instance within the WatchKit extension.

Whenever you design your apps to include support for playing haptics using Apple Watch Taptic Engine, there is no ability to play more than one haptic at the same time, and there is a delay between each one that can be played.

Note

For more information on Apple Watch Design Guidelines, refer to the Apple Developer documentation at https://developer.apple.com/watch/human-interface-guidelines/watch-technologies/.

In the next section, we will look...

Summary

In this chapter, you learned about WatchKit context menus and how you can go about adding them to an existing Apple Watch application. You also learned about the differences between the WKInterfaceMenu and WKInterfaceMenuItem classes and how you can go about adding WatchKit menu items through code and respond to those actions when pressed.

You learned about Taptic Engine, which is integrated in Apple Watch, and how to go about integrating haptic feedback as well as understanding all about the Force Touch technology of Apple Watch. We also discussed how this technology is sophisticated enough to determine the difference between a tap or more forceful long press on the device screen to display the context menu associated with the current scene.

Each of the scenes within a WatchKit app can have a single context menu, each of which can present up to four menu items available for selection by the user and consist of a menu item that contains an image and title.

In the next chapter, you will...

The rest of the chapter is locked

Adding a menu to our Shopping List application – WatchKit

In this section, you will learn how to add a menu to our existing Shopping List application from the previous chapter. Perform the following steps:

1. Select the ShoppingList.xcodeproj file from the Chapter 06 folder in the accompanying code bundle, as shown in the following screenshot:

   

2. Next, ensure that the ShoppingList Xcode project file is open within the Xcode development IDE.

3. Now, select the Interface.storyboard file located within the ShoppingList WatchKit Extension group in the project navigation window.

4. Then, from Object Library, drag a WKInterfaceMenu control to the watch area canvas.

   

5. Next, select the Menu (WKInterfaceMenu) control that we added previously.

6. Then, from the Attributes Inspector section in the Menu section, change the Items property to 4.

   

7. Now, select the first Menu Item (WKInterfaceMenuItem) object under Menu on the left-hand side and modify the Title property to Clear List and the Image property to Trash.

   

8. Repeat the same...

Establishing the WatchKit context menu connections

There are two ways in which we can go about creating WatchKit context menu items. In the previous section, we discussed how we can drag and drop a WKInterfaceMenu control in InterfaceController within the storyboard that will contain the menu.

You can also create them programmatically using the WKInterfaceController method and provide an image, a title, and the associated action method that will get executed when the menu item is tapped by the user. Simply perform the following steps:

1. Open the InterfaceController.swift file located within the ShoppingList WatchKit Extension group from the project navigation window.

2. Next, locate the awakeWithContext method and enter the following highlighted code snippet:

   override func awakeWithContext(context: AnyObject?) {
      super.awakeWithContext(context)
           
      // Perform any final initialization of your application.
      if WCSession.isSupported() {
         let session = WCSession.defaultSession()
      ...

Design considerations when using Taptic Engine

According to Apple, Taptic Engine is an electromagnetic linear actuator, which is basically a small electronic motor that controls a magnetic field to produce haptic feedback.

Haptic feedback is basically a series of small taps that notifies you in response to different actions. An example of this would be if you were iterating through items within an array and wanted to be notified once you scrolled to the end of the list, you could send a .Click haptic for the table instance within the WatchKit extension.

Whenever you design your apps to include support for playing haptics using Apple Watch Taptic Engine, there is no ability to play more than one haptic at the same time, and there is a delay between each one that can be played.

Note

For more information on Apple Watch Design Guidelines, refer to the Apple Developer documentation at https://developer.apple.com/watch/human-interface-guidelines/watch-technologies/.

In the next section, we will look...

Summary

In this chapter, you learned about WatchKit context menus and how you can go about adding them to an existing Apple Watch application. You also learned about the differences between the WKInterfaceMenu and WKInterfaceMenuItem classes and how you can go about adding WatchKit menu items through code and respond to those actions when pressed.

You learned about Taptic Engine, which is integrated in Apple Watch, and how to go about integrating haptic feedback as well as understanding all about the Force Touch technology of Apple Watch. We also discussed how this technology is sophisticated enough to determine the difference between a tap or more forceful long press on the device screen to display the context menu associated with the current scene.

Each of the scenes within a WatchKit app can have a single context menu, each of which can present up to four menu items available for selection by the user and consist of a menu item that contains an image and title.

In the next chapter, you will...