- Learn about segues, and use
-prepareForSegue:sender:
to pass data forward to destination view controllers - Use navigation controllers to control a stack of view controllers
UINavigationController
provides a means to manage the navigation of hierarchical content. Often in iOS, we'll have related content that requires the pushing of one view on top of another. The content in the destination view is often derived from the content that was selected in the previous screen. In this Lab, we'll explore using navigation controllers to push content from one view to another.
In the project for this lab, add 3 classes:
TeamMember
, anNSObject
;TeamViewController
, aUIViewController
; andTeamDetailViewController
, anotherUIViewController
.
The three classes serve the following functions:
TeamMember
is a model class that represents each member of your team. It should have a name (name
), phone number (phoneNumber
), birth city (birthCity
), birth state (birthState
), favorite band (favoriteBand
), and photo (photo
). (Hint: useUIImage
for the photo property. You can use the class methodimageNamed:
to retrieve assets in your assets catalog. We've included some images with this project Notice the blue folderImages.xcassets
in your file navigator? That's where you can find the images.)TeamViewController
manages a view withUIButton
s for each of your team members.TeamDetailViewController
is pushed onto the navigation stack when a button is pressed inTeamViewController
. It displays the details for the particular team member that was tapped in theTeamViewController
.TeamDetailViewController
should have a public property of typeTeamMember
called teamMember.
-
In the storyboard, set the custom class of the view controllers to the new subclasses you just created.
-
Control
-drag from each button on theTeamViewController
to theTeamDetailViewController
and select a "Show" segue. This makes it so that tapping any button performs a segue to theTeamDetailViewController
.Run the app and see that the buttons do transition to the detail view controller. However, there are two problems. First, the detail is presented modally, and there's no way to get back to the previous screen. Second, the detail view controller has no idea which button was tapped! Let's remedy those issues.
-
In order for the segue to work as expected, you'll need to embed
TeamViewController
in a navigation controller in your storyboard. Do that! -
Use the
-prepareForSegue:sender:
method ofTeamViewController
to pass the tapped user forward to the detail view controller - Do not use individualIBAction
s for each of the buttons. Think about the best way to do this. The detail view controller should set all of its labels and image based on the team member that was tapped. You can access the detail view controller by calling thedestinationViewController
property of the segue.
- The
-prepareForSegue:sender:
method in yourTeamViewController
is passed aUIStoryboardSegue
argument which can be used to access the destination view controller of the segue. Since we know the destination is aTeamDetailViewController
, we can cast it to the appropriate type and set itsteamMember
property to the member that corresponds with the tapped button. How can you figure out what button triggered the segue? (There are multiple options -- you can set identifiers for each of the segues in your storyboard and access those identifiers (withsegue.identifier
). Alternatively, you could create anIBOutlet
for each of your buttons and check if thesender
argument for-prepareForSegue:sender:
is equal to any of the buttons. Play around with each!) - Once you figure out which team member was tapped, you should create a new variable of type
TeamMember
and set each of its properties to the correct values. For Al, set his name to "Al", his phone number to "5551212", his birth city to "Detroit", his birth state to "Michigan", his favorite band to "The Beatles", and his photo to the included image for Al. For the rest of the team members, set each of their properties to whatever you want! Have fun with it, but remember to use the correct images included with the project. Once you've passed the correct team member over to the destination view controller, set the labels and image based on theTeamDetailViewController
'steamMember
property.
View NavigationControllers on Learn.co and start learning to code for free.