MMS • Sergio De Simone
Article originally posted on InfoQ. Visit InfoQ
At WWDC 2022 Apple has announced a new iteration of SwiftUI, its declarative framework to build UIs for iOS, iPadOS, macOS, and watchOS. Among the most significant highlights are SwiftUI new charting capabilities, refined navigation, new controls, and more.
As SwiftUI engineer Nick Teissler remarks, the latest SwiftUI release has been mostly driven by its adoption at Apple:
Many of these new designs and features are only possible because of how SwiftUI has evolved how we write apps at Apple.
Swift Charts is a declarative framework for creating state-driven charts. This is how you can create a bar and a line chart:
Chart(datapoints) { datapoint
BarMark(
x: .value("X-Axis-Label", datapoint.valueX),
y: .value("Y-Axis-Label", datapoint.valueY)
)
}
Chart(datapoints) { datapoint
LineMark(
x: .value("X-Axis-Label", datapoint.valueX),
y: .value("Y-Axis-Label", datapoint.valueY)
)
.foregroundStyle(by: .value("Category", task.category))
}
Swift Charts picks default values in a way that produces meaningful results in most cases, says Teissler, including colors, legends, scales, and so on. A number of modifiers can be applied to a chert to customize all of its traits and you can also build complex custom charts by using SwiftUI views within a chart.
Speaking of navigation and window management, SwiftUI updates the three most common patterns of window management, including stacks, split views, and scenes.
The new NavigationStack
obsoletes the existing NavigationView
and provides a data-driven navigation model. While compatible with the existing NavigationLink
, NavigationStack
also supports a new navigationDestination
modifier that associates navigation destination with specific data types. navigationDestination
can be used with a new NavigationLink
syntax, which instead of a destination view can take a value that represents a destination. So, when tapping on a link defined with NavigationLink
, SwiftUI will find its corresponding view to push on the stack by inspecting the typed destinations defined using navigationDestination
:
NavigationStack {
List(items) { item in
NavigationLink(value: item) {
...
}
}
.navigationDestination(for: SpecificType.self) { item in
SpecificTypeView(item: item)
}
}
Being data-driven means, for example, that the current navigation path can be represented simply as an array of values, from the topmost level down to the current value.
The new NavigationSplitView
can be used to define multi-column layouts, such as including a sidebar list of items and a detail view populated when you tap on a sidebar item. NavigationSplitView
also supports the new data-driven navigation model described above. A split view is specifically aimed for iPadOS, but it is automatically converted to a stack view on smaller displays.
As mentioned, SwiftUI also introduces new controls and more advanced customizations of existing controls, forms, and tables.
Forms are a mechanism that can be used to visually group controls together and automatically handle their visual appearance and alignment in a way consistent with the OS defaults and display size.
Updated controls include TextField
which can be made to grow vertically and support a fixed number of lines. Stepper
now allows to provide a format for its values and is available on watchOS.
Tables are now supported on iPadOS ans iOS, which makes it easier to write apps that run across all platforms. While iPadOS keeps the same multi-column view as macOS, the limited iPhone display size requires tables to only display their primary column. Tables now support contextual actions using the new contextMenu
modifier that can be applied to a specific data type and act on a single row or on multiple rows.
To make sharing things easier, SwiftUI introduces a new cross-platform, privacy-preserving photo picker; a new share sheet using the ShareLink
view which associates the data you want to share with its preview and connects it to the classical share button; and a new dropDestination
modifier that can be used for implementing drag and drop.
As a final mention, SwiftUI extends its graphics and layout capabilities. On the graphic front, it brings new shapes, color options, including gradients, drop shadows, animations, and others. Complex layouts beyond simple grids can now be created using the new Layout
protocol which according to Teissler provide a level of control comparable to that of AppKit imperative API but in a declarative fashion.