This is part 2 of the How to Use The iOS 8 SplitViewController workshop series and in it, I basically discuss how the Xcode project I created for this workshop series was created. I provide images and QuickTime Player videos to solidify your understanding of the app creation process. Before you begin, click the image below to download the Xcode project I created for this workshop. After unzipping the file, put the SVDemo folder in the Interactive Swift Programming folder on your iMac.
Now, watch this QuickTime Player video. It shows how the SVCDemo app will function at the end of this workshop series.
| Video 2-1 |
Overview of The Workshop Project
The main goal of this workshop series is to show you how to:
- use the Split View Controller as an iOS application’s root view.
- show a popover view when you click a button on the secondary view controller’s navigation bar.
So to cut to the chase, I took care of the boring stuff of creating an iOS project, which you will use to implement above mention goals. When I created the workshop’s Xcode project, I selected the Single View Application template and provided these information for the project.
 |
| Figure 2-1 |
The Storyboard
I configured the storyboard for you by doing the following.
I dragged a Split View Controller from the Object Library and drop it below the initial scene. I dragged a Container View from the Object library and drop on the initial scene, which is a View Controller. I embedded the Split View Controller in the initial scene’s Container View. Watch this QuickTime Player video to see how I performed the last two tasks.
| Video 2-2: Embed the Split View Controller in a Container View |
I connected three scenes to their respective class files via Interface Builder’s Identity Inspector. You can see this in Figure 2-2 below.
 |
| Video 2-2: |
I changed some of the scenes’ titles. I embedded the Details View Controller scene in a Navigation Controller. I connected the Table View cell to the Details View Controller’s Navigation Controller. I isolated that connection in Figure 2-3 below.
 |
| Figure 2-3 |
I added an Image View and a Label control on the Details View Controller scene, and configured some of their attributes. Finally, I added constraints to the initial scene’s Container View and the Details View Controller scene.
After performing above steps, the storyboard look like Figure 2-4. I numbered the scenes for reference purpose.
 |
| Figure 2-4 |
The Project Images
Moving along, I added three images in the project’s Images folder; two of them serves as app icons for the iPhone and iPad device. The third one serve as a place holder image for scene 6’s Image View control. I got the app icons for free here. Scroll to the bottom of the site’s page to see the download links.
 |
| Figure 2-5 |
The Project Navigator Files
I added code only in these two swift class files:
The MasterViewController.swift File
This file contain boiler template code, which I modified to perform these tasks:
- Setup the application’s data model, which consist of a swift dictionary variable. It was initialized with content of the Flowers.plist file. Figure 2-6 shows the location of the plist file. Now, Figure 2-7 below shows its content and how it was used to populate the MasterViewController’s table view’s data source object, which is a Swift dictionary variable called tableDataSource.
- Pull key-value pairs from the tableDataSource dictionary and list them in the MasterViewController table view’s cells.
 |
 |
| Figure 2-6 | Figure 2-7 |
The DetailViewController.swift File
This file contain boiler template code which I modified to display the flower name and image in the DetailViewController’s views. These item were passed to the DetailViewController via the MasterViewController’s prepareForSegue function.
In part 3 of the workshop series, you will add code in the ContainerViewController.swift file. In part 4, you will add code in the DetailViewController.swift file. That’s it, I’ve given you a quick run through of the workshop’s SVCDemo project we will modify to behave like a “typical” iOS 8 split view controller application. Before moving on to the next part of the workshop, I assume you’ve done the following:
- Downloaded the workshop Xcode project.
- Ran the app in the iPhone and iPad simulators to see how it work.
- Examined the swift class files’ code. I commented the code so you can make sense of it.
- Examined the storyboard scenes.
This is the end of part 2 of the tutorial. Next week, I will bring you part 3. Until then, happy coding! 🙂