GroupBox in SwiftUI

DevTechie Inc
Jun 11, 2022

Photo by Julian Myles on Unsplash

GroupBox is a stylized view that collects a logical grouping of content together. It also comes with an optional label.

We can use a group box when we want to visually distinguish a portion of user interface with an optional title for the boxed content.

Let’s look at an example of GroupBox.

struct GroupBoxExample: View {
    var body: some View {
        GroupBox("GroupBox Example") { 
            Text("Here are few things to know about DevTechie. DevTechie.com is not a website but it's an initiative with the mission to share knowledge with practical examples.")
        }
    }
}
Label is optional
GroupBox label is an optional field and an overload of GroupBox initializer takes only content closure for the view as shown below:

struct GroupBoxExample: View {
    var body: some View {
        GroupBox { 
            Text("Here are few things to know about DevTechie. DevTechie.com is not a website but it's an initiative with the mission to share knowledge with practical examples.")
        }
    }
}
GroupBox with Label View
Another overloaded init of GroupBox takes content and label as parameter, which gives us an opportunity to provide customized label for the container.

struct GroupBoxExample: View {
    var body: some View {
        GroupBox { 
            Text("Here are few things to know about DevTechie. DevTechie.com is not a website but it's an initiative with the mission to share knowledge with practical examples.")
        } label: { 
            Label("DevTechie.com", systemImage: "heart")
                .font(.largeTitle)
                .foregroundColor(.orange)
        }
        
    }
}
GroupBox Customization with GroupBoxStyle
If you try to set background for GroupBox, you will realize that it doesn’t work on the GroupBox that comes out of box.

GroupBox can be customized with the help GroupBoxStyle. We will create our own custom style called CustomGroupBoxStyle by extending GroupBoxStyle protocol. We will also move label after content.

struct CustomGroupBoxStyle : GroupBoxStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.content
            configuration.label
        }
        .padding()
        .background(Color.pink.opacity(0.2))
        .clipShape(RoundedRectangle(cornerRadius: 20))
    }
}
Once we have our style ready, we can use it with the GroupBox as shown below:

struct GroupBoxExample: View {
    var body: some View {
        GroupBox { 
            Text("Here are few things to know about DevTechie. DevTechie.com is not a website but it's an initiative with the mission to share knowledge with practical examples.")
        } label: { 
            Label("DevTechie.com", systemImage: "heart")
                .font(.largeTitle)
                .foregroundColor(.orange)
        }
        .groupBoxStyle(CustomGroupBoxStyle())
    }
}
GroupBox for Card Layout
GroupBox can be used as Card Layout as well. Let’s create an example where we will list out some of DevTechie video courses inside a ScrollView.

We will first create a simple data model:

struct DevTechieCourse: Identifiable {
    var id = UUID()
    var name: String
    var desc: String
}
Next we will add some sample data to our model:

extension DevTechieCourse {
    static var sample: [DevTechieCourse] {
        [
            DevTechieCourse(name: "Mastering SwiftUI 3", desc: "Master SwiftUI 3 with example. Learn to build real apps in SwiftUI 3."),
            DevTechieCourse(name: "MVVM Design Pattern in SwiftUi3", desc: "Build apps in SwiftUI 3 with MVVM design pattern."),
            DevTechieCourse(name: "DisneyPlus Clone in SwiftUI", desc: "Learn to build DisneyPlus clone in SwiftUI.")
        ]
    }
}
Last but not the least, we will use GroupBox to display the courses.

struct GroupBoxExample: View {
    var body: some View {
        ScrollView {
            ForEach(DevTechieCourse.sample) { course in 
                GroupBox { 
                    Text(course.desc)
                } label: { 
                    Label(course.name, systemImage: "arrow.right")
                }
                
            } 
        }
    }
}
For more customization to the card, use GroupBoxStyle.

With that we have reached the end of this article. Thank you once again for reading. Don’t forget to subscribe to our weekly newsletter at https://www.devtechie.com

Like