Split View Controller

In iOS applications, there are the requirements to split the screen into two sections and display a view controller on each side to show the application content. In this section of the tutorial, we will discuss the Split View Controller, which is an important part of an iOS application.

The Split View Controller is a container View Controller that manages the master-detail interface by splitting the screen into two sections so that the user can interact with the master interface to get the detail in the detail view controller. For example, the settings app in IPad is shown in the master-detail interface, as shown in the following image.

The Split View Controller is an instance of UISplitViewController, which inherits UIViewController.

A Split View Controller manages two child view controllers in the master-detail interface. The changes in the master view controller drive changes to the detail view controller. Since iOS 8, this class is available for all iOS devices. In the previous versions, it was available for the iPad only.

Adding Split View Controller to interface

To add Split View Controller to the interface, we need to search for it in the object library and drag the result to the storyboard.

We need to make the split view controller as the root view controller in the iOS application we are building. It doesn't have a significant visual appearance in the application as it only manages the child view controllers, which are shown to the user.

Configuring the appearance of Split View Controller

We can set the display mode of a split view controller to configure its visual appearance. The preferredDisplayMode property of UISplitViewController can be set to configure the display mode. The possible values for display mode are given in the following table.

Mode	Description
Side-by-Side	In this mode, both the child view controllers are displayed simultaneously on the screen where the master view controller is displayed on the left pane of the screen, and the detail view controller is shown on the right pane. The master view controller is shown typically narrower than the detail view controller. We can adjust the master view controller width by using preferredPrimaryColumnWidthFraction property. This mode is represented by UISplitViewController.DisplayMode.allVisible constant.
Hidden	In this mode, the primary(master) view controller is hidden and becomes off-screen, whereas, the detail view controller becomes on screen. To present the primary view controller, we must present it modally or changes the display mode. This mode is represented by UISplitViewController.DisplayMode.primarryHidden constant.
Overlay	In this mode, the primary view controller is layered onto the top of the detail view controller. In this mode, the primary view controller obscures the secondary view controller. This mode is represented by UISplitViewController.DisplayMode.primaryOverlay constant.

There are possibilities that the split view controller doesn't follow the display modes due to the space constraints. The split view controller can-not display the child view controllers side by side in the compact horizontal environment.

UISplitViewController Properties

The UISplitViewController class contains the following properties to customize the split view behavior and manage the child view controllers.

SN	Property	Description
1	var delegate: UISplitViewControllerDelegate?	It represents the delegate that is used to receive the split view controller messages.
2	protocol UISplitViewControllerDelegate	The protocol UISplitViewControllerDelegate contains the methods that are notified when the changes made to the split view interface.
3	var viewControllers: [UIViewController]	It is the array of view controllers that is managed by the receiver.
4	var presentsWithGesture: Bool	It is a boolean type value that determines whether the hidden view controller can be presented with the swipe gesture.
5	var preferredDisplayMode: UISplitViewController.DisplayMode	It is the preferred display mode of the interface.
6	var displayMode: UISplitViewController.DisplayMode	It represents the current arrangement of the split view controller's contents.
7	var displayModeButtonItem: UIBarButtonItem	It represents the button that changes the display mode of the interface.
8	var primaryEdge: UISplitViewController.PrimaryEdge	It represents the side on which the primary view controller remains.
9	var isCollapsed: Bool	It is a boolean value that indicates whether one of the child view controllers is displayed.
10	var preferredPrimaryColumnWidthFraction: CGFloat	It represents the relative width of the primary view controller.
11	var primaryColumnWidth: CGFloat	It represents the width in points of the primary view controller.
12	var minimumPrimaryColumnWidth: CGFloat	It represents the minimum width (in points) required for the primary view controller.
13	var maximumPrimaryColumnWidth: CGFloat	It represents the maximum width required for the primary view controller.

UISplitViewController Methods

The UISplitViewController class contains the following action methods to display the child view controllers.

SN	Method	Description
1	func showDetailViewController(UIViewController, sender: Any?)	It presents the detail view controller of the split view interface.
2	func show(UIViewController, sender: Any?)	It presents the primary view controller of the split view interface.

Example

In this example, we will create an iOS application that implements the master-detail interface.

Interface Builder

To create the interface builder for the project, first, we need to add the Split view controller to the storyboard. For that purpose, search for a split view controller and drag the result to the storyboard. This will add a split view controller to the interface builder, as shown in the following image.

The above image contains a master view controller that is a table view controller and a UIViewController to implement a detail view controller. A table view controller will display the list of records where the detail of each record is displayed on the detail view controller.

First, make the split view controller as the initial view controller. Let's start designing the storyboard. First, we will design a prototype table view cell by adding a label. We will also define the auto-layout rules for the label within the content view of the cell, as shown in the following image.

Now, we will design the detail view controller. We will add the label to the detail view controller to show the content. We will also define the auto-layout rules for the label within the detail view controller, as shown in the following image.

Now, we will create the subclass of UITableViewController and assign it to the master view controller. We will also create a subclass of UITableViewCell and assign it to the table view cell. Create the connection outlet for cell content label in the TableViewCell. Also, create the subclass of UIViewController to represent the Detail View Controller and connect the outlet of the label in this.

TableViewCell.swift

import UIKit

class TableViewCell: UITableViewCell {

    @IBOutlet weak var cellTitleLbl: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var titleLbl: UILabel!
    var text = ""
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        titleLbl.text = text
        
    }

}

TableViewController.swift

import UIKit


class TableViewController: UITableViewController {


    var dataArr = Array<String>()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        for i in 1..<11{
            dataArr.append("Row "+i.description)
        }
    }


    // MARK: - Table view data source


    override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }


    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataArr.count
    }


    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell
        cell.cellTitleLbl.text = dataArr[indexPath.row]
        return cell
    }
    
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let vc = storyboard.instantiateViewController(identifier: "ViewController") as! ViewController
        vc.text = dataArr[indexPath.row] + " Data"
        splitViewController?.showDetailViewController(vc, sender: nil)
    }
}

Output: