Make App Pie

Training for Developers and Artists

Embed Table Views

Here’s an app I started from the downloaded example file.

It is a restaurant check with a total, but I have to press the Order button to see the details in a table view on the next view controller.

That button is a waste of real estate, and it would be nice to see the details of the controller on this page. There’s a simple technique to do just that.
I’ll stop the app and go to the storyboard.

Delete the segue and the  Order button. Open the object library and find the container view.

This view embeds a view controller into the current view controller. Drag it out to where the Order button was,. You’ll find it has a view controller added to it though rather small. The size of the view controller is determined by the size of the container view.

Using auto layout, pin the container view 20 points on all sides. You’ll see the container view controller change size.

You can design a view within the container view controller. However for table views, I usually design them first and add them to the container view. Besides, I already have my table view controller.

Select the segue to the blank view controller and delete it. Delete the extra view controller. Control-drag from the view to the table view controller.

You’ll see one of the selections is Embed. Select that one.

Run the app and you’ll see the table on the main page.

Child controllers work just like any other view controller. You use delegates for transfer back to the parent, just like a separate controller.
Stop the app. I set up the table view controller with a delegate method for selecting an item from the table. The protocol and the call in the didSelect(tableview:AtIndexPath:) is already in place.
Head over to the view controller. Add the delegate to the view controller:

class ViewController: UIViewController, ItemsTableViewControllerDelegate {

Add the required method which will read the third value from the row entry, a detail about the food.

func didSelect(item: RDR1) {
        itemDetailLabel.text = item.detail
    }

Here’s a big difference with child view controllers: you don’t dismiss the controller, just send the data back through the delegate.
I need to assign the delegate property through the segue

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "table"{
            let vc = segue.destination as! ItemsTableViewController
            vc.delegate = self
        }
    }

Run this again, and try selecting the items. A description appears above the table.

This is one of many things you can do with container view, but I find it one of the most useful, especially when I want both a header for a table and detail items for it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: