SwiftUI’s GroupBox, OutlineGroup, and DisclosureGroup in iOS 14

Let’s look at the new stylized group controls

Jul 14, 2020

SwiftUI groups were introduced with iOS 13. They act as containers for wrapping different view types and also let you work around the 10 ChilidItem limit of VStack and HStack.

SwiftUI, in its second iteration at WWDC 2020, offers us a few new group controls. Namely, GroupBox, DisclosureGroup and OutlineGroup are now available in iOS 14 and above.

Let’s walk through each of these.

GroupBox

GroupBox is a stylized container view with an optional Label, and earlier it was only available in macOS. Now you can use it to logically group views and build things like a login screen, a custom alert dialog, and more.

Here’s the code that shows how to create a GroupBox in SwiftUI:

        
GroupBox(label: Label("Enter Details"), content: {
 VStack{
  TextField("Username", text: $text)
  Button(action: {}) {Text("Submit")}
 }
})

view raw GroupBox-swiftui.swift hosted with ❤ by GitHub

View modifiers work the same on GroupBox as they do on any other view. For instance, you can set shadows. The below screengrab shows a neumorphic design of the GroupBox in SwiftUI:

Neumorphism is all about setting lights and shadows to give an extruding look, and that’s what’s done in the above code by using powerful view modifiers. The code is available in this gist.

OutlineGroup

Outlines are pretty handy for displaying file hierarchies — or any structure for that matter. TheOutlineGroup structure is basically used for displaying ForEach views that are nested.

This means each parent or top-level view is a disclosure view consisting of zero or more child views, as defined in your data structure.

OutlineGroups are loaded on demand.

For an OutlineGroup to work correctly, you need to:

Pass a data collection that conforms to the Identifiable protocol
Ensure you set the \.children keypath in the OutlineGroup’s initializer with the desired object property of the nested children array

The following code shows an example of how to create OutlineGroup views in SwiftUI.

OutlineGroup(array, children: \.children) { 
item in
Text(item.name)
}

Let’s look at OutlineGroups in action with a dummy array:

As you can see in the GIF, when the children argument is ignored, there’s no disclosure group.

SwiftUI lists provide out-of-the-box support for OutlinedGroups in iOS 14.

DisclosureGroup

Although DisclosureGroups are already embedded in OutlineGroups, you can also use them independently.

DisclosureGroup is used to show or hide content based on a Binding control and is handy in drop-down menus.

A nice feature of DisclosureGroups is you can nest them within each other.

Let’s look at an example of a SwiftUI DisclosureGroup:

        
DisclosureGroup("Planets", isExpanded: $isExpanded) {      
Text("Mecury")        
Text("Venus")        
Text("Earth")    
}

view raw swiftui-DisclosureGroup.swift hosted with ❤ by GitHub

We can also set the DisclosureGroup title in a different way by using the multiple-closure syntax, as shown below:

You can also toggle DisclosureGroups programmatically by using the Binding property.

Conclusion

We saw the different types of groups introduced in SwiftUI with iOS 14. I hope you find them useful, especially in building document-based apps.

One cool secret of SwiftUI Groups is view modifiers set on them are applied to all the contained views.

That’s it for this one. Thanks for reading.

iOSDevie