30. An Overview of List, OutlineGroup and DisclosureGroup

The preceding chapters explored the use of the SwiftUI List view to display information to users in an ordered manner. Lists provide a way to present large amounts of information to the user in a navigable and scrollable format.

The features of the List covered so far, however, have not introduced any way to display hierarchical information within a list other than displaying an entirely new screen to the user in response to list item selections. A standard list also has the potential to overwhelm the user with options through which to scroll, with no way to hide sub-groups of items to ease navigation.

In this chapter, we will explore some features that were introduced into SwiftUI with iOS 14 which address these issues, including some enhancements to the List view together with the OutlineGroup and DisclosureGroup views. Once these topics have been covered, the next chapter entitled “A SwiftUI List, OutlineGroup...

30.1 Hierarchical Data and Disclosures

In keeping with the automotive theme adopted in the previous chapter, consider an app required to present the user with the hierarchical data illustrated in Figure 30-1:

Figure 30-1

When designing such an app, one option would be to begin with a List containing only the two categories of car (Hybrid and Electric), presenting each subsequent layer of data on separate screens. A typical path through such a user interface might involve selecting the Hybrid category to navigate to a list containing the two hybrid car manufacturers, within which selecting Toyota would display a third screen containing the two hybrid models together with a selectable entry to display the hybrid models manufactured by Toyota’s Lexus sub-brand. Having viewed the Lexus hybrid models, the user would then need to navigate back through multiple list levels to be able to navigate to view Tesla electric vehicles.

Clearly a better option would be to display...

30.2 Hierarchies and Disclosure in SwiftUI Lists

The previous chapter demonstrated the use of the List component to display so called “flat”, non-hierarchical data to the user. In fact, the List component can also present hierarchically structured data. It does this by traversing the data to identify the child elements in a data structure, and then presenting the resulting hierarchy visually. Figure 30-2 for example, shows the hierarchical data illustrated in Figure 30-1 above presented within a List view:

Figure 30-2

Clearly, this provides a better way to present the data to the user without having to traverse multiple depths of list navigation. Note also that disclosure controls are provided in the list to hide and show individual branches of data. Figure 30-3, for example, shows how the disclosure controls (highlighted) have been used to collapse the Toyota, Volvo and electric car data branches:

Figure 30-3

Clicking on a collapsed disclosure control...

30.3 Using OutlineGroup

Behind the scenes of the above example, the List view is making use of the OutlineGroup view. When used directly, OutlineGroup provides the same basic functionality such as automatically traversing the data tree structure and providing disclosure controls, but with greater control in terms of customizing the display of the data, particularly in terms of organizing data into groups.

Figure 30-4, for example, shows the same car data displayed using OutlineGroup within a List to categorize the data into sections titled Hybrid Cars and Electric cars:

Figure 30-4

The SwiftUI declaration to create and implement the above display using the same car data reads as follows:

struct ContentView: View {

    var body: some View {

        List {

                ForEach(carItems) { carItem in

   ...

30.4 Using DisclosureGroup

The disclosure behavior outlined in the previous sections are implemented in the background using the DisclosureGroup view which is also available for use directly in SwiftUI-based apps to allow the user to hide and show non-structured items in a layout. The DisclosureGroup view is particularly useful when used in conjunction with the Form view.

Consider, for example, the following Form based layout:

Figure 30-5

The above screen shows part of the settings screen for an app, the SwiftUI declaration for which reads as follows:

Form {

    Toggle("Allow Notificatons", isOn: $stateOne)

        .padding(.leading)

        Toggle("Audible Alerts", isOn: $stateTwo)

            .padding(.leading)

        Toggle("Color...

30.5 Summary

This chapter has introduced the hierarchical data support and disclosure features of the List, OutlineGroup and DisclosureGroup views included with SwiftUI. The List and OutlineGroup views allow hierarchical data to be displayed to the user with just a few lines of code with disclosure controls provided to allow the user to expand and collapse sections of the hierarchy. These disclosure controls are provided by the DisclosureGroup view which may also be used directly within your own SwiftUI view layouts.