SplitViewController example in Swift

This is a beginners tutorial on SplitViewController using Interface builder with programming language as Swift. There are also some good articles available on SplitViewController, check them out as well – nhipster and whoisryannystrom.

Create a new Single View Application.


Choose Language option as Swift and provide a product name.


Navigate to Main.Storyboard and select default View Controller and delete it.


Add a Split View Controller from the object library to the interface builder.


Using Attributes Inspector make Split View Controller as the Initial View Controller

Select View Controller in the Interface builder then click Editor menu and select Navigation Controller under Embed In menu option.


Rename ViewController.swift to DetailViewController.swift and change the class name as well.


Navigate to Interface builder and set the class name for ViewController scene to DetailViewController


Now Control + drag and drop TablevIew Prototype cell to NavigationController (DetailViewController) and select segue as show detail. Also set the identifier for the Storyboard Segue as “ShowDetailIdentifier



Navigate to RootViewController (TableViewController) Provide the Identifier as CellIdentifier for the Prototype Cells.


Right click on the Project Navigator, select New File and Choose the template as Cocoa Touch Class


In the next screen, select subclass as UIViewController and provide a name as SplitViewController


After creating the file, edit SplitViewController subclass to UISplitViewController. Then add the following line to the viewDidLoad method.

  splitViewController?.preferredDisplayMode = .PrimaryOverlay

The above line is to keep the PrimaryViewController (TableViewController) on top of SecondaryViewController (DetailViewController). You can change this behaviour by setting other types, check the documentation for more details.


Now add the PrimaryViewController (TableViewController) by right clicking and selecting New File. Select Cocoa Touch class and in the subclass field pick UITableViewController. Provide the the name for the TableViewController ListTableViewController.


Set the class name for the RootViewController (TableViewController) to the newly created class, ListTableViewController.


Navigate to DetailViewController in the Interface builder, add a label and make it horizontally and vertically centred.


Then add a new IBOutlet in DetailViewController and connect the Outlet to the label in interface builder.

  @IBOutlet var numberLabel:UILabel?

Also add property of type Int and the value for this property will be set during the segue transition.

var selectedIndex:Int = 1

Make changes to the viewDidLoad method, to set the value for the label and to add back button to the navigation bar.

override func viewDidLoad() {



numberLabel?.text = \(selectedIndex)


// add back button to the navigation bar.


if splitViewController?.respondsToSelector(“displayModeButtonItem”) == true {

navigationItem.leftBarButtonItem = splitViewController?.displayModeButtonItem()

navigationItem.leftItemsSupplementBackButton = true



In the ListTableViewController, add the following code that sets the datasource.

  let names = [“One”,“Two”,“Three”,“Four”,“Five”,“Six”,“Seven”,“Eight”,“Nine”,“Ten”] (class level declaration)

  // MARK: – Table view data source

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {

return 1


override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

return names.count


override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

let cell = tableView.dequeueReusableCellWithIdentifier(“CellIdentifier”, forIndexPath: indexPath) as UITableViewCell

   cell.textLabel?.text = names[indexPath.row]

return cell


Then make changes to the prepareForSegue method to navigate to DetailViewController after setting the selectedIndex property

  override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {

if (segue.identifier == “ShowDetailIdentifier”) {

var detail: DetailViewController

if let navigationController = segue.destinationViewController as? UINavigationController {

detail = navigationController.topViewController as DetailViewController

} else {

detail = segue.destinationViewController as DetailViewController



if let path = tableView.indexPathForSelectedRow() {

detail.selectedIndex = path.row + 1





Download the source from here.


4 responses to “SplitViewController example in Swift”

  1. Techie Mind Avatar
    Techie Mind

    Nice tutorial. Thank you very much.

    It was very useful for me

  2. vamsikrishna s Avatar
    vamsikrishna s

    I had tried the split view controller by using ur tutorial but I am unable to implement it in iPad screen can u tell me any suggestions how to implement in swift 3 ?

  3. Can you please post an article split view controller with Xibs.
    We need to create a kind of extension for all split views

  4. Just try the same sample with Xib’s instead of storyboard’s use xib.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.