Home

Split view behavior

In OS X Yosemite and Mavericks, the split view implementation in "Mail" and "Notes" are different. The details are highlighted here.

"Mail" app's split view behavior

"Mail" message viewer supports 3-column view - "Mailboxes", "Messages List" and "Message". The 3 panes are arranged in nested fashion. 2 NSSplitView - outer one and an inner one.

[Mailboxes | [Messages List | Message] ]

"Mailboxes" pane is collapsible. Two ways to do it:

• User can collapse the view by moving the divider
• Resize the window by dragging left edge or right edge

Sample code implementation

NSSplitView does not provide built-in support to collapse a subview by resizing window. The example in this project implements NSWindowDelegate to help. Basically, the window controller modify the frame of the window when the window is resized. This is done by implementing windowWillResize:toSize: delegate method where we limit the size the window can resize to. And, when the window wants to be resized further (more than half the width of the minimum width of the leftmost subview), we call NSSplitView's setPosition:ofDividerAtIndex: to collapse the subview.

The implementation is completely NSSplitViewDelegate base. This is the way I am more familiar with. Not quite sure if Apple implements this in auto layout or, still, through traditional delegation protocol.

windowWillResize:toSize: is not called with the same pattern when auto layout is enabled. When user resizes the window to its minimum size (derived from minimum width constraints), the window will stop invoking windowWillResize:toSize: method even when user tries to drag the edges further inward. So, it seems that it's not possible to achieve the behavior we want with auto layout.

"Notes" app's split view behavior

WWDC 2013 Session Session 213 - Best Practices for Cocoa Animations "Best Practices for Cocoa Animation" talks about how to implement a NSSplitView with resize behavior similar to the "Notes" app.

"Notes" has a 3-pane view as well. Leftmost one is called "Folder List". This folder list is hidden by default. To unhide it, from the menu, click "View" > "Show Folders List".

The behavior in "Notes" app is slightly different from "Mail".

• In a 3-pane configuration, try resizing the window. As you resize the window smaller, the "Folders List" column will not get collapsed.
• Hiding the "Folders List" by clicking "Hide Folders List" in the menu is different from hiding it by moving the divider. Try hiding by clicking the menu. Then, move the mouse pointer to the left edge of the window and try moving the divider rightward to reveal "Folders List" back. The "snapping" behavior does not apply in this case. This means you can reveal "Folders List" with arbitrary width, say, 10 pt wide.

Sample code implementation

A similar behavior is done in the sample app using auto layout with a single NSSplitView subclass.

The subclass has addConstraints: method overridden. When user moves divider 0 rightward, the rightmost subview has a width constraint of higher priority than the constraint on the left most subview which forbids user from moving divider 0 further to the right. A fuller explanation can be found How to configure auto layout constraints for NSSplitView with 3 panes.

The resize behavior when user click the button in the sample app's window is similar to "Notes" app. The implementation is similar to the code in Session 213 demo.