Difference between revisions of "macOS Big Sur changes for developers"

From Lazarus wiki
Jump to navigationJump to search
(Big Sur interface changes - in progress ...)
 
(WIP update; added categories)
Line 53: Line 53:
 
=== Windows and Views ===
 
=== Windows and Views ===
  
Throughout macOS 11, windows adopt visual touches that recall iOS interfaces. For example, windows integrate the sidebar, toolbar, and content areas, use an increased corner radius, and display lightweight controls.
+
Throughout macOS 11, windows adopt visual cues from iOS interfaces. For example, windows integrate the sidebar, toolbar, and content areas, use an increased corner radius, and display lightweight controls.
 +
 
 +
[[file:macos11_window_view.png]]
  
 
==== Toolbars and Title Bars ====
 
==== Toolbars and Title Bars ====
  
By default, toolbars are taller, window titles can display inline with controls, and toolbar items no longer include a bezel. The increased height and bezel-free controls combine to give macOS 11 toolbars a streamlined appearance.
+
By default, toolbars are taller, window titles can display inline with controls, and toolbar items no longer include a bezel.  
 +
 
 +
{| class="wikitable"
 +
|-
 +
|macOS 11      || macOS 10.15
 +
|-
 +
|[[file:macOS11_tool-title_bar.png]] || [[file:macOS10_tool-title_bar.png]]
 +
|}
 +
 
 +
To match the default toolbar’s increased height, toolbar items automatically use the large control size. The exception is an integrated toolbar-title bar area — such as the one in a Safari window — which continues to use the regular control size. To accommodate the new default size, you’ll probably need to adjust the layout of your toolbar.
 +
 
 +
{| class="wikitable"
 +
|-
 +
|macOS 11       || macOS 10.15
 +
|-
 +
|[[file:macOS11_tool_bar.png]] || [[file:macOS10_tool_bar.png]]
 +
|}
 +
 
 +
Continuing to use the [https://developer.apple.com/documentation/appkit/nstoolbaritem/1531777-minsize minSize] and [https://developer.apple.com/documentation/appkit/nstoolbaritem/1526451-maxsize maxSize] APIs to set the size of a toolbar item can clip the control, because the current values don’t account for the larger default size. Use constraints if you need to specify minimum or maximum sizes for a toolbar control.
 +
 
 +
When horizontal space is limited, the toolbar can display the Search button in place of the search bar. When users click the Search button, the bar expands; when they click elsewhere in the window, the search bar collapses and the toolbar displays the button again.
 +
 
 +
[[file:macOS11_toolbar_search.png]]
 +
 
 +
In a preferences window, the toolbar can use SF Symbols, but the title position remains above the toolbar buttons. When needed for clarity, individual toolbar buttons can include colour. To indicate the active preference pane, the window applies a system-provided selection appearance to the selected toolbar button.
 +
 
 +
[[Category:macOS]]
 +
[[Category:Lazarus]]
 +
[[Category:Platform-sensitive development]]

Revision as of 01:15, 3 July 2020

Warning-icon.png

Warning: Work in progress


macOSlogo.png

This article applies to macOS only.

See also: Multiplatform Programming Guide

User interface changes

macOS 11 Big Sur introduces many user interface changes that update the appearance of applications and make them more iOS-like. It also adds support for familiar iOS features — such as SF Symbols and text styles.

Icons and Images

macOS 11 refreshes icon design throughout the system and also introduces multipurpose feature icons that can represent items or functions in sidebars and tables. It also adopts iOS SF Symbols. macOS 11 automatically maps AppKit shared images — such as Action, Unlocked, and Share — to specific symbols. In some cases, a symbol might not have the same size or alignment as the AppKit image it replaces, so check your layout.

SF Symbols.png

Application icons

In macOS 11, application icons combine a rounded-rectangle shape, a front-facing perspective, and a consistent drop shadow.

macOS11 app icons1.png

The new design does not preclude judicious expressiveness. For example, the Preview, Xcode, and TextEdit icons continue to combine depictions of the physical objects that best convey the applicationʼs core purpose, while incorporating the new shape, perspective, and shadow.

macOS11 app icons2.png

Document Icons

To compose a document icon, the system combines your application icon with the familiar folded-corner icon shape. If your application opens or creates a large number of document types, you can also supply a custom centre image or background appearance to help people distinguish them.

macOS11 doc icons.png

Feature Icons

A feature icon can represent an item (or category of items), a technology, or a type of information in a table view or in the content sidebar of a preferences window. A feature icon typically uses the macOS 11 rounded rectangle shape to contain a simple, unambiguous glyph, but it can also use custom shapes and colors. For help designing a feature icon, download the production template included in the Apple Design Resources for macOS.

macOS 11 macOS 10.15
macOS11 feature icon.png macOS10 feature icon.png

App Accent Colours

In macOS 11, you can specify an accent colour to customize the appearance of your applicationʼs buttons, selection highlighting, and sidebar glyphs. The system applies your accent colour when the current value in the user's General > Accent colour preferences is multicolour.

If users set the Accent colour preferences to a value other than multicolour, the system applies their chosen colour to the relevant items throughout your application, replacing your accent colour. The exception is a sidebar glyph that uses a fixed colour you specify. Because a fixed-colour sidebar glyph uses a specific colour to provide meaning, the system does not override its colour when users change the value of Accent colour preferences. To learn more, see Sidebars.

The iCloud glyph remains teal, even when the other glyphs use orange.

iClould glyph.png

Windows and Views

Throughout macOS 11, windows adopt visual cues from iOS interfaces. For example, windows integrate the sidebar, toolbar, and content areas, use an increased corner radius, and display lightweight controls.

macos11 window view.png

Toolbars and Title Bars

By default, toolbars are taller, window titles can display inline with controls, and toolbar items no longer include a bezel.

macOS 11 macOS 10.15
macOS11 tool-title bar.png macOS10 tool-title bar.png

To match the default toolbar’s increased height, toolbar items automatically use the large control size. The exception is an integrated toolbar-title bar area — such as the one in a Safari window — which continues to use the regular control size. To accommodate the new default size, you’ll probably need to adjust the layout of your toolbar.

macOS 11 macOS 10.15
macOS11 tool bar.png macOS10 tool bar.png

Continuing to use the minSize and maxSize APIs to set the size of a toolbar item can clip the control, because the current values don’t account for the larger default size. Use constraints if you need to specify minimum or maximum sizes for a toolbar control.

When horizontal space is limited, the toolbar can display the Search button in place of the search bar. When users click the Search button, the bar expands; when they click elsewhere in the window, the search bar collapses and the toolbar displays the button again.

macOS11 toolbar search.png

In a preferences window, the toolbar can use SF Symbols, but the title position remains above the toolbar buttons. When needed for clarity, individual toolbar buttons can include colour. To indicate the active preference pane, the window applies a system-provided selection appearance to the selected toolbar button.