OutlineGroup in SwiftUI

DevTechie Inc
Jan 29, 2023

OutlineGroup was released in WWDC20 with iOS 14 release. OutlineGroup is a struct which computes views and disclosure groups on demand from a tree like structure.

We use outline group when we need to display a hierarchy of data using disclosure views. Presenting data this way gives user ability to navigate tree like data structure which can be expanded and collapsed. File system is the best example of hierarchical data structure. We can have file item with files or folders with files and this is where we can use outline group to display the file system.

OutlineGroup is best viewed inside a List view. Let’s put an example together for DevTechie’s course list. We will start with a data structure.

struct CourseCategory: Hashable, Identifiable, CustomStringConvertible {
    var id: Self { self }
    var name: String
    var children: [CourseCategory]? = nil
    var description: String {
        switch children {
        case nil:
            return "🎥 \(name)"
        case .some(let children):
            return children.isEmpty ? "🎥 \(name)" : "🗂 \(name)"
        }
    }
}
We need some sample data to work with so let’s put that in an extension

extension CourseCategory {
    static let data =
    CourseCategory(name: "DevTechie", children:
                    [
                        CourseCategory(name: "DevTechie Video Courses", children:
                                        [
                                            CourseCategory(name: "iOS", children:
                                                            [CourseCategory(name: "Machine Learning in iOS"),
                                                             CourseCategory(name: "Mastering iOS Development")]),
                                            CourseCategory(name: "Flutter", children:
                                                            [CourseCategory(name: "Practical Flutter Development")]),
                                            CourseCategory(name: "Android", children: [
                                                CourseCategory(name: "Mastering Kotlin for Android")
                                            ])
                                        ])
                    ])
}
With the data structure in place, all we have to do is use the OutlineGroup to render the content.

struct DevTechieOutlineGroupExample: View {
    var body: some View {
        NavigationView {
            List {
                OutlineGroup(CourseCategory.data, children: \.children) { item in
                    Text(item.description)
                }
            }
            .navigationTitle("DevTechie.com")
        }
    }
}
With that we have reached the end of this article. Thank you once again for reading. If you liked this, don’t forget to 👏 and follow 😍. Also subscribe to our weekly newsletter at https://www.devtechie.com
Like