After
months of anticipation and excitement, the Apple Watch is finally upon us. Ten
thousand dollar watches are confirmed, sapphire displays are a reality and the
whole lot is ready for sale. Just one thing is missing - the next killer app.
An
important thing to note is that Apple Watch apps are meant as companions to
iPhone apps. Apple expects your watch app to let your iPhone app do most of the
work, to use handoff to let users move seamlessly between the watch and the
iPhone, and to share code and data with frameworks and app groups. This
tutorial assumes that you already have an app that you can use as a companion
app to your simple watch app. If you do not have an existing iOS app, or have
never programmed in Objective-C or Swift, you can learn how to do so by
following one of the excellent tutorials from Ray Wenderlich, found at
http://www.raywenderlich.com/1797/ios-tutorial-how-to-create-a-simple-iphone-app-part-1
In your
already existing Xcode project, go to File, and then click new, and choose
Target. The Watch app and extension are completely separate targets from the
original project, and are built and run separately.
After choosing target, select Apple Watch, ensure that
WatchKit App is selected, and then click Next. If you do not have an option to
choose Apple Watch, make sure you are running at least Xcode version 6.2, and have installed the latest simulators.
After clicking next, the following screen should appear:
Make sure you select Include Glance
Scene and deselect Include Notification Scene. We’ll cover adding a glance to
your app later, but notifications are beyond the scope of this tutorial.
After you click finish, a WatchKit
app and a WatchKit extension should be added to your project. The WatchKit app
should only contain a Storyboard, an images asset catalog and a supporting
plist file.
All of the controllers should be
part of the extension. This allows for the hard work of setting up the
controllers to be offloaded to the iPhone instead of being done on the watch,
which has limited capabilities.
Now that we have our app and
extension, let’s add to the display. Go to the Interface.Storyboard of the
WatchKit app. There will be two watch displays in the storyboard. One will say
“Main” on top of the arrow to its left; the other will say, “Glance”. These are
the storyboard scenes for your Main app and your app’s Glance respectively. Let’s add some labels to our main display. Go
to the menu on the bottom right and drag and drop a label onto our main scene. After adding the label, let’s expand it to fit
our whole watch widthwise, and stretch its height to about 40 points. After
doing so, double click to add text to display. I added “Hello. Here is the time
and date:” I did so because WatchKit includes a special type of display for the
current date and time. Go to the right menu and find the date object. Drag and
drop it to the bottom of your main interface.
Did it snap beneath your label
instead of sitting at the bottom of your watch? One of the major differences
between WatchKit and UIKit is that with WatchKit, you can’t actually control
the origin of UI elements. All UI elements are automatically laid out using
their margins and respective ordering. This works just fine for our scenario,
as our date display should go right below our label-but for more complex
displays, WatchKit provides groups and separators to help us manage the layout
of the UI.
After adding the date display, go
to the attributes inspector in the right panel (click on the arrow pointing
down) and ensure that the date format is standard, and the date and time are
both displayed as short. This should display the date in the format of 9/9/2014
1:09 PM. Using the short formats allow us to display both the date and the time
in 1 line, instead of having to show it across multiple. After completing this, your display should
look like this:
After we’ve added the displays to
the main interface, let’s take a look at the glance interface. For reference,
the glance interface what you would see when you bring your watch up to check
it, and typically would show a quick snippet of information that you could see
“at-a-glance”. For now, let’s add some displays and some simple text to the
glance. One thing you’ll notice about the glance is that it has two groups, one
upper and one lower. There are multiple templates you can choose to fill out
the upper and lower, but for now, let’s leave them as groups.
Let’s drag and drop a label onto
the top group, and expand it to fill the size of the group. After expanding it,
add some text to the label-I simply set my label to say “Hello!” Now let’s drag
and drop a label onto the bottom group. Let’s expand it lengthwise to fill the
entire width of the watch, and expand its height to 100 points. You can set the
height to an exact size using the attributes inspector from earlier. While we
are changing the size, let’s set the text alignment to center. You can do so
from the top portion of the attributes inspector-it looks quite similar to
setting the alignment of text in a word document or in pages. Set some text for
the display so that it says something other than “label”, mine simply asks,
“How are you?” After that is said and done, your glance should look something
like this:
Your watch app should now be ready
to go! Just go to the top right hand corner of Xcode, click where it says your
app name and choose your watch app insetad from the drop down menu (this is
called a scheme) and then hit the run button to run. When it’s all said and
done, you should see something like this:
Finally, to see your glance, chose
Glance – yourAppName from the drop down menu and run it. You should see
something like this:
Congratulations, you have built
your first Apple Watch app! Now that you have the foundation, go and build the
next killer app.
Labels: Apple Watch, iOS, Smartwatch
