So let's get some content onto the screen. We have covered a lot of ground already; negotiated a couple of tricky hurdles and gained a good overview of the project. It really is time to create something more interesting to look at in the Watch Simulator than the less-than-inspiring black screen that shows the time in one corner.
Follow the given instructions to prepare the interface:
Interface.storyboard
file from the HelloWatch WatchKit App group (make sure you don't select the Main.storyboard
from the HelloWatch group).An arrow labelled Main
points to the interface, indicating that it is the app's initial controller, and thus the point at which your custom code takes over from the (many) processes that need completing to get your UI onto the watch's screen. When there are multiple interface controllers, this arrow can be moved to whichever controller should load first after app launch. If only it were this simple in iOS.
To add a button, please follow these steps:
InterfaceController.swift
in the project Navigator (possibly in a new tab?) and add the following code to the class InterfaceController
that was created by the template, immediately after the opening curly brace:class InterfaceController: WKInterfaceController {
@IBOutlet var helloButton: WKInterfaceButton!
willActivate()
and didDeactivate()
, as we will not be using them here.awakeWithContext
function:@IBAction func helloButtonTapped() { helloButton.setTitle("World") }
Now we have an instance variable, helloButton
, by which we can refer to the button, and a method, helloButtonTapped()
, that it will call. Your class should now look like this:
class InterfaceController: WKInterfaceController { @IBOutlet var helloButton: WKInterfaceButton! override func awakeWithContext(context: AnyObject?) { super.awakeWithContext(context) } @IBAction func helloButtonTapped() { helloButton.setTitle("World") } }
However, we still need to connect the button to the relevant sections of code.
helloButton
you have just created in order to bring up the connections panel, and drag from the New Referencing Outlet circle to the helloButton
variable in the source code:helloButtonTapped()
function.As the number of UI elements increases and the interface becomes crowded, you may find that the easiest way to do this is to Control-drag from the button in the Document Outline to the source code in the assistant editor.
Now when you run the app, you will see that the title of the button changes when you tap it; from Hello
it turns to World.
Congratulations! You have designed, coded, compiled, built and run an app. Everything from here on in is just building upon the foundations you have just laid. In common with every Hello World
application ever written, you won't find many buyers for this one, but we have covered some important material.
And we're not done yet.
3.16.166.113