Create a Native Apple Watch App

In this tutorial, you will learn how to take advantage of new APIs and functionality in watchOS 2 to make a native Apple Watch application. This includes picker interface elements, native animations, and alert controllers.

At WWDC 2015, Apple announced the first major update to their Apple Watch platform, watchOS 2. Along with many new features and improvements, the most important aspect of this update for developers is the ability to create native Apple Watch apps. These native apps perform better and give developers access to new features, including the digital crown, microphone, and health sensors.

In this tutorial, I will show you how to create a native WatchKit application and briefly outline some of the new APIs available in watchOS 2. I will also show you how to upgrade an existing non-native watchOS 1 app to a native watchOS 2 app.

This tutorial requires that you are running Xcode 7 on a Mac running OS X Yosemite (10.10) or later. This tutorial builds on the concepts and WatchKit APIs available in watchOS 1.

Open Xcode and create a new project. In Xcode 7, the new project wizard includes a watchOS section on the left. Choose the iOS App with WatchKit App template from the watchOS > Application section. Click Next to continue.

Choosing a Template

Fill in the information as shown in the below screenshot. Uncheck the checkboxes at the bottom, because we won’t be needing those for this tutorial.

Configuring the Project

Complete the project setup and take a look at the folders Xcode has created for us. You should see three groups or folders in the Project Navigator on the left:

  • The Demo folder contains the source files and resources of the iOS application.
  • The Demo WatchKit App folder houses the storyboard and resources of the WatchKit application.
  • The Demo WatchKit Extension includes the source files and resources of the WatchKit extension, the brains of the WatchKit application so to speak.

Before we can start adding anything, we need to configure Xcode to build and run the correct target. In the top left of your Xcode window, next to the greyed out stop button, click the active scheme, Demo, and choose the following option:

Choosing the Correct Scheme and Simulator

Click the play button to build and run your app. In your dock, you should see two simulator icons appear. One of these is the regular iOS Simulator while the other is the Apple Watch Simulator.

The iOS Simulator on the Left and the Apple Watch Simulator on the Right

If the blank screen of your Apple Watch app does not appear automatically on the Apple Watch Simulator, then complete the following steps:

1. Navigate to the Apple Watch app on the iOS Simulator. You can find the Apple Watch app on the second home screen page.

Apple Watch App Location

2. Click on the Demo table view cell as shown below.

Select the Demo Table View Cell

3. Enable the Show App on Apple Watch switch as shown below.

Show App on Apple Watch

4. In the Apple Watch Simulator, navigate to the home screen by pressingCommand+Shift+H or choosing Home from the Hardware menu of the Apple Watch Simulator.

Apple Watch home screen

If this doesn’t immediately work, then toggle the switch on the iOS Simulator on and off. It may also help to quit Xcode and run the WatchKit app again.

If everything is working correctly, click the icon of the Apple Watch app in the Apple Watch Simulator. You should see a black screen with the time displayed in the top right.

Initial app screen

It’s time to start using some of the new APIs introduced in watchOS 2. In Xcode, open Interface.storyboard in the Demo WatchKit App folder and and add the following components to the Interface Controller Scene:

  • slider
  • picker
  • button
Interface Controller Scene

Select the slider and set its Maximum and Steps properties to in the Attributes Inspector.

Slider attributes

Double click the button and change its title to “Show Alert”. Open the Assistant Editor so that you have the storyboard on the left and the contents of InterfaceController.swift on the right. Create an outlet for the slider by control-dragging from the slider in the storyboard to the InterfaceController class. Name the outlet slider. Do the same for the picker and name the outlet picker.

Create outlets for the slider and the picker

Control-drag from the button to the InterfaceController on the right to create an action. Name the action showAlertPressed. This action will be executed when the user taps the button.

Create an action for the button

Close the Assistant Editor on the right and open InterfaceController.swift in Xcode’s code editor.

The slider and button that you added to the InterfaceController class should be familiar if you’ve worked with the WatchKit framework. The picker, however, is one of the new interface elements available in watchOS 2.

A picker for Apple Watch is represented by the WKInterfacePicker class. It works similarly to its iOS counterpart, UIPickerView. Users interact with a WKInterfacePicker instance by tapping it, scrolling through WKPickerItemobjects with the digital crown, and then tapping again to select an item. A WKInterfacePicker can show items in one of three different styles:

  • List: This style displays picker items in a vertically stacked list for the user to scroll through. These items have a title and an optional accessory image. This is the only WKInterfacePicker style that supports text-based items and can show multiple items at once.
  • Stacked: This picker style presents a series of images as vertically animated cards. As the user turns the digital crown, the old card animates off-screen and the new card animates on-screen from the bottom of the picker. Items for this style can only contain images.
  • Image Sequence: This style shows a sequence of images without the transitions being animated. Turning the crown immediately displays the next or previous image in the sequence. Items for this picker style can also only contain images.

For this tutorial, you are going to create a simple list style picker with text-based items. Add the following code to awakeWithContext(_:) method of the InterfaceController class:

Build and run your app. You will see that the first three picker items are visible.

Visible picker items

To interact with your picker interface element, click it once and then scroll on your Mac’s mouse or trackpad as you normally would. This will simulate the digital crown of the watch. You will then be able to scroll through the picker items.

Choosing picker items

Along with new interface elements and new ways for users to interact with Apple Watch apps, watchOS 2 supports native animations for WatchKit interface objects. The following attributes of interface elements are animatable in watchOS 2 apps:

  • alpha (opacity)
  • width and height
  • horizontal and vertical alignment
  • background color and tint color
  • content insets for groups

Animation is done through a single WKInterfaceController instance method, animateWithDuration(_:animations:). As a simple example, you are going to animate the slider by making it fade out and shrink towards the top of the screen. Add the following code to the willActivate method of theInterfaceController class:

Build and run your app and, once your app has finished launching, you should see the slider slowly shrinking and fading out.

Adding animation in watchOS 2

In the animation closure, you can animate any of the properties listed above. This applies to any of the interface elements in your app. This allows for another level of customization in your app’s interface and also provides a much smoother way of hiding and showing elements.

watchOS 2 also enables apps the present an alert interface very similar to that of a UIAlertView or UIAlertController on iOS. These alerts are shown by calling the presentAlertControllerWithTitle(_:message:preferredStyle:actions:)method on a WKInterfaceController instance.

The title and message parameters of this method are strings to be displayed on the alert’s interface. The third parameter is a WKAlertControllerStyle enum:

  • Alert displays an alert sheet with stacked buttons and a default Cancelbutton at the bottom.
  • SideBySideButtonsAlert displays two buttons side by side.
  • ActionSheet displays one or two custom buttons with a Cancel button in the top left corner.

The fourth parameter is an array of WKAlertAction objects, which provide details for the alert buttons. This array must contain at least one object and for SideBySideButtonsAlert it must contain two.

WKAlertAction object is created with a title, style (WKAlertActionStyle.DefaultWKAlertActionStyle.Cancel, or WKAlertActionStyle.Destructive) and a block to be executed when that action is selected. Add the following code to the button’s showAlertPressed action:

Build and run your app. When you press the Show Alert button, you will see an alert interface animate in and display the two actions you created.

Displaying a simple alert on watchOS 2

When you open an existing Xcode project with a WatchKit app in Xcode 7, the following warning will show up in the Issue navigator on the left:

Project warning

Clicking the warning will show a list of the settings that need to be changed in your application to transition an existing WatchKit app to watchOS 2. At the bottom, you will see the following item:

WatchKit app setting change

If you click Perform Changes, Xcode will upgrade your existing WatchKit app for you. Once the upgrade has completed, you are ready to build, test, and ship a native app for watchOS 2.

The new APIs and features that you learned about in this tutorial are only the tip of the iceberg. Picker interface elements, alert controllers, and native animations are just some of the new features you can take advantage of in your Apple Watch apps on watchOS 2.

We will be posting many more tutorials on Tuts+ in the coming months, covering the new features and APIs available on watchOS 2. Be sure to look for those and feel free to leave any comments or questions you have in the comments below.