Adopt the new look of macOS
Description: Make over your Mac apps: Discover how you can embrace the new design of macOS Big Sur and adopt its visual hierarchy, design patterns, and behaviors. We’ll explore the latest updates to AppKit around structural items and common controls, and show you how you can adapt more customized interfaces with just a bit of adoption work. And find out how you can incorporate custom accent colors and symbols to further personalize your app. To get the most out of this session, you should be familiar with AppKit and SF Symbols. For additional information on symbols, watch "SF Symbols 2.0”.
macOS has an all new design:
- a new toolbar with inline title, big bold controls and integration with the window’s split view
- full height sidebars with colorful icons and updated symbol iconography
- new appearance for lists/tables using a new inset selection style
Most of these changes happen automatically to your app (if you’re using classes like NSToolbar
and NSSplitViewController
).
Sidebars
Sidebar: use NSSplitViewController
, items configured using NSSplitViewItem.Behavior.sidebar
- use full size content window mask -
NSWindow.StyleMask.fullSizeContentView
, so that content is laid out in the space normally taken by the title bar
NSView
properties to find the safe areas of the view:
safeAreaInsets
,safeAreaLayoutGuide
,safeAreaRect
- also available on the storyboard (“Safe Area Layout Guide”)
New view item in the library: "Window Controller with Sidebar" (NSWindowController
+ NSSplitViewController
)
Opting out of the full height sidebar: NSSplitViewItem.allowsFullHeightLayout
- use this when sidebar is typically collapsed, or when you need more space for the toolbar
Accent colors:
- by default all sidebar icons are colored with user's chosen accent color
- use
NSOutlineViewDelegate
methodoutlineView(_: tintConfigurationForItem:)
to customize, return an instance ofNSTintConfiguration
:.default
- always uses the system accent color.monochrome
- gray monochromeinit(preferredColor:)
- use this color when default (“rainbow”) accent color is used, but follow the accent color if it’s customizedinit(fixedColor:)
- a fixed color that is always used (e.g. the yellow star in Mail’s VIP folder)- use sidebar colors to distinguish different sections of the sidebar, or highlight a specific item like the VIP star
- or use monochrome to de-emphasize groups
Toolbars
There’s no longer any special material behind the toolbar items, it’s a uniform part of the content of the window (this works automatically).
New toolbar styles, controlled through NSWindow.toolbarStyle
- NSWindowToolbarStyle
:
- the new standard - like in the new versions of system apps
- larger controls, bold icons
- inline title located at the leading edge of the title bar next to the sidebar
- good choice for most windows
- more compressed style
- regular sized controls, smaller toolbar height
- this is what was previously used if the window was configured to hide the title bar
- now supports an optional inline title
- use when user’s focus should be on the content of the window and there aren’t many elements in the toolbar
- specifically designed for preference windows
- automatic when you’re using
NSTabViewController
with the.toolbar
tab style
- what used to be the standard layout of the toolbar
- title is centered on top of the toolbar and can expand across the window
- large button icons with labels below
- use when the window title is long, or the toolbar is heavily populated with items, or when you want to keep existing toolbar layout
- default value
- determines the toolbar style based on your window structure
- existing apps linked on older SDKs keep their old layout
Toolbar buttons no longer have a border, a shape only appears when hovering
- controls with text fields show a slight border so that you know where you can click to focus
NSToolbarItem
minSize
& maxSize
properties are deprecated - macOS can automatically give your controls a proper size; you can still use constraints if necessary.
New NSWindow.subtitle
property:
- shows a smaller subtitle under the window title, e.g. the message count in Mail
- in
.expanded
style it appears next to the title
Controls like back/forward buttons should be put on the leading edge of the title bar, before the title
- set
NSToolbarItem.isNavigational
to position them there - users can add and remove them from the toolbar, but can only put them in the leading edge area
- new toolbar control for search text fields
- appears as a text field if there’s enough space, otherwise collapsed into an icon
- use
searchField
property to access the text field itself - works on older versions of macOS
NSTrackingSeparatorToolbarItem
:
- a separator that extends the separator line of the window content’s split view upwards through the toolbar
- when creating, you pass it the split view to track and the index of its divider
To position items in the title bar area of the sidebar, include an NSToolbarItem.Identifier.sidebarTrackingSeparator
item and add those items before the sidebar separator item.
The toolbar has no border below, but a slight shadow appears below it to separate it from the content when the content is scrolled
- this happens if the scroll view fills the frame and you’re using
.fullSizeContentView
- otherwise, there will be a separator regardless of the scrolling position
- customize toolbar separator in the window using
NSWindow.titlebarSeparatorStyle
, or in split view per section usingNSSplitViewItem.titlebarSeparatorStyle
Controls
New modern design of controls like popup buttons, sliders, segmented controls
New multicolor system accent color - uses each app’s preferred accent color
- define the app’s global accent color in the asset catalog (can be different for light/dark mode) + set the name in build options
- people can still chose one of the previously available accent colors, and then that color overrides your setting so they can use that color everywhere
- it’s preferred to use named colors like
controlAccentColor
,selectedContentBackgroundColor
,keyboardFocusIndicatorColor
instead of explicitly using your own color for controls
New .large
control size
- e.g. when you need one large action button
- works for: a few kinds of buttons, text fields, search fields, segmented controls
- also used in the unified toolbar style, and in system alerts
New inset style for table selection - adds extra padding, taller default row heights
.automatic
(default).fullWidth
- edge to edge selection background, like previously.inset
.sourceList
- new appearance of sidebar source list- automatic style uses
.inset
by default (on apps built on the latest SDK),.fullWidth
in bordered scroll views,.sourceList
in source lists- you can check the
effectiveStyle
property to see what style is actually used - the old
SelectionHighlightStyle.sourceList
setting is deprecated
- you can check the
Text
System text styles are now available (Large Title, Headline, Body etc.) - but without Dynamic Type, so they have one constant size.
NSFont.preferredFont(forTextStyle: options:)
NSFontDescriptor.preferredFontDescriptor(forTextStyle: options:)
Symbol images
SF Symbols is now available on the Mac:
NSImage.init?(systemSymbolName: accessibilityDescription:)
- they can scale to different font sizes and weights
- toolbar and sidebar items automatically configure symbol images to match the size & style of the container
- it’s best to use them inside
NSImageView
(seesymbolConfiguration
property) - to customize symbol configuration, use
NSImage.withSymbolConfiguration(…)
- most of existing named system images now return some kind of symbol image from SF Symbols
This note was originally published at mackuba.eu.