Intro
One of the beautiful things about SwiftUI is its abundance of underrated components and modifiers that make the iOS developer experience incredibly easy and enjoyable. One such gem in the SwiftUI toolkit is the DisclosureGroup.
Gone are the days of struggling to build your own collapsible and expandable components or wrestling with table view sections. In UIKit, we had to handle animations, indexPath issues, and other complexities just to create a collapsible section view. But with SwiftUI’s DisclosureGroup, all that work is neatly abstracted away, leaving us with a clean and intuitive API that achieves the same effect effortlessly. Let’s dive into how it works!
The basic usage of DisclosureGroup is simple. You can think of it as a button that reveals or hides its associated content when tapped. Here’s an example:
Usage
1
2
3
4
5
6
7
8
9
10
11
12
var body: some View {
VStack {
DisclosureGroup("More Options") {
Text("Option 1")
Text("Option 2")
Text("Option 3")
}
.padding()
// Rest of your view
}
}
In this example, we have a DisclosureGroup labeled “More Options.” Initially, the associated content (Option 1, Option 2, and Option 3) is hidden. However, when the disclosure group is tapped, the content expands to reveal the options. Tapping it again collapses the content.
One of the significant advantages of DisclosureGroup is that it seamlessly handles all the animations and transitions for you. The expansion and collapse of the content are handled gracefully, providing a delightful user experience without any extra effort on your part.
DisclosureGroup also works seamlessly with bindings, allowing you to control its expansion state from external sources. For example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@State private var isExpanded = false
var body: some View {
VStack {
Button("Toggle Disclosure Group") {
isExpanded.toggle()
}
DisclosureGroup("More Options", isExpanded: $isExpanded) {
Text("Option 1")
Text("Option 2")
Text("Option 3")
}
.padding()
// Rest of your view
}
}
In this case, we’ve added a isExpanded property binding that binds to the DisclosureGroup. Toggling this isExpanded property expands or collapses the DisclosureGroup accordingly, providing an interactive way for users to control the visibility of the content.
DisclosureGroup can be customized further by modifying its appearance and behavior. You can adjust its font, foreground color, background color, and more, just like any other SwiftUI view. Additionally, you can provide your own view as the label instead of plain text, allowing for more intricate and visually appealing designs. Here’s a more sophisticated example:
Custom DisclosureGroup
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
struct CityExplorer: View {
var body: some View {
VStack {
DisclosureGroup {
VStack(alignment: .leading, spacing: 10) {
CityRow(cityName: "Paris")
CityRow(cityName: "Tokyo")
CityRow(cityName: "New York")
CityRow(cityName: "Sydney")
CityRow(cityName: "Rome")
}
.padding()
} label: {
HStack {
Image(systemName: "globe")
.foregroundColor(.blue)
.font(.system(size: 24))
Text("Explore Cities We Travel To")
.font(.headline)
.foregroundColor(.blue)
}
.padding()
.background(Color.white.cornerRadius(10))
.shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 2)
}
.padding()
// Rest of your view
}
}
}
struct CityRow: View {
let cityName: String
var body: some View {
HStack {
Image(systemName: "airplane")
Text(cityName)
.font(.subheadline)
.foregroundColor(.black)
.fontWeight(.heavy)
Spacer()
}
}
}
Gif Demo
In this example, we have a DisclosureGroup labeled “Explore Cities We Travel To” When expanded, it reveals a collection of cities with their respective images. The cities are displayed in a visually appealing CityRow custom view. Here, the cities Paris, Tokyo, New York, Sydney, and Rome are showcased, each accompanied by an image.
The label of the DisclosureGroup consists of an icon, the globe (Image(systemName: “globe”)), and the text “Discover Cities.” The label is styled with appropriate fonts, colors, and padding to create an attractive button-like appearance. It is also wrapped in a white background with rounded corners and a subtle shadow to enhance the visual appeal.
When the user taps on the disclosure group, the cities are elegantly revealed with smooth animations. Tapping it again collapses the content, offering an engaging user experience.
Feel free to customize the example further, adding more cities, adjusting the styling, or incorporating additional features to suit your needs.
Conclusion
In conclusion, the DisclosureGroup component in SwiftUI is an underrated gem that simplifies the creation of collapsible and expandable sections. Its clean API, seamless animations, and compatibility with bindings make it a powerful tool in your iOS development arsenal. So say goodbye to the days of manual section management and embrace the elegance and ease of DisclosureGroup in your SwiftUI projects!