- macOS 10.13+
- Xcode 11.3+
Just as a table view organizes a list of objects linearly, an outline view organizes objects hierarchically. When an app’s user interface becomes more complex, an outline format can help keep it organized.
This sample shows how to use
NSOutline to navigate hierarchical data.
NSOutline is a Cocoa view that uses a row-and-column format. Rows are expanded and collapsed to control the amount of information presented. The outline is a hierarchical list of images, grouped into containers. The hierarchy is predefined in the
The outline view uses
Row-selection indication in a lighter blue than the default color.
Group nodes that look similar to the Finder’s sidebar.
Blurred background content to add depth to your interface.
It does this by setting the highlight appearance in the storyboard, but you can also configure it in code:
When you use
NSSplit, your app presents data in a master-detail format similar to that of the Xcode Project navigator or the Finder.
Configure the Split-View Controller
An outline view works well as part of a master-detail user interface. When the user selects an item from the outline view on the left, the detail view shows the results of the selection. For a master-detail configuration, use
NSSplit, which arranges two or more views in a linear stack running horizontally. Each view is embedded in its own
NSSplit. In this sample project, the left split-view item is a view controller called
Outline, and the right split-view item is called
Outline class focuses on how to use
In a master-detail user interface, the list view on the left must remain the same size when the split view grows or shrinks, while the detail view on the right changes size. To implement this behavior, the app uses the holding priority on the split-view items: The view with the lowest holding priority is the first to take on additional width as the split view grows or shrinks. To keep the left split-view item from growing, set its holding priority to
200, and set the item on the right side to
Define Hierarchical Content with a Tree Controller
NSTree class is the data source for the outline view. It acts as the controller when binding
NSOutline to its hierarchical collection of objects. These objects represent nodes, which are implemented by the
This sample uses two kinds of nodes:
URL based, representing a container or document found on disk.
Non-URL based, representing a container or document found in memory only.
A node can represent either a container or a document. A container node groups other nodes together. Each container node has its own unique identifier, whereas document nodes have an empty identifier with no children.
The hierarchy consists of nodes read from the
Data file. Node objects adopt the
Decodable protocol and are automatically created directly from the property list file.
Handle Drag and Drop
Users drag and drop nodes from within the outline view to rearrange them, or drag nodes representing images out to other apps. Users may also drag in image files from the Finder, Photos, Mail, or Safari. For more information, see Drag and Drop. This sample shows how to create promise drags by dragging out a copy of an image file using
Add a Contextual Menu
The outline view uses contextual menus, or shortcut menus, that provide access to frequently used commands. Control-clicking or right-clicking an outline view node opens its contextual menu. The
menu function creates these contextual menus. Override this function with the
NSOutline subclass to return a contextual menu. The contextual menu operations are add, remove, and rename.
Integrate with the Edit Menu
You can use the Edit menu to directly affect the contents of the outline view. This sample adds a Delete menu item for deleting items from the outline view.
Outline implements the
IBAction delete function, so the user can choose the menu item or press the delete key.
You use the
NSUser protocol to enable or disable the Delete menu item based on the selection shown in the outline view.
Restore the Outline View
This sample saves and restores:
The outline view’s selection.
The disclosure state of each container node.
You use the window restoration system’s
encode function to save the outline view’s node selection. The next time the app is launched, use
restore to restore that selection.
When the outline view saves the disclosure states, it encodes each container as an archived object by using the
When the outline view restores the disclosure states, it calls this function for each one, to translate the archived object to an outline view item: