| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| public:appkit:storyboard:three-way_split_view_controller [2025/12/11 12:46] – greg | public:appkit:storyboard:three-way_split_view_controller [2025/12/11 12:54] (current) – greg |
|---|
| ====== How to implement a three-way Split View Controller using Storyboards ====== | ====== How to implement a three-way Split View Controller using Storyboards ====== |
| --- //[[[email protected]|Greg Neumann]] 2025/12/11 11:36// | --- //[[[email protected]|Greg Neumann]] 2025/12/11 11:36// |
| | <note>Clicking on any image brings up a very large version</note> |
| This is the default main storyboard layout in Xcode 26. To add a three-way ''NSplitViewController'' so that there are three panes visible on macOS, I fiest deleted the: | This is the default main storyboard layout in Xcode 26. To add a three-way ''NSplitViewController'' so that there are three panes visible on macOS, I fiest deleted the: |
| - Window Controller Scene and the | - Window Controller Scene and the |
| - View Controller Scene | - View Controller Scene |
| By selecting them in the document outline on the left hand side and pressing the delete key. This then leaves just the //Application Scene// with it's //Main Menu//. | By selecting them in the document outline on the left hand side and pressing the delete key. This then leaves just the //Application Scene// with it's //Main Menu//. |
| {{ :public:appkit:storyboard:main_default_storyboard_layout.png?direct&600 |}} | {{ :public:appkit:storyboard:main_default_storyboard_layout.png?direct |}} |
| Then use the //Show Library// command (Menu: View/Show Library or click the + character in the bottom toolbar on the RHS. Search for ''NSSplitViewController'' as shown ... | Then use the //Show Library// command (Menu: View/Show Library or click the + character in the bottom toolbar on the RHS. Search for ''NSSplitViewController'' as shown ... |
| {{ :public:appkit:storyboard:library_inspector_showing_nssplitviewcontroller.png?direct&600 |}} | {{ :public:appkit:storyboard:library_inspector_showing_nssplitviewcontroller.png?direct |}} |
| ... and drag it onto the canvas //anywhere//: | ... and drag it onto the canvas //anywhere//: |
| {{ :public:appkit:storyboard:splitviewcontroller_added_to_the_canvas.png?direct&600 |}} | {{ :public:appkit:storyboard:splitviewcontroller_added_to_the_canvas.png?direct |}} |
| Next, ensure that the //Split View Controller// is selected in the Document Outline. Then ensure that the //Attributes Inspector// is visible by clicking on the //Hide or Show the Inspectors// icon at the top right. The check the flag //Is Initial Controller// as shown: | Next, ensure that the //Split View Controller// is selected in the Document Outline. Then ensure that the //Attributes Inspector// is visible by clicking on the //Hide or Show the Inspectors// icon at the top right. The check the flag //Is Initial Controller// as shown: |
| {{ :public:appkit:storyboard:setting_is_initial_view_controller.png?direct&600 |}} | {{ :public:appkit:storyboard:setting_is_initial_view_controller.png?direct |}} |
| Use the //Show Library// to select a normal ''ViewController'': | Use the //Show Library// to select a normal ''ViewController'': |
| {{ :public:appkit:storyboard:selecting_to_add_a_view_controller.png?direct&600 |}} | {{ :public:appkit:storyboard:selecting_to_add_a_view_controller.png?direct&600 |}} |
| and drag that onto the bottom of the Document Outline as shown next: | and drag that onto the bottom of the Document Outline as shown next: |
| {{ :public:appkit:storyboard:added_view_controller.png?direct&600 |}} | {{ :public:appkit:storyboard:added_view_controller.png?direct |}} |
| To create the third split view visual hierarchy, click on the ''Split View Controller'' in the Document Outline. It is important that you //first// click here before beginning the CTRL-drag action. Having clicked on the ''Split View Controller'', press the CTRL key and, without releasing the key or the mouse press, drag down to the new ''View Controller'' as shown: | To create the third split view visual hierarchy, click on the ''Split View Controller'' in the Document Outline. It is important that you //first// click here before beginning the CTRL-drag action. Having clicked on the ''Split View Controller'', press the CTRL key and, without releasing the key or the mouse press, drag down to the new ''View Controller'' as shown: |
| {{ :public:appkit:storyboard:setting_the_third_split_view.png?direct&600 |}} | {{ :public:appkit:storyboard:setting_the_third_split_view.png?direct |}} |
| Release the mouse over the ''View Controller'' and select the menu popup Relationship Segue Split Items: | Release the mouse over the ''View Controller'' and select the menu popup Relationship Segue Split Items: |
| {{ :public:appkit:storyboard:relationship_segue_split_items.png?300 |}} | {{ :public:appkit:storyboard:relationship_segue_split_items.png?300 |}} |
| That adjusts the two-way Split View in the ''Split View Controller'' into being a three element one. I have adjusted the visual layout to place this new ''View Controller'' to the right of the previous two panes produced from the normal (two-way) Split View Controller. | That adjusts the two-way Split View in the ''Split View Controller'' into being a three element one. I have adjusted the visual layout to place this new ''View Controller'' to the right of the previous two panes produced from the normal (two-way) Split View Controller. |
| {{ :public:appkit:storyboard:annotated_completed_and_re-arranged_three_way_split_view_controller.png?direct&600 |}} | {{ :public:appkit:storyboard:annotated_completed_and_re-arranged_three_way_split_view_controller.png?direct |}} |
