Exploring SwiftUI: Building a Vertical Grid Component

Creating a user-friendly vertical grid with SwiftUI for displaying vehicles.

Introduction

When working on a user interface, efficiently displaying content is crucial. In this article, we’ll create a Vertical Grid component using SwiftUI to showcase vehicles.

SwiftUI, Apple’s UI framework, has simplified the process of building dynamic and interactive views. Our task here is to construct a vertical grid to display various vehicles, their icons, and details.

Let’s start by breaking down the components that make this grid functional and visually appealing.

#### Tasks:

1. **Setting Up GridView**:
   - [x] Implement a `GridView` for horizontal category display.
   - [x] Integrate with the `LazyVGrid` to efficiently render categories.
   - [x] Ensure smooth scrolling behavior.

2. **Developing ItemView**:
   - [x] Set up the `ItemView` structure.
   - [x] Use the `sficons` model to fetch and display category icons and titles.
   - [x] Style individual category items with a consistent look, including a background and outline.

3. **Implementing SectionView**:
   - [x] Set up the basic structure of `SectionView`.
   - [x] Introduce the `rotateClockwise` state for title rotation.
   - [x] Configure title rotation based on the `rotateClockwise` flag.
   - [x] Style the section divider with a proper background and title.

4. **Testing and Integration**:
   - [x] Test each component individually.
   - [x] Integrate `ItemView` and `SectionView` into `GridView`.
   - [x] Ensure all components render properly and responsively.

#### Code Files:

- verticalGrid.swift
- itemView.swift
- TitleView.swift

 {
        "id": 1,
        "name": "Sedan",
        "icon": "sedan",
        "category": "Cars",
        "color": [0.83, 0.83, 0.85]
    }

import SwiftUI

struct Vehicle: Codable, Identifiable {
    var id: Int
    var name: String
    var icon: String
    var category: String
    var color: [Double]
    
    // Computed properties for RGB color components
    var red: Double { color[0] }
    var green: Double { color[1] }
    var blue: Double { color[2] }
}

Setting Up the Grid

In SwiftUI, we begin by defining the layout of our grid. We utilize the ScrollView and LazyVGrid components to structure our content. The grid layout is illustrated with a column count and item spacing. Here's a glimpse of the code:

// Code snippet
struct verticalGrid: View {
    var body: some View {
        ScrollView(.vertical, showsIndicators: false, content: {
            LazyVGrid(columns: gridLayout, spacing: 15, content: {
                ForEach(vehicles) { vehicle in
                    itemView(vehicle: vehicle)
                }
            })
            .padding(15)
        })
        .background(Color.BackgroundColor.ignoresSafeArea(.all, edges: .all))
    }
}

Building Item Views

Each item in our grid is represented by the itemView component. It includes the vehicle's icon, name, and category. We customize the appearance and layout of these components to achieve a visually appealing design. Here's a snippet of how the item view is constructed:

// Code snippet
struct itemView: View {
    let vehicle: Vehicle
    
    var body: some View {
        VStack(alignment: .leading, spacing: 6) {
            // Icon
            ZStack {
                Image(vehicle.icon)
                    .resizable()
                    .scaledToFit()
                    .padding(10)
            }
            .background(Color(red: vehicle.red, green: vehicle.green, blue: vehicle.blue))
            .cornerRadius(12)
            
            // Name
            Text(vehicle.name)
                .font(.title3)
                .fontWeight(.black)
            
            // Category
            Text(vehicle.category)
                .fontWeight(.semibold)
                .foregroundColor(.gray)
        }
    }
}

Adding a Title

To provide context and a visual cue for the grid’s purpose, we add a title at the top. This title is created using the TitleView component and helps users understand the content. Here's how the title is set up:

// Code snippet
struct TitleView: View {
    var title: String
    
    var body: some View {
        HStack {
            Text(title)
                .font(.largeTitle)
                .fontWeight(.heavy)
            Spacer()
        }
        .padding(.horizontal)
        .padding(.top, 15)
        .padding(.bottom, 10)
    }
}

Enhanced-Components Project Board * abilgin88

Conclusion

Creating a vertical grid component with SwiftUI enhances user experience and readability. With the code snippets provided, you have the foundation to build dynamic and engaging interfaces for displaying content.

Further Enhancements

Customize this grid with your data and enjoy the versatility of SwiftUI for UI development. Keep exploring, and happy coding!

As you implement this vertical grid, consider customizing it with more features and animations to align it with your app’s style.