Split Views

A split view manages the presentation of two side-by-side panes of content, with persistent content in the primary pane and related information in the secondary pane. Each pane can contain any variety of elements, including navigation bars, toolbars, tab bars, tables, collections, images, maps, and custom views. Split views are often used with filterable content; a list of filter categories appears in the primary pane, and the filtered results for the selected category are shown in the secondary pane. If your app requires it, the primary pane can overlay the secondary pane and can be hidden offscreen when not in use. This is particularly useful when the device is in portrait orientation, as it allows more room for viewing content in the secondary pane.

Example of a split view that shows the main Settings list on the left and General settings on the right.

Choose a split-view layout that works well with your content. By default, a split view devotes a third of the screen to the primary pane and two-thirds to the secondary pane. The screen can also be split into halves. Choose an appropriate split based on your content, and make sure the panes don’t look unbalanced. Avoid creating a secondary pane that’s narrower than the primary pane.

Persistently highlight the active selection in the primary pane. Although the secondary pane’s content can change, it should always correspond to a clearly identifiable selection in the primary pane. This helps people understand the relationship between the panes.

In general, restrict navigation to one side of a split view. Placing navigation in both panes of a split view makes it hard for people to stay oriented and discern the relationship between the two panes.

Provide multiple ways to access a hidden primary pane. On layouts where the primary pane may be offscreen, be sure to provide a button—typically in a navigation bar—to reveal the pane. Unless your app uses the swipe gesture to perform other functions, let people swipe from the side of the screen to access the primary pane too.

For implementation details, see UISplitViewController.