Segues Part 2: Passing Objects

Topics Covered in This iOS Development Tutorial:

Creating a Mutable Array, Connecting Band Detail Outlets in Code

Exercise Overview

In this exercise, you'll master one of the fundamental patterns in iOS development: passing data between view controllers through segues. Specifically, you'll establish the connection between your Table View Controller and Detail View Controller using the segue created in the previous exercise. This pattern forms the backbone of most navigation-based iOS applications and is essential knowledge for any serious iOS developer.

Getting Started

1. If you completed the previous exercise you can skip the following sidebar. We recommend you finish the previous exercises (1B–2A) before starting this one, as each builds upon the previous concepts and code structure.

   If you completed the previous exercise, Jive Factory.xcodeproj should still be open. If you closed it, re-open it (from yourname-iOS Dev Level 2 Class > Jive Factory).

   Pre-Exercise Requirements

   0/3

   Complete previous exercises 1B-2A

   Foundation knowledge and project setup are essential for this tutorial

   Have Jive Factory.xcodeproj open

   Working project file with existing segue implementation

   Verify band objects are created

   Previous exercise should have established BandDetail objects

Creating a Mutable Array (Let Vs. Var)

Now that we have our band objects created, we need to establish a mechanism for passing the correct object based on the user's row selection. This follows the same pattern we used earlier with arrays for band titles, but with an important distinction in Swift's type system that directly impacts how we can manipulate our data.

Understanding Swift's let versus var keywords is crucial for effective iOS development. When you declare a property with let, you're creating an immutable constant—the reference cannot be changed after initialization. Using var creates a mutable variable that can be modified post-creation. For our band details array, we need mutability to add objects dynamically, making var the appropriate choice.

1. In the Project navigator, click on BandsTableViewController.swift.

2. Below the bandImageNames property, add the following bold code:

   let bandImageNames = ["thumb-nicole-atkins", "thumb-ambulance-ltd", "thumb-sleepies", "thumb-black-angels"]
   var bandDetails = [BandDetail]()
   
   override func viewDidLoad() {

   Notice that we use var to create a mutable object. We set the name of our object to bandDetails and initialize it as an array containing the BandDetail type. Swift's type safety requires that arrays contain only one data type—in this case, our custom BandDetail objects. This type safety prevents runtime errors and makes our code more predictable and maintainable.

3. Now that we have the bandDetails mutable array to work with, let's populate it with our BandDetail objects. Find the code for the last band object we created (blackAngelsDetails) and add the following bold code after it:

   blackAngelsDetails.showDetails = "Over 21—$15"
   
      bandDetails.append(nicoleAtkinsBandDetail)
      bandDetails.append(ambulanceLtdDetails)
      bandDetails.append(sleepiesDetails)
      bandDetails.append(blackAngelsDetails)
   }

   As our app's architecture evolves in complexity, it's important to understand the data flow. The diagram below illustrates how information moves through our application—some components we've already implemented, while others we'll build in the remainder of this exercise. This pattern is fundamental to iOS navigation and will serve you well in professional app development.

   

4. In the Project navigator, click on BandsDetailViewController.swift.

5. At the top, create a property called currentBandDetail by adding the bold code shown below:

   class BandsDetailViewController: UIViewController {
   
      var currentBandDetail:BandDetail?
   
      override func viewDidLoad() {

6. Go to BandsTableViewController.swift.

7. Near the bottom, add the bold code inside the prepare (for segue) method:

   override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
      if (segue.identifier == "showDetail") {
         if let indexPath = self.tableView.indexPathForSelectedRow {
            let bandsDetailViewController:BandsDetailViewController = segue.destination as! BandsDetailViewController
            bandsDetailViewController.currentBandDetail = bandDetails[indexPath.row]
         }
      }
   }

   Let's break down this crucial piece of code. We're setting the currentBandDetail property in the destination bandsDetailViewController to the appropriate object from our bandDetails array, using the indexPath.row to determine which band was selected. The system automatically determines the correct indexPath.row based on the user's tap, which we captured in the conditional statement above. This pattern—preparing data before a segue—is standard practice in iOS development and ensures that destination view controllers receive the data they need before appearing on screen.

With our data passing logic in place, we're ready to connect our interface elements to display the information dynamically.

Connecting Band Detail Outlets in Code

Now we'll establish the connections between our Band Detail interface elements and the underlying code, enabling dynamic content display based on the selected band. This process, known as creating outlets, is fundamental to iOS interface programming.

1. In the Project navigator click on Main.storyboard.
2. If the Document Outline is open, click Hide Document Outline .
3. Click the top bar of the Bands Detail View Controller so that it is selected in the Editor area.
4. At the top right of the window, click the Assistant editor button because we want to see the storyboard next to BandsDetailViewController.swift.
5. If BandsDetailViewController.swift isn't showing on the right side, choose it from the menu at the top of the code.
6. You should now have the storyboard showing on the left and BandsDetailViewController.swift on the right. We are going to create outlets for each of the elements on this page, establishing the bridge between our interface and our code.
7. In the storyboard, make sure you can see the Bands Detail View Controller with all the placeholder labels (Name of Band, Type of music, etc.). You'll probably have to scroll over to the right side of the storyboard.

8. As shown below, hold Control or the Right mouse button and drag the Name of Band label to the BandsDetailViewController.swift file beneath the BandDetail property line.

   

9. In the menu that pops up, set the following:

   Name:	bandNameLabel
   Storage:	Weak

10. Click Connect (or hit Return).

11. Repeat this same process for the rest of the labels and the image, adding each just below the previous one. In the pop up menu, set Storage to Weak and Name to the following values:

    Type of music:	bandTypeLabel
    Venue:	venueLabel
    Date:	showDateLabel
    Time:	showTimeLabel
    Age / price:	showDetailsLabel
    Description:	bandDescriptionLabel
    Band image:	bandImage

12. When finished, the code you added should look like this:

    var currentBandDetail:BandDetail?
    @IBOutlet weak var bandNameLabel: UILabel!
    @IBOutlet weak var bandTypeLabel: UILabel!
    @IBOutlet weak var venueLabel: UILabel!
    @IBOutlet weak var showDateLabel: UILabel!
    @IBOutlet weak var showTimeLabel: UILabel!
    @IBOutlet weak var showDetailsLabel: UILabel!
    @IBOutlet weak var bandDescriptionLabel: UILabel!
    @IBOutlet weak var bandImage: UIImageView!
    
    override func viewDidLoad() {

13. At the top right of the window, switch back to the Standard editor .
14. In the Project navigator, select BandsDetailViewController.swift.

15. Find the viewDidLoad method and add the following bold code:

    override func viewDidLoad() {
       super.viewDidLoad()
    
       // Do any additional setup after loading the view.
       bandNameLabel.text = currentBandDetail?.bandName
       bandTypeLabel.text = currentBandDetail?.bandType
       venueLabel.text = currentBandDetail?.venue
       showDateLabel.text = currentBandDetail?.nextShowDate
       showTimeLabel.text = currentBandDetail?.nextShowTime
       showDetailsLabel.text = currentBandDetail?.showDetails
       bandDescriptionLabel.text = currentBandDetail?.bandDescription
       bandImage.image = UIImage(named: currentBandDetail!.fullImageName!)
    }

16. Click the Run button.

17. When the Simulator loads, click on Nicole Atkins.

    The detail view will load and should now be populated with the correct information! This demonstrates the complete data flow from selection to display.

18. Click the Bands button at the top left to go back to the list of bands.

19. Click on another band to go to the detail view and verify it displays the correct information for that band as well.

    Notice the description at the bottom gets cut off. There should be two lines of description visible. Let's fix this common interface issue.

20. Switch back to Xcode.
21. Click the Stop button.

22. In the Project navigator, click on Main.storyboard to view it.

    (If you don't see it, click the Project navigator tab .)

23. Click on the Description label to select it on the view.

24. In the Attributes inspector , set Lines to 2 and hit Return.

    NOTE: This specifies the line limit for text display. When text exceeds the limit, it will be truncated with an ellipse (…) at the end. Setting the limit to 0 provides unlimited lines, which can be useful for content of varying lengths but requires careful layout consideration to prevent interface overflow.

25. Click the Run button.
26. Click on any band (except for Nicole Atkins, which only has one line of content) to switch to the detail view. Notice the full 2-line description is now properly displayed, demonstrating how interface configuration affects content presentation.
27. Switch back to Xcode.
28. Click the Stop button.

29. Save the project and leave it open so we can continue building upon this foundation in the next exercise.