SwiftUI DisclosureGroup Tutorial - iOScreator

Disclosure Groups can show or hide a content view, which can be expanded or collapsed using a disclosure control. In this tutorial some examples of disclosre groups will be displayed. This tutorial is built for iOS14 and Xcode 12, which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUIDisclosureGroupTutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbos and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Change the code inside the ContentView struct to

struct ContentView: View {
    // 1.
    @State private var settingsIsExpanded = true
    @State private var batteryIsExpanded = false
    @State private var soundIsExpanded = false
    @State private var isLowPowerModeOn = true
    @State private var volume: Double = 0
    
    var body: some View {
        VStack {
            // 2.
            DisclosureGroup("Settings", isExpanded: $settingsIsExpanded) {
                // 3.
                DisclosureGroup("Battery", isExpanded: $batteryIsExpanded) {
                    Toggle("Low Power Mode", isOn: $isLowPowerModeOn).padding()
                }
                .padding([.top, .leading, .trailing], 20.0)
                
                // 4.
                DisclosureGroup(
                    isExpanded: $soundIsExpanded,
                    content: {
                        Slider(value: $volume, in: 0...100)
                    },
                    label: {
                        HStack(spacing: 20) {
                            Image(systemName: "speaker")
                            Text("Sound")
                        }
                    })
                    // 5.
                    .accentColor(.red)
                    .padding()
            }
            .padding()
            
            Spacer()
        }
    }
}

1. Some State properties are declared which holds the collapsed or expanded state of the view with a boolean type

2. A disclosure group with the “Settings” label is displayed in the expanding state

3. Disclosure groups can be nested. Here the view is collapsed. When the disclosure control is selected, a toggle is displayed.

4. Here a different initializer of a disclosure group is used. This way the label can be customized using a system image for example.

5. The accentcolor modifier can be used to change the color of the disclosure control.

Go to the Preview to view the disclosure groups. Select the disclosure controls to change the state of the corresponding content views.

The source code of the SwiftUIDisclosureGroupTutorial can be downloaded at the ioscreator repository on Github.