Add some images to your watch application. Use the assets folder to add images, and learn the difference between asset folders in the extension and the application.
- While the interface looks pretty good, it still looks a little dull. It's not exactly insanely great yet. So we're going to do a couple more changes here. I'm still not happy with this background for the diamonds, with the overlay, so I'm going to get rid of that first of all. I can do that by just going in here and deleting it. Then I'm going to change the 'Entree', the alignment on the horizontal, we'll put left again. The other thing we can do, is with these 'Pizza', 'Pasta', and other things, like 'Cake', we can actually put images in there.
You can add images to enhance the interface, either with an image or as a background for a button or group. To use images, you place them in the assets.xcassets folder in Xcode. However, there's three of these within the project. If you want your images in a phone application, place it in the phone application. For use in WatchKit code, they go in the extension. If you want them in the interface builder, place them in the WatchKit App.
Click the one for the WKLayout WatchKit App. In the download folder we have some sample images so you can add them to your project, or you can use your own images. I've already sized these correctly. Check out the Apple Human Interface Guidelines for watchOS for more information on correct sizing of images. For new images, click the 'Add' button at the bottom of the items list, then select 'New Image Set'. This defaults to a universal image set.
In the attributes inspector, check off 'Universal' and then check on 'Apple Watch'. An Apple Watch place marker appears. In the attributes, change the image set name at the top to 'Pizza' and press 'Return'. By default this image will be used for both the 38 and 42 millimeter watch. If you want to use different images in the attribute inspector, scroll all the way down the screen width, select the 38 millimeter and 42 millimeter.
This gives you two place holders. Now within the exercise files, drag the 'pizza38mm@2x' into the 38 millimeter place holder, and the image 'pizza42mm@2x' into the 42 millimeter place holder. You could also drag an image directly to the assets folder. Drag the 'email@example.com' directly into the assets list.
It appears as a Universal. Click on 'Apple Watch' and click off 'Universal', and then drag it into the Apple Watch. Let's do the same thing with 'Cake'. Get your Finder back up here again, find the 'cake_square@2x' image, drag it in, 'Apple Watch' on, 'Universal' off, and drag up. Click on the Storyboard.
In the filter, type "i-m" to find image. Add an image to the storyboard below the 'Choose Dinner' label. In the attributes inspector, you'll see our images. Select the pizza, and that sets an image on the interface. We've now loaded images into the WatchKit App for use with Storyboard. I mentioned earlier that there were three assets folders in a watchOS project. Suppose you wanted to change the pizza image by clicking one of the buttons.
If you call for an image in the WatchKit Extension, it must be loaded in the extension's assets, not the app's. Let's add some images there. Open the assets folder for the extension, and then open your Finder with our images, and select the 'pizza42mm' and then command+select the 'pasta42' and the 'cake42'. With all three images selected, drag the three of them into the assets folder.
Often this is a great way of doing things, is to do multiple ones instead of just one, 'cause then I can just do Apple Watch > Universal, and I fix all of them at the same time, and then I can just... Drag them into their slots, and then I can click over here and change their names to 'Cake', 'Pasta', and 'Pizza'. I want to strongly emphasize that you should size your images as much as you can before you send them to the watch.
In the assets folder, import images that are the size you expect them to be. 312 pixels is as wide as you should ever go. Most buttons are 80 pixels high. This will speed up the loading of watch apps from the phone, maximize memory use, and speed up the launching of watch apps.
- Principles of watchOS development
- Adding buttons and labels to your app
- Connecting objects to code
- Testing a watchOS app
- Laying out WatchKit UI objects
- Adding navigation
- Using Interface Library elements such as inputs, pickers, and media players
- Creating tables
- Working with table data