In this workshop series, you will learn how to create a simple split view controller iPhone app. Before you begin I assume you know to use:
Every thing else related to creating the split view controller iPhone app is covered in the workshop series. Let’s start off with some background information on the split view controller.
The Default Behavior of The Spit View Controller
The Split View Controller is a container controller that was originally designed only for the iPad. Now in iOS 8 it can be used on both the iPhone and the iPad. In this section, I discuss the default behavior of the split view controller on the iPad and the iPhone Device. On an iPhone or iPad device, in landscape orientation, the split view controller’s job is to display a primary view controller on the left side of the device’s screen and a secondary view controller on the right side of the device’s screen. Tapping a table row in the primary view controller display details for that row in the secondary view controller.
When the device switches into portrait orientation, the secondary view controller occupies the entire screen. The user can click a button to bring up the primary view, which will occupy the entire screen. The default location of the button is on the secondary view controller’s navigation bar. Alternatively, the swipe right gesture is used to bring up the primary view. The opposite gesture dismiss the primary view. On the iPhone simulator, the swipe right gesture is done by click-dragging from left to right-see image below. The opposite gesture dismiss the primary view.
The Container View Controller
Now, according to Apple’s documentation; if you are going to use a split view controller in your application, it should be the application’s root view controller and you must embed it in a container view. The reason for this is two fold:
- to properly display the split view controller, when the device orientation changes.
- to override the split view controller’s parent view controller trait collection.
By default the split view controller’s parent is the application window and you can’t override its trait collection. So you have to add a view controller on the storyboard, add a container view in it, then embed the split view controller in the container view. Confused? This diagram of the view controllers hierarchy should help.
As shown in above digram, the view controller is now the window’s root view controller. So in the end, the container view’s trait collection is the one that you’ll override. There’s one more thing you need to know before we get started in building the split view application and it is trait collection.
Trait Collection
First of all, a trait is a property that describes a certain aspect of a screen. A trait collection is a set of properties that describe a specific device, and it contains these traits:
- Horizontal size
- Vertical size
- Device idiom
- Display scale
Further more, size classes are considered to be traits. For example, this trait collection describes an iPhone in portrait orientation.
- Compact horizontal size class
- Regular vertical size class
- Device idiom: iPhone
- Display scale: 2.0
Now, there are three vital points I want to make about trait collection:
- Every view controller inherits its parent’s trait collection, and that inheritance start from the Window all the way up to the Screen, as shown in this diagram.
- Every parent view controller can override the trait collections of its child view controller.
- A trait collection allows custom layout in certain scenarios.
That’s all you need to to know about traits and trait collections. This basic knowledge will come in handy when we override the split view controller’s inherited trait collection and modify its child view controller’s size classes; thus enabling us to properly display the split view controller, when the device orientation changes. The new iOS SDK provides some really useful methods to do so, and once you get the meaning of trait collections you’ll see that overriding them is easy task.
This is the end of part 1 of the tutorial. Next week, I will bring you part 2 of the tutorial. Until then, happy coding! 🙂