Swift 3, iOS 10, Xcode 8: finding, adding, and removing IBOutlets

I’m going to show you how you can create IBOutlets, find your existing ones, and delete them. There will be times when you need to delete outlets, for example, if you connected the wrong component, have to change your design, misspelled an outlet, etc. You can’t do iOS without doing IBOutlets. An outlet is a connection you must create to allow your user interface (UI) to communicate with your code. For example, if you have a UIView on a storyboard scene, like a UIViewController, you may want to change that view’s background color during app execution. You may also need the bounds or frame of the view. If you have a UIButton, you may want to dynamically enable or disable it depending on some runtime condition. Say you have two UITextFields, “username” and “password,” and a UIButton containing the text “Login.” With IBOutlets, you could write your code so that the login button’s isEnabled property becomes true only when the username and password fields are filled with data. You would also want the text contained in the username and password fields once the user taps “Login.” IBOutlets form a connection between UI components like UILabel, UITextField, and UIView and their backing view controller that manages their behavior and presentation.


This morning, while writing some new posts for this illustrious blog ;-), I accidentally created the wrong outlet. I wanted to create an outlet for my UITableView, but I [control]-dragged from my UITableView’s prototype cell, a UITableViewCell, into my UIViewController subclass. Here’s what I ended up with (see highlighted line 4):

Creating an IBOutlet for a prototype UITableViewCell is just wrong (see error message below) — and I wanted an IBOutlet for my UITableView anyway:

/path/to/iOS Projects/Segues and Unwind Segues in Swift 3/Segues and Unwind Segues in Swift 3/Base.lproj/Main.storyboard:1: The tableView outlet from the ViewController to the UITableViewCell is invalid. Outlets cannot be connected to repeating content.

 

There are several ways to find all your IBOutlets:

Utilities Area: Connections Inspector
In Interface Builder, select the UI component from your storyboard that you wish to inspect — like a UIViewController, UITableView, UIButton, etc. Go to the Utilities Area, the rightmost grouping of tools in Xcode, and select the Connections Inspector. Look for the subsection called Referencing Outlets and you’ll see your IBOutlets.

Connections context menu
In Interface Builder, select the UI component from your storyboard that you wish to inspect — like a UIViewController, UITableView, UIButton, etc. Right-click or [control]-click on the UI component and a black context menu will pop up and show all your UI component’s “connections” (Triggered Segues, Outlets, Outlet Collections, Referencing Outlets, and Referencing Outlet Collections).

Note that my UITableView does not have an IBOutlet in my UIViewController subclass, but my UITableViewCell does. Let’s find my improperly connected IBOutlet and delete it. Look at the image, clicking to enlarge if needed, and watch the video full-screen:


Figure 1. Finding the outlet(s) for the UITableViewCell.

Did the image and video make sense? In order to find, inspect, delete, and add an IBOutlet, I:

  • highlighted the accidentally-added IBOutlet’s corresponding UI component in Interface Builder by hovering over the IBOutlet declaration in Swift code;
  • clicked on the UITableView in the storyboard and confirmed its type in the Identity Inspector as a UITableView;
  • looked for an IBOutlet to the UITableView in the Connections Inspector, found that I had no IBOutlet to the UITableView, and realized I could not communicate with or configure the table view from code;
  • clicked on the table view’s prototype cell (a UITableViewCell) in the storyboard and confirmed its type in the Identity Inspector as a UITableViewCell;
  • looked for an IBOutlet to the UITableViewCell in the Connections Inspector, found that I had an IBOutlet to the UITableViewCell, causing a build error, and realized I could not communicate with or configure the table view from code;
  • highlighted the accidentally-added IBOutlet’s corresponding UI component in the storyboard by hovering over the Referencing Outlet’s specification in the Connections Inspector;
  • [control]-clicked (or right-clicked) on the UITableViewCell in the storyboard and a black context menu popped up, showed me all the cell’s “connections,” especially the IBOutlet to the table view that I’d mistakenly created;
  • deleted the IBOutlet from the UITableViewCell to my UIViewController subclass (by clicking the “x” next to “View Controller” in the black context menu);
  • deleted the UITableViewCell’s @IBOutlet declaration in my “ViewController.swift” file; and,
  • [control]-clicked (or right-clicked) on the UITableView in the storyboard, a black context menu popped up which showed me all the table view’s potential “connections,” and I created an IBOutlet to the table view that I needed access to in my code.

Now you have several methods for quickly finding, adding, and deleting — managing — your IBOutlets. Knowing how to properly connect your UI and code is essential to creating good apps. Good luck! Leave a comment if you have questions or feedback.

Author: Andrew Jaffee

Avid and well-published author, software engineer, designer, and developer, now specializing in iOS mobile app development in Objective-C and Swift, but with a strong background in C#, C++, .NET, JavaScript, HTML, CSS, jQuery, SQL Server, MySQL, Oracle, Agile, Test Driven Development, Git, Continuous Integration, Responsive Web Design, blah, blah, blah ... Did I miss any fad-based catch phrases? My brain avatar was kindly provided by http://icons8.com under a Creative Commons Attribution-NoDerivs 3.0 Unported license.

Leave a Reply

Your email address will not be published. Required fields are marked *