UISplitViewController in Swift 5 iOS 13

Debabrata Roy

25 June 2020

Today, I will discuss the UISplitViewController and how we can use it in our app.

Swift version: 5
iOS version: 13
Xcode: 11

Let start about the UISplitViewController.

A split view controller is a master or container view controller that manages child view controllers in a hierarchical interface. An example of the split view controller is Mail.app. The split view controller has supported both the iPad and iPhone, since iOS 8.

To more details about this click here.

In this tutorial, we will show the country list in master view and selected country details will display in the child view controller

Getting Started

Step 1: Create a project from Xcode.

File ▸ New ▸ Project…. Choose the iOS ▸ Application ▸ Single View App template and create a new project.

Step 2: Drag a Split View Controller in the main storyboard.

You can see multiple elements in your storyboard when you add Split View Controller to the main storyboard:

Split View Controller: This split view will contain the rest of the app and is the root of your application.
Navigation Controller: This UINavigationController will be the root view of your master view controller.
View Controller: This controller is used for the showing details.

Now run the app.

Steps 3: Create a MasterViewController for the UItableviewController where we parse the JSON file and bind the table view.

import countries.json file in the project directory. Click here countries to download the JSON file.

Before parsing the JSON file, we need to create a Country struct form containing the country data.

struct Country {
    var name : String
    var code : Int
    init(data:Dictionary<String, Any>){
        name = data["name"] as? String ?? ""
        code = data["code"] as? Int ?? 0
    }
}

struct Country {

var name : String

var code : Int

init(data:Dictionary<String, Any>){

name = data["name"] as? String ?? ""

code = data["code"] as? Int ?? 0

}

Now, create the getCountryList method for parse the JSON file and call the on viewDidLoad.

var list = [Country]() 
func getCountryList(){
        if let path = Bundle.main.path(forResource: "countries", ofType: "json") {
            do {
                let data = try Data(contentsOf: URL(fileURLWithPath: path), options: .mappedIfSafe)
                let jsonResult = try JSONSerialization.jsonObject(with: data, options: .mutableLeaves)
                if let jsonResult = jsonResult as? [Any] {
                    list = jsonResult.map{Country(data: $0 as! Dictionary<String, Any>)}
                    self.tableView.reloadData()
                }
            } catch {
            }
        }
    }

var list = [Country]()

func getCountryList(){

if let path = Bundle.main.path(forResource: "countries", ofType: "json") {

do {

let data = try Data(contentsOf: URL(fileURLWithPath: path), options: .mappedIfSafe)

let jsonResult = try JSONSerialization.jsonObject(with: data, options: .mutableLeaves)

if let jsonResult = jsonResult as? [Any] {

list = jsonResult.map{Country(data: $0 as! Dictionary<String, Any>)}

self.tableView.reloadData()

}

} catch {

}

  override func viewDidLoad() {
        super.viewDidLoad()
        getCountryList()
        
    }

override func viewDidLoad() {

super.viewDidLoad()

getCountryList()

}

Now, showing the countries in the table view.

 override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = list[indexPath.row].name
        return cell
    }

override func numberOfSections(in tableView: UITableView) -> Int {

return 1

}

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

return list.count

}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

cell.textLabel?.text = list[indexPath.row].name

return cell

}

This will look like the below image.

Step 4: Create a details view controller page and add UILabel which will show the country name from the master view controller.

class DetailViewController: UIViewController {

    @IBOutlet weak var name : UILabel?
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

class DetailViewController: UIViewController {

@IBOutlet weak var name : UILabel?

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view.

}

Final Step: Now will pass the date from the master controller to details view controller and render it on screen.

Now, Confirm the didSelectRowAt delegate in the master view controller and access the UILabel from the details view.

 override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        if let splitVC = self.splitViewController, let detailVC = splitVC.viewControllers[1] as? DetailViewController {
            detailVC.name?.text = list[indexPath.row].name + " (\(list[indexPath.row].code))"
        }
    }

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

if let splitVC = self.splitViewController, let detailVC = splitVC.viewControllers[1] as? DetailViewController {

detailVC.name?.text = list[indexPath.row].name + " (\(list[indexPath.row].code))"

}

I hope the above blog will help you to learn about UISplitViewController and how we will use it in our app.

Thanks.