Chapter 2. Hello Watch

Time to fire up the engine and get a feel for some of the new tools we have at our disposal, courtesy of Apple's Xcode development environment. Once we get started, you will recognize much of what you already know through using Xcode and Swift to build apps for iOS, whether for iPhone, iPad, or universal apps for both. The project structure will be familiar to you, and everything that you would expect to see in a purely iOS project will be present.

If you have so far been developing for OS X and not iOS, you will notice many similarities but also many differences to an OS X project. Not a problem. You know Swift already, we will be setting up the projects step by step, and we are all new to WatchKit.

Briefly, we will learn how to do the following:

• Start and set up a project using an Xcode template

• Create some UI elements

• Get the app running on the Watch Simulator

• Add some simple animation to the UI

• Get basic input from the user

By the end of this chapter you will be looking...

Setting it all up

This will be largely familiar territory to anyone who has already created projects for iOS, with just a couple of things to bear in mind, which will be pointed out as we go along. Do note, however, that if you have not yet updated to Xcode 7 and there are many professional environments in which updating isn't done without a significant degree of caution—then now is the time to do it, Xcode 6 will not build WatchKit apps beyond the first version of watchOS and we will be developing for the vastly superior watchOS 2.

Creating a new Xcode project

Assuming you have Xcode 7 up and running, we will now let it do much of the work involved in setting up a project that will include the targets, schemes and source files needed to create the basics of a Watch app and its companion iPhone app.

iPhone, by the way, not iPad. Only the iPhone (5 and above) can pair with the Watch, and if the app is run on an iPad, the presence of the Watch app will simply be ignored.

A template is provided...

Looking over the project

We'll take a moment to have a look at the project, which will differ in some ways to projects you have created just for the iPhone.

Three apps?

The first thing to notice is that you have more source code files than you are accustomed to seeing when you first create a purely iOS app. These are rather conveniently organized into groups in the Navigator pane as follows:

iOS app

In the group named HelloWatch (assuming you used that name when creating the project) you will find the list of source code, xcasset, and info.plist files with which you are already familiar, and these files all make up the iOS app that will run on the iPhone. Remember, watchKit apps for watchOS need a companion iPhone app, however much the Watch app may be your focus, and possibly your user's.

There is little to add at this stage, and in this chapter we will not be changing any of the files in this group.

WatchKit app

The group named HelloWatch WatchKit App contains the Storyboard (and an empty xcassets...

Adding some content on screen

So let's get some content onto the screen. We have covered a lot of ground already; negotiated a couple of tricky hurdles and gained a good overview of the project. It really is time to create something more interesting to look at in the Watch Simulator than the less-than-inspiring black screen that shows the time in one corner.

Preparing the interface

Follow the given instructions to prepare the interface:

1. Open a new tab in Xcode (Command-T). In the project Navigator, select the Interface.storyboard file from the HelloWatch WatchKit App group (make sure you don't select the Main.storyboard from the HelloWatch group).

2. From the Editor menu, select Show Document Outline if it is not selected already.

   

3. Open the Interface Controller Scene in the Document Outline as shown, which will help you navigate around the interface as you add UI elements to it (selecting some of the smaller elements directly can get a little tricky and the outline will help you here).

   Tip

   If you don...

Give the UI some visual appeal

Our button as it stands is working perfectly, but doesn't exactly cry out to be tapped. The button's default (clear) background color and default button font may identify to an experienced user that it is indeed a button, but let's add a little sparkle to what is still a very monochromatic interface so that everyone new to the Watch - and we can, at the moment, be sure that a large proportion of our users will be just that - will both immediately recognize the button for what it is and be motivated to explore it.

Adding a group

This is a good opportunity to spend a little time looking at one aspect of watchOS development that is very different to its iOS counterpart—UI layout design.

It is not possible with WatchKit to programmatically create an interface or indeed make many fine adjustments to the layout once it has loaded. All this needs to be done before building the app, using the graphical user interface we have been using up until now to add a button to...

Adding some animation magic

We all know, as developers, the pain of finding that an idea that we had thought simple and quick to implement turns out to be much harder than we had imagined. But when programming with WatchKit, you will often find that some quite advanced-sounding technologies are, in fact, extremely easy to use.

WKInterfaceController animation methods are just that, and so we can add some flair to our app by changing the color of the button border – which is to say, the BorderGroup background color - using a call to animateWithDuration.

First, let's add some code to our InterfaceController class, and then we will take a look at what we have done.

1. Control-drag from the Group in the Document Outline to the code in the assistant editor, to create an Outlet connection:

   

2. Enter the name borderGroup as shown, and hit Connect.

   

   Xcode creates a new IBOutlet (connection) between the interface and the source code:

   @IBOutlet var borderGroup: WKInterfaceGroup!

3. Next, below the HelloButtonTapped...

Getting user input

So far, we have had very little input from the user. She has launched the app and pressed a button, but the Watch is good for more than just presenting information. While the size of the screen makes some forms of input impractical, and text input via a keyboard must be top of that list, there are still many user input methods, both old and new at our disposal.

WatchKit's text input controller is a very simple way to gather text input (as the name might suggest) using the presentTextInputControllerWithSuggestions method provided by WKInterfaceController. When making this method call, you provide a list of text options from which the user may make a selection (she may also cancel, or choose voice input).

Firstly, we want to modify changeBorderColor() to accept a String argument which will tell it what color the user has selected. Replace the function as it stands with the following:

    func changeBorderColor(colorString: String) {
        let newColor: UIColor
        
 ...

Ideas for self study

Before moving on, it's a good idea to play around with the features and code we have covered in this chapter and explore what happens when changing some of the details to see what effect it has on the app and its interface.

One excellent candidate is the borderGroup object we used to fake the button border. If you option-click on the declaration at the top of the InterfaceController code, you will be presented with a pop-up window that provides you, with among much other useful information, a list of WKInterfaceGroup settable properties which are available to you. Start by typing self.borderGroup.set and let Xcode's code completion show you what's on offer:

A Command-click on one of the UIColor methods such as .redColor() will take you to a list of convenience methods which create a limited number of preset colors. Why stick to a choice of three? Why not 10? (But you'll have to scroll!)

You might also like to print() a warning to the console when the modal dialog returns...

Summary

In this chapter, you have set up an Xcode project with the necessary targets and schemes to develop the app, and learned to navigate your way around the multiple apps pattern provided by the WatchKit app template. You have added UI elements to the screen, using Interface Builder and linked them to code written in the InterfaceController file. One of those elements was the Group object which was used to customize the layout of the UI. You also added animated changes to the UI, and learned how to fetch input from the user using the text input modal view

That is a lot of ground to have covered, so congratulations. You are likely to use most, if not all, of these techniques in just about every app you write, so make sure you have a firm and intuitive grasp of the material we have covered here.

In the next chapter, we will create a simple brain-training game app, for which you will use the power of Group objects to layout other UI elements on screen; add navigation to provide access to...