SwiftUI Brings Charts, Data-Driven Navigation, and More

MMS Founder
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.

About the Author

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.