SwiftUI’s GroupBox, OutlineGroup, and DisclosureGroup in iOS 14
Let’s look at the new stylized group controls
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 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.
OutlineGroup
s are loaded on demand.
For an OutlineGroup
to work correctly, you need to:
Pass a data collection that conforms to the
Identifiable
protocolEnsure you set the
\.children
keypath in theOutlineGroup
’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 OutlineGroup
s 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 OutlinedGroup
s in iOS 14.
DisclosureGroup
Although DisclosureGroup
s are already embedded in OutlineGroup
s, 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 DisclosureGroup
s 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") | |
} |
We can also set the DisclosureGroup
title in a different way by using the multiple-closure syntax, as shown below:
You can also toggle DisclosureGroup
s 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.