Crafting a Category Display Component with SwiftUI

Developing an intuitive and aesthetically pleasing interface enhances the user experience. In my recent project, I decided to delve deep into SwiftUI and its rich UI components. Here’s how I approached the creation of a “Category Display Component.”

The Vision:
We aimed to design a component displaying different categories in a horizontal grid format, with individual category items accompanied by corresponding icons. We aimed to integrate decorative s to add an element of elegance.

1. Setting Up the GridView:
We kickstarted our project with the `GridView`. The GridView utilizes SwiftUI’s `ScrollView` for horizontal orientation and `LazyHGrid` for efficiently rendering categories. The result? A seamlessly scrolling horizontal grid.

import SwiftUI

struct GridView: View {
    
    var body: some View {
        // MARK: - ScrollView for Categories
        ScrollView(.horizontal, showsIndicators: false, content: {
            // MARK: - Lazy Grid for Categories
            LazyHGrid(rows: gridLayout, alignment: .center, spacing: colomnSpacing, pinnedViews: [], content: {
                // MARK: - Category Section
                Section(
                    header: SectionView(rotateClockwise: false),
                    footer: SectionView(rotateClockwise: true)
                ) {
                    // MARK: - Category Items
                    ForEach(sficons) { icon in
                        ItemView(sficons: icon)
                    }
                }
            })
        }) // End of ScrollView
        .frame(height: 140)
        .padding(.horizontal, 15)
        .padding(.vertical, 10)
    }
}

struct GridView_Previews: PreviewProvider {
    static var previews: some View {
        GridView()
            .previewLayout(.sizeThatFits)
            .padding()
            .background(Color.BackgroundColor)
    }
}

2. Crafting the ItemView:
With the grid structure in place, the next challenge was to design the individual category items — the `ItemView. For a consistent look across categories, each item displays a category title and its corresponding icon sourced from the `sficons` model. Each item features a background, outline, and a combination of images and text that align with our design aesthetic.

import SwiftUI

struct ItemView: View {
    let sficons: SFSymbol
    
    var body: some View {
        Button(action: {}, label: {
            HStack(alignment: .center, spacing: 6) {
                Image(systemName: sficons.icon)
                    .renderingMode(.template)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 30, height: 30, alignment: .center)
                    .foregroundColor(.gray)
                
                Text(sficons.category.uppercased())
                    .fontWeight(.light)
                    .foregroundColor(.gray)
                
                Spacer()
            } // Enf of HStack
            .padding()
            .background(Color.white.cornerRadius(12))
            .background(
                RoundedRectangle(cornerRadius: 12)
                    .stroke(Color.gray, lineWidth: 1)
            )
        }) // End of Button
    }
}

struct ItemView_Previews: PreviewProvider {
    static var previews: some View {
        ItemView(sficons: sficons[0])
            .previewLayout(.sizeThatFits)
            .padding()
            .background(Color.BackgroundColor)
    }
}

3. Designing the SectionView:
Our grid’s crowning glory is the decorative section dividers — called `SectionView` in our codebase. This component vertically displays the title “Categories,” which rotates clockwise or counter-clockwise based on a state property. Styled with a gray background, it acts as a visual cue, indicating the beginning and end of the category section.

import SwiftUI

struct SectionView: View {
    // MARK: - Properties
    
    @State var rotateClockwise: Bool
    
    var body: some View {
        
        // MARK: - Vertical Stack for Section
        VStack(spacing: 0) {
            Spacer()
            
            // MARK: - Section Title
            Text("Categories".uppercased())
                .font(.footnote)
                .fontWeight(.bold)
                .foregroundColor(.white)
                .rotationEffect(Angle(degrees: rotateClockwise ? 90 : -90))
            
            Spacer()
        } // End of VStack
        .background(Color.gray.cornerRadius(12))
        .frame(width: 85)
        
        
    }
}

struct SectionView_Previews: PreviewProvider {
    static var previews: some View {
        // MARK: - SectionView Preview
        SectionView(rotateClockwise: false)
            .previewLayout(.fixed(width: 120, height: 240))
            .padding()
            .background(Color.BackgroundColor)    }
}

4. Integration and Testing:
The final step involved integrating the developed components and testing them. After embedding both `ItemView` and `SectionView` into `GridView`, I performed tests to ensure that all components were rendered correctly and adapted responsively to various device sizes.

Conclusion:
This project provided a profound understanding of the capabilities of SwiftUI. With a combination of `LazyHGrid`, custom views, and detailed styling, we’ve designed a component that’s not only functional but also visually appealing. The category display component is a testament to how developers can marry design and functionality using SwiftUI.

If you want to explore the codebase, here’s the link to the entire repository. Dive in and let me know your thoughts!

Project Board link

About the Author:
Abdullah Bilgin is a passionate software developer with an eye for design. He enjoys blending the artistic elements of UI/UX with the technical intricacies of coding. When he’s not deep in code, you can find him exploring the wonders of nature.

Looking to build intuitive UI components for your apps? Share your challenges in the comments below, and let’s embark on a coding journey together!