- Navigation Styles on the Apple Watch
- Navigating Using Segues
- Navigating Programmatically
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Navigating Using Segues
For this article, we'll use the HelloAppleWatch project we created in the previous article, “Getting Started with the Apple WatchKit.”
Select the Interface.storyboard file in the HelloAppleWatch Watch App group to edit it in the Storyboard Editor. Add two Button views to the Interface Controller and label them as shown in Figure 1. Then add another Interface Controller to the storyboard and add a Label view to it (see Figure 2).
){kind=link}
Figure 1 Adding two buttons to the Interface Controller.
)
Figure 2 Adding a new Interface Controller.
Next, add a Swift file to the HelloAppleWatch WatchKit Extension group and name it Page2.swift (see Figure 3).
){kind=link}
Figure 3 Adding the Page2.swift file.
Populate the Page2.swift file as follows:
import WatchKit
import Foundation
class Page2: WKInterfaceController {
override init(context: AnyObject?) {
super.init(context: context) }
override func willActivate() {
super.willActivate()
}
override func didDeactivate() {
super.didDeactivate()
}
}
Back in the storyboard, set the class of the newly added Interface Controller to Page 2 (see Figure 4).
)
Figure 4 Setting the class for the newly added Interface Controller.
Control-click the Hierarchical button and drag-and-drop it over the Page2 Interface Controller. In the Action Segue pop-up, select push (see Figure 5).
)
Figure 5 Creating a segue between the two Interface Controllers.
Select the segue you just created and set its Identifier attribute to hierarchical (see Figure 6).
)
Figure 6 Setting the identifier for the push segue.
Now, Control-click the Page-based button and drag-and-drop it over the Page2 Interface Controller. In the Action Segue pop-up, select modal (see Figure 7).
)
Figure 7 Creating another segue between the two Interface Controllers.
Select the segue you just created and set its Identifier attribute to pagebased (see Figure 8).
)
Figure 8 Setting the identifier for the modal segue.
Add the statements shown in bold in the following code to the InterfaceController.swift file:
import WatchKit
import Foundation
class InterfaceController: WKInterfaceController {
@IBOutlet weak var label: WKInterfaceLabel!
var destinationInterfaceController: WKInterfaceController!
override init(context: AnyObject?) {
...
}
override func willActivate() {
...
}
override func didDeactivate() {
...
}
override func contextForSegueWithIdentifier(segueIdentifier: String) ->
AnyObject? {
if segueIdentifier == “hierarchical” {
return [“segue”: “hierarchical”,
“data”:“Passed through hierarchical navigation”]
} else if segueIdentifier == “pagebased” {
return [“segue”: “pagebased”,
“data”: “Passed through page-based navigation”]
} else {
return [“segue”: "", “data”: ""]
}
}
}
The contextForSegueWithIdentifier: method is fired before a segue is executed. This is your opportunity to pass data to the destination Interface Controller. In this case, you'll check for the name of the segue identifier and return the data that you want to pass to the destination Interface Controller. In this example, you'll pass a dictionary object.
In Page2.swift, create an outlet for the Label view:
import WatchKit
import Foundation
class Page2: WKInterfaceController {
@IBOutlet weak var label: WKInterfaceLabel!
override init(context: AnyObject?) {
...
}
Add the bold statements in the following code to the Page2.swift file:
import WatchKit
import Foundation
class Page2: WKInterfaceController {
@IBOutlet weak var label: WKInterfaceLabel!
override init(context: AnyObject?) {
super.init(context: context)
var segue = (context as NSDictionary)[“segue”] as? String
var data = (context as NSDictionary)[“data”] as? String
self.label.setText(data)
}
When Page2 is loaded, you retrieve the data that was passed into it by using the context argument. Since the data is a dictionary object, you can cast it into NSDictionary and then display the data in the Label view.
You can now test the application by selecting the HelloAppleWatch Watch App scheme in Xcode and then pressing Command-R. The left side of Figure 9 shows the Interface Controller with the label and two buttons. Clicking the Hierarchical button navigates to the next page (appearing from right to left), shown at right in Figure 9.
)
Figure 9 Testing the hierarchical navigation.
Notice the left-arrow (≪) button at the upper-left corner of the screen. This button is automatically added for you. You can click this button to return to the previous screen, or swipe from the left edge of the screen (toward the right).
If you clicked the Page-based button, the next page will appear from the bottom of the screen (at right in Figure 10).
)
Figure 10 Testing the page-based navigation.
As usual, the Cancel button is displayed in the upper-left corner of the screen. Clicking it dismisses the page.
In both cases, observe the following:
- With a push segue, the left-arrow (≪) button is displayed.
- With a modal segue, the Cancel button is displayed.
You can change the button captions by adding the bold statements in the following code to the Page2.swift file:
override init(context: AnyObject?) {
super.init(context: context)
var segue = (context as NSDictionary)[“segue”] as? String
var data = (context as NSDictionary)[“data”] as? String
self.label.setText(data)
if segue == “pagebased” {
self.setTitle(“Close”)
} else {
self.setTitle(“Back”)
}
}
To change the button, you set the title of the page. In this example, the buttons appear as shown in Figure 11.
)
Figure 11 Customizing the buttons for the pages.
In the page-based navigation, you probably should add more buttons to the page, depending on the scenario. For example, if you're displaying a page that asks the user for additional input, you should add an OK button, and perhaps leave the Close button with the name Cancel.