Goodbye Emoticons! Up to this point in our lessons for programming Apple Watch we’ve used emoticons for graphics. It’s time to introduce true images to our WatchKit apps.

There are two ways to use graphics. We’ll discuss adding images to Buttons, Groups, and Interface controller and the slider’s min and max icons.  We’ll also use WKInterfaceImage, the Watch Kit equivalent to UIImage. In this first part we’ll work with the storyboard, then in Part two, we’ll look at using images in code.

Images on the Watch

With such a small size, we need to be careful about image sizes. The 38mm  watch has a screen size of 272 px x 340 px  and the 42mm is  312 px x 390px. Both have an aspect ratio of 4:5.  Keep your images within this size for what you are going to do. With a very little amount of memory for storage, it’s also best to use one image that is easily scalable between the two sizes.  For a watch background, that would be the size you would need. Everything for a button, group or slider icon will be much smaller.

Apple’s documentation strongly recommends .png file formats for the graphics. All photos are retina so the filenames require the @2x  at the end of the file name For this lesson, we’ll use both photos and some designed elements. Here are our images:

We have two gradients, blueGradient@2x.png and greenGradient@2x.png:

     

A plus and minus icon for our sliders, minus sign@2x.png and plus sign@2x.png:

     

 

Two designed icons, runner@2x.png and walker@2x.png

    

 

And a photo pancakes@2x.png. I tend to make the photo slightly  larger than the space, and let the app re-size accordingly. We’ll see why shortly.

You can right-click each of these images and download individually. If you want all the images, you can download them in this zip file:WKImages

Make a New Project

Make a new a new single view application SwiftWatchImage by pressing Shift-Command-N in Xcode. Make  project using Swift as the language  and a universal app. Save the project. In the editor drop down select Add Target..

and select the apple watch WatchKit App.

In the new target options, select on both notifications and glances. We will not be programming with them in this lesson, but they will give us practice space for images.

You will get the activate warning. Go ahead and activate the new target.

In the navigator, open up the WatchKit Extension and the WatchKitApp folders. You’ll see an Images.xcassets in each folder. Each one stores the pictures in a different place. The extension lives on the phone, and stores the images on the phone. The app lives on the watch and stores the images on the watch.  Which one you use depends on memory conservation versus speed requirements.  You have more space on your phone, but they  send to the watch if they need to be loaded, which is slower. It’s faster to have an image on the watch, but you have very limited memory.  For our app we’ll place everything on the watch. Select the Images.xcassets in the Watchkit App group.

In Finder, open the directory you stored the downloaded images. Select all the images.  Drag the images to the assets folder

The files will load into the assets folder.

For pre-loaded files, it is best to use the asset folder. The watch extension handles sending data to the watch more efficiently if you have images in  asset folders.

Using Backgrounds in the Storyboard

It also makes using photos easy, since they load into the media library.  Go to the WatchKit App Storyboard.  In the lower right where the object library is, click the film icon. You get the media library.

To add an image to the device, drag the image to the device. Xcode will decide how to use the image.  Find the runner in the media Library. Drag the Runner  image into the lower group of the Glance.

You find an image in the group.

If you drag an image into a blank group, you will get a background.  Look at at the attributes inspector. You’ll see that the image is a background.

You’ll also notice the image is slightly distorted.  There are several ways to fix this. For a background, we cannot change the size of the image.  Instead we change the View Mode, which currently is Scale to fill. Since the aspect ratio of the group does not match the aspect ratio of the image, the image distorts. Click the selector for mode. Select Aspect Fit.

The aspect fit mode keeps the aspect ratio of the image, and fits the image completely into the view, leaving space if there is extra. The runner looks like this:

You’ll notice that the graphic is fuzzy. I did this intentionally to point out that you need to think out your graphics before you load them. I made the runner and walker at 100px by 100px. It’s probably double that size in the image and the pixels are showing. You might get away with it in a glance, but it’s better to have a clear image. I made the pancakes at a higher resolution. Change to the pancakes, by clicking the Background image drop down, then selecting pancakes:

The larger image looks better.

Adding Images to the Button

Select the object library again. Drag a button from the  object library to the App storyboard. In the attribute Inspector, change the vertical position to Bottom.  Change the background to a GreenGradient and the Title to Run:

You’ll get this:

You’ll notice that the button gets larger. The gradient background is bigger that the default button size. The button height is set to Size to Fit Content. The best way to control the size is set the button to a proportion of the content size.  Change Height to Relative to Container.  Make the Adjustment 0.3 so we use about a third of the container for the button.

The button changes  to a more appropriate size. Both sizes of watch will show a button a third the size of the screen.  Other methods would need changing for each watch size.

Adding Icons to the Slider

You can customize your slider’s min and max icons with images. Add a slider into the storyboard by dragging it to the view.  We’ll use the default vertical position of top for the slider.

In the attributes inspector, we can change the image for the max and min indicators.  Change the Min Image to the minus sign and the Max Image to the plus sign like this:

The icons change. The 50px by 50px icons are above the largest size you really  want to use. Notice it makes the scale  of the slider smaller.

Add a Group to the app storyboard.  Position it vertically in the center.  So we can see what we are doing, set the background to Light Gray.

Drag an Image view from the object library  and place it in the group. Then place a label in the group.

Position the image Horizontally Left and Vertically center. Leave the size the default Size to Fit Content.  Position the label Horizontally center and Vertically center.  We’ll do to the label the same as we did to the button, but for width. Set the width Relative to Container and make the value 0.66.

In the label text type Walking, and Center Align it in the attributes inspector. For the image set the image to Walker.

We could add a background to the user interface like this with the blue gradient:

However the Human Interface Guide for Watch Kit has other ideas. Apple’s recommendation is to  use black for your background, with good reason:

Use black for your app’s background color. Black blends seamlessly with the Apple Watch bezel and creates the illusion of an edgeless screen.

Make your background the default color, which is black, and remove the background image.  Also make the Group Background color Default. It almost looks good, except that left curved corners does not match the square corners on the right of the image.

The group is curving off the corners. Select the group. In the attribute inspector you will see an attribute Radius. This is the radius of the corner. Check Custom and change the Radius to 0.

We have completed our app layout.

 

We have not coded anything yet. In our next lesson,  we’ll go into coding for images to make a full app.