Hi every one Here I am going to describe the method to implement the split view Controller Its generally called “Drawer” in iOS Or Android. Generally people implement the UI for drawer in a single format which is shown the same in iPad or iPhone. Split view Controller is used to show the two views in a single display.
According to Apple Developers “Split View Controller is a container view controller that manages two panes of information. The first pane has a fixed width of 320 points and a height that matches the visible window height. The second pane fills the remaining space.”(As Shown in Figure Below.)
To implement the Split view controller follow the steps below :
Step:1 Drag and drop the Spit view controller from the object bar : –
In the above image you see there are 4 view view controller are appear : Firstly made the initial view Controller to split view Controller. So you are only able to start the app from the split controller
Step : 2 : Now make the new class name (“MainViewController”)which inherit the Sub Class UITableViewController. That class contain all the delegate and dataSource method for table view . Assign the MainViewController to the Root View Controller in Main.StoryBoard
|
1 2 3 4 5 6 7 8 9 |
class MainViewController: UITableViewController { override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) return cell } override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { } |
Step2 : Create Another Class named(Detail View Controller ) which inherit the Subclass UIViewController .And assign the class to the view controller .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
class DetailViewController: UIViewController { @IBOutlet weak var nameLabel: UILabel! @IBOutlet weak var descriptionLabel: UILabel! var model: ModelForSplit? { didSet { refreshUI() } } func refreshUI() { loadViewIfNeeded() nameLabel.text = model?.name descriptionLabel.text = model?.description } @IBAction func tap_Button(_ sender: Any) { let cvc = storyboard?.instantiateViewController(withIdentifier: "ViewController")as! ViewController self.navigationController?.pushViewController(cvc, animated: true) } } extension DetailViewController: RowSelectionDelegate { func orwSelected(_ data: MOdfelForSplit) { model = data } } |
Basically the split view controller work on the delegate. Delegate is used to send the message to one object to another.To implement the Delegate we make a protocol on mainViewController to tell the compiler that we will use delegate function any time when its required in the class.
|
1 2 3 4 |
protocol RowSelectionDelgate : class { func rowSelected(_ newMonster: Monster) } class MainViewController... |
Step :- 3 First, open Main.storyboard and embed the Detail View Controller into a Navigation Controller. You can do this by selecting the Detail View Controller and then selecting Editor/Embed In/Navigation Controller.(Shown in Figure Below)
Step:4 Now you have to create swift class window(key)+n->Swift->ModelForSplit.swift.
In ModelForSplit class we implement initialiser method that initialise the value for the , that consist the variable of name and description
|
1 2 3 4 5 6 7 8 9 10 11 |
class ModelForSplit { let name: String let description: String let iconName: String let weapon: Weapon init(name: String, description: String) { self.name = name self.description = description } } |
Step:5- Now We add the following code into the mainViewController Class.And it will look like that shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import UIKit protocol MonsterSelectionDelegate: class { func monsterSelected(_ newMonster: Monster) } class MasterViewController: UITableViewController { let modelArray = [ ModelForSplit(name: "Rohit", description: "Hi"), ModelForSplit(name: "Dummy1", description: "Hello"), ModelForSplit(name: "Dummy2", description: "Oye"), ModelForSplit(name: "Dummy3", description: "Hi") ] weak var delegate: RowSelectionDelgate? // MARK: - Table view data source override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return modelArray.count } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) let arrayData = modelArray[indexPath.row] cell.textLabel?.text = arrayData.name return cell } override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { let selectedData = [indexPath.row] delegate?.rowSelected(selectedData) if let detailViewController = delegate as? DetailViewController, let detailNavigationController = detailViewController.navigationController { splitViewController?.showDetailViewController(detailNavigationController, sender: nil) } } } |
Step6 :- Now you are ready to run the app . Select the iPad in simulator and run the app .
Hey nice you have done it.You are successfully implemented the split view controller
Note
In iPhone this will start from the detail view controller , So if you want to start from table Screen first ,then you should follow one more i.e. step create a new class which inherit the subclass UiSplitViewController and add the following code in class .(Assign the PrimaryViewController to the split view controller
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class PrimaryViewController: UISplitViewController, UISplitViewControllerDelegate { override func viewDidLoad() { self.delegate = self self.preferredDisplayMode = .allVisible } func splitViewController( _ splitViewController: UISplitViewController, collapseSecondary secondaryViewController: UIViewController, onto primaryViewController: UIViewController) -> Bool { // Return true to prevent UIKit from applying its default behavior return true } |
Thanks & Regards,
Rohit Gupta
Recent Comments