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:
And a photo email@example.com. 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.