iOS: Split View Controller
Applications for iOS devices must divide the screen into two halves and place a view controller on each half to display the content of the program. We will talk about the Split View Controller, a crucial component of an iOS application, in this section of the lesson.
In order for the user to interact with the master interface and obtain the detail in the detail view controller, the Split View Controller, a container view controller, divides the screen into two portions. As demonstrated in the following image, the settings app on an iPad is displayed in the master-detail interface.
A UISplitViewController instance, which derives from UIViewController, is what the Split View Controller is.
class UISplitViewController : UIViewController
In the master-detail interface, a Split View Controller controls two child view controllers. The detail view controller is modified in response to modifications made to the master view controller. This class is compatible with all iOS devices starting with iOS 8. It was exclusive to the iPad in earlier iterations.
Adding Split View Controller to interface
We must look for Split View Controller in the object library and drag the result onto the storyboard in order to add it to the interface.
In the iOS application we are developing, the split view controller must be set as the root view controller. It is not a prominent visual component in the application because it solely controls the user-visible child view controllers.
Configuring the appearance of Split View Controller
A split view controller’s display mode can be changed to customize how it looks. To set the display mode, use UISplitViewController’s preferredDisplayMode property. The following table lists the available values for the display mode.
| 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. |
Owing to space limitations, it is possible that the split view controller does not follow the display modes. In the small horizontal environment, the split view controller is unable to show the child view controllers side by s
UISplitViewController Properties
To manage the child view controllers and adjust the split view functionality, the UISplitViewController class has the following attributes.
| 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 following action methods are available in the UISplitViewController class 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
We’ll build an iOS application that uses the master-detail interface in this example.
Interface Builder
We must first add the Split view controller to the storyboard in order to create the interface builder for the project. Look for a split view controller for that, then drag the outcome onto the storyboard. As seen in the accompanying image, this will add a split view controller to the interface builder.
A UIViewController to implement a detail view controller and a master view controller, which is a table view controller, are shown in the above image. The list of records will be shown by a table view controller, while the detail view controller will show each record’s detail.
As the original view controller, create the split view controller first. Now let’s go to work on the storyboard. First, by including a label, we will create a prototype table view cell. As seen in the accompanying figure, we will also establish the auto-layout rules for the label inside the cell’s content view.
We will now design the controller for the detail view. To display the content, we will add the label to the detail view controller. As seen in the following image, we will also define the auto-layout rules for the label inside the detail view controller.
The UITableViewController subclass will now be created and assigned to the master view controller. Additionally, a subclass of UITableViewCell will be made and assigned to the table view cell. In the TableViewCell, create the connection outlet for the cell content label. Additionally, attach the label’s outlet to the subclass of UIViewController that will represent the Detail View Controller.
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
