Learn the basics of Interface builder for watchOS, how to switch between the two sizes in the storyboard, then add a button and a label to the interface. Understand the stacking nature of Watch Interface builder.
- View Offline
- [Narrator] Like IOS applications, the first part of making a watch application is to add some objects to the storyboard. In this lesson, we will add two buttons and a label to the interface. Before we do, note at the bottom left of the storyboard, the button reading view as Apple Watch 38 mm. Click it and you will see two size classes available for the Apple Watch, which is the two sizes of watch, 38 millimeter and 42 millimeter. By clicking on the watches, you change the storyboard to preview that size.
When developing applications, be sure to check your work by clicking between these two. For this application, we're going to use a 38 millimeter watch. In the Object Library, find a button by typing BU into the filter. The two types of button appear. Apple Pay is beyond the scope of this course, so drag a generic button to the storyboard. You'll find it clicks into place at the top of the watch interface. Watch OS3 does not use the same free layout as IOS or OS10 with storyboards.
Objects stack from the top down. Drag another button to the interface. It stacks under the first. Click on the top button. On the right, the Attributes Inspector shows the attributes available for a button. Remember, in Watch OS3, many attributes can only be set here, not as code properties. Click the title, and change it to Pizza, and press return. For the background color, click a nice color of your choice.
Now select the second button. You can now double-click the button to change the title. Change it to Ice Cream. Change the background color to another color in the Attribute Inspector. If you use a light color, change the color of the text to a dark text color. In the filter for the Object Library, type LA for label. The label appears. Drag the label to the interface, but don't release the button yet. Notice the line that appears on the screen.
If you move your mouse between the ice cream and pizza, the label moves there. This is the insertion cursor. Release the mouse button, and the label is between the two buttons. Click and hold on the label while selected. Move the insertion cursor above the pizza button. Release the mouse button to move the label there. With the label selected, we have the attributes for label. Change the text to Hello Watch. We can change the font here. Click on the T in the font drop-down, and you get the text attributes.
Click on the font. For most applications, it's best to use the default body or one of the textiles on the bottom of this list. This will change size according to user preferences. This application is a larger font than those standard fonts. Since it will display emoji of pizza and ice cream. Change to a system, 26 point font. Change the label to Hello Apple Watch. Notice the text cuts off. You can use two attributes to show all the text.
On the bottom of the label attributes is the lines attribute. If you set your lines to two, you have enough lines. When you know you will have a specific number of lines, set it like this. When you have no idea how many lines the text will be, change the lines to zero, which stretches the label downward to fit the number of lines. Set this back to one. The second way to control overly big labels is the minimum scale attribute.
Change minimum scale to 0.5. And the label will shrink the font until it is half its size. Set this back to one, and remove the word apple. If you don't like storyboards, and prefer coding all your controls, I have some bad news for you. Watch OS keeps things simple. What we just did with the buttons and labels is the only way to add and configure any control to your interface. On the up side, you never have to deal with the constraints of auto layout. Drop a control and it is there.
- Breaking down the parts of a watchOS app
- Building an interface
- Adding and scaling images
- Adding navigation
- Playing audio and video
- Connecting objects to code
- Writing watchOS code
- Working with tables
- Programming notifications
- Working with complications