View Controller Delegate Relationships

A pattern in mobile development is to have some sort of view that displays data and also allow the user to change the data shown in this view. For example, a table view might show data entries that fall under a particular category and the app will allow the user to change this category. When the user changes the category they would expect the Table View to refresh with the new content.

What this tutorial will cover

  • Creating a delegate to have multiple view controller relationships
  • Passing data between View Controllers
  • Triggering methods of other View Controllers via delegation
  • Updating Table Views with new information obtained from another View Controller

If you are unfamiliar with Delegates or Table Views, check out The Delegation Design Pattern and Creating a Simple Table View in Swift

Storyboard

The Storyboard of the app contains just a Table View Controller and a normal View Controller, both embedded in Navigation Controllers. This will allow us to have proper navigation between the two View Controllers. The prototype cell in the Table View has a label to represent the data and a “+” Bar Button Item that triggers a segue to the other View Controller which will be used to add another row of data. The prototype’s cell identifier is “cellIdentifier”. The second View Controller has a Text Field and a “done” Bar Button Item for adding a new row of data to the Table View Controller.

Screen Shot 2016-10-28 at 10.15.59 AM.png

 

TableViewController.swift

The Table View Controller class will simply display an array of predefined items in the Table View. This will be the representation of the data of our app. Be sure to set the cell identifier properly for the prototype cell in the Storyboard. The prepare(for segue:) method will be where the delegation setup happens so we’ll leave it empty for now.

Screen Shot 2016-10-28 at 10.10.53 AM.png

AddRowViewController.swift

In this View Controller there is an outlet to the Text Field in the Storyboard and a connected Action method to the “done” bar button item.

Screen Shot 2016-10-28 at 10.25.42 AM.png

 

 

 

 

 

 

Creating the Delegate

We would like to make it so that when the user adds a new item in the Text Field of the AddRowViewController, they will be able to click the “done” button and the new item will be inserted into the TableView.

We will start by creating a delegate protocol. The protocol will contain all methods that the classes who implement it will need to perform. In our case the TableViewController will be the delegate (it will implement the protocol) and the AddRowViewController will be the delegator since it will pass the data to the TableViewController via the delegated methods.

The protocol TableViewControllerDelegate has one function, addRow(newItem). The TableViewController implements this protocol and now has the method addRow(newItem) implemented which adds an item to our data array then reloads the Table View to display all items. Now any delegator can call the addRow(newItem) method to refresh the Table View with the new item!

Screen Shot 2016-10-28 at 10.45.02 AM.png

Creating the Delegator

The next step is to add a delegate reference to the AddRowViewController class. We make a weak reference to prevent a strong reference cycle and make it an optional because it is possible that there is no delegate reference set.

Lastly, when the done button is clicked we unwrap the text from the Text Field and optionally call the delegate’s add row method with the new text.

Screen Shot 2016-10-28 at 10.46.43 AM.png

Setting the Delegator Reference

When the user clicks the add button in the TableViewController we need to set the “delegate” variable of the AddRowViewController to be the instance of the TableViewController. This is done in the prepare() method of TableViewController.

It is possible to obtain a reference to the AddRowViewController via the segue since we know that the TableViewController segues to the NavigationController which has an array of View Controllers it is connected to (AddRowViewController being one of them). The reference is obtained after some digging so that we may set the delegate property.

Screen Shot 2016-10-28 at 10.55.13 AM.png

That’s it! If you run the app you are now able to add a new item to the Table View!

Multiple Delegators

It is possible to have multiple View Controllers delegate to this Table View Controller since it conforms to the protocol that we set up. All you need to do it obtain a reference to the Table View Controller as a Table View Controller Delegate type in another View Controller then you can call it’s methods whenever you want!