Creating the Split View Controller

Topics covered in this iOS Development tutorial:

Adding a split view controller, Connecting & reordering the view controllers, Fixing the tab bar icon & table view

Exercise Preview

Exercise Overview

In this exercise, we will learn how to create a Split View Controller, a view that only works in iPad apps.

Getting Started

1. If you completed the previous exercise you can skip the following sidebar. We recommend you finish the previous exercise (B1) before starting this one.

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

   If You Did Not Complete the Previous Exercise (B1)

   1. Close any files you may have open and switch to the Desktop.
   2. Navigate to Class Files > yourname-iOS Dev Level 2 Class.
   3. Duplicate the Jive Factory Ready for Split View Controller folder.
   4. Rename the folder to Jive Factory.
   5. Open Jive Factory > Jive Factory.xcworkspace.

Adding a Split View Controller

1. In the Project navigator, click on Main_iPad.storyboard.
2. If the Document Outline is open, click Hide Document Outline .
3. Ctrl–click or Right–click on a blank area of the Editor and choose Zoom to 25%.
4. In the Object library search for: split
5. From the Object library , drag a Split View Controller onto the Editor area above the Tab Bar Controller (which should be the leftmost controller).
6. Click Hide Document Outline if it popped open.
7. Zoom in on the Split View Controller you just added.
8. Notice it comes with a main Split View Controller as well as a Master View (Navigation Controller and Table View Controller) along with a (Detail) View Controller.
9. We only need the main Split View Controller (which is on the left). Click on a blank area of the Editor to deselect all.
10. We want to delete the three views on the right. Click on the top of the Navigation Controller to select it.
11. Hold Shift and click on the top of the Root View Controller.
12. Hold Shift and click on the top of the View Controller. All three views should be outlined in blue.
13. With those three views selected, hit Delete.
14. Drag the Split View Controller so it’s nicely positioned above the Tab Bar Controller.

Connecting & Reordering the View Controllers

1. In the Editor, make sure you can see both the Navigation Controller (with the Featured icon on its tab bar) and the new Split View Controller.
2. Click on a blank area of the Editor to deselect everything.
3. Select the Split View Controller. (It shouldn’t be connected to anything now.)
4. In the Utilities area, click on the Connections inspector tab .
5. Under Triggered Segues, hover over the circle to the far right of master view controller. A + sign will appear in the circle.
6. Drag from the + to the Navigation Controller (with the Featured icon on its tab bar) in the Editor area.
7. Scroll over in the Editor so you can see that the Bands Table View Controller and the Bands Detail View Controller have resized. That indicates they will be displayed on the left side of the Split View Controller. (Don’t worry about repositioning them in the Editor yet, we’ll clean up the arrangement later.)
8. In the Editor make sure you can see the Bands Detail View Controller. It has the Name of Band and other info on it, and it should be the rightmost controller.
9. We don’t want the Bands Detail View Controller to be displayed on the left side of the Split View Controller. We want this to be displayed on the right side. With the Split View Controller still selected, under Triggered Segues, hover over the circle to the far right of detail view controller. A + sign will appear in the circle.

10. Drag from the + to the Bands Detail View Controller in the Editor area. The Triggered Segues should now look like this:

    

11. Select the Tab Bar Controller. It should be to the far left, under the Split View Controller.
12. In the Connections inspector notice that under Triggered Segues, view controllers is connected to two controllers currently: Navigation Controller and Map.

13. We want to add the new Split View Controller to this list, but we need to add the View Controllers in the order that we want their tabs to appear. Because we want to add the Split View Controller at the top of the list, we need to delete the connections to all the controllers and re-add them all in the preferred order. Click the x to the left of both of the following to delete them:

    • Navigation Controller
    • Map
14. With the Tab Bar Controller still selected, under Triggered Segues, hover over the circle to the far right of view controllers. A + sign will appear in the circle.
15. Drag from the + to the Split View Controller.
16. Make sure you can see the Map View Controller. It should be to the lower right of the Tab Bar Controller.
17. With the Tab Bar Controller still selected, under Triggered Segues, hover over the circle to the far right of view controllers. A + sign will appear in the circle.

18. Drag from the + to the Map View Controller.

    NOTE: We don’t need to add the Navigation Controller because it’s now part of the Split View Controller.

19. The Triggered Segues section in the Connections inspector should now look like this:

    

Fixing the Tab Bar Icon

We need to add the custom tab bar icon for the Split View Controller.

1. Zoom in on the Split View Controller in the Editor. (Ctrl–click or Right–click on a blank area of the Editor and choose Zoom to 100%.)

2. Click on the tab bar icon (solid gray rectangle) at the bottom so it gets highlighted in blue.

NOTE: Depending on your settings, you may have a gray box with Item hidden “behind” it, as shown below. Regardless, clicking on the bottom of the gray box should allow you to proceed to the next step.

3. In the Utilities area, click on the Attributes inspector tab .
4. From the System Item menu, choose Featured. Notice the new Featured tab bar icon on the Split View Controller.
5. In the Project navigator, go to BandsDetailViewController.swift.

6. In order for this to run correctly, we’ll need to comment out the code in the viewDidLoad method for now. Select the entire ViewDidLoad method, as shown in bold:

   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
   

   Code Omitted To Save Space

      videoWebView.loadHTMLString(htmlString, baseURL: nil)
   }
   

7. Hit Cmd–/ to comment out the code.
8. Click the Run button and hit Stop if a warning appears.
9. When the Simulator finishes loading, you should now see the Split View Controller for our app! Notice the Table View is on the left, and the Detail View placeholders are showing on the right. We’ll get the appropriate band details displaying in the next exercise.

10. Click on one of the bands and notice the Detail View loads in the Table View area. Even though we set the Detail View Controller to be on the right, we still have a segue in the project doing this transition in the Table View area.

Fixing the Table View

1. Switch back to Xcode.
2. In the Project navigator, go to Main_iPad.storyboard.
3. Click on a blank area of the Editor to make sure nothing is selected.

4. As shown below, click on the segue (gray arrow with circle) between the Bands Table View Controller and the Bands Detail View Controller to select it. (Make sure you don’t select the arrow from the Split View Controller.)

   

5. Hit Delete to remove the segue.
6. Click the Run button.
7. When the Simulator finishes loading, click on one of the band rows. Notice we don’t transition to our Detail View Controller here anymore. In the next exercise, we’ll get the Detail View info displaying properly on the right.
8. Switch back to Xcode.

9. Click the Stop button.

Cleaning Up the Layout of the Controllers

1. As we’ve been working, the layout of the controllers in the Editor may have gotten a bit messy. Rearrange the controllers into a layout that makes sense. We recommend a layout like the one shown below.

   

2. When done, go to File > Save.

3. Leave the project open—we’ll continue working on it in the next exercise.