how to build an image gallery that displays a grid of images using SwiftUI. This example will demonstrate how to use LazyVGrid for creating a grid layout and how to handle image loading.

Image Gallery

import SwiftUI

struct ImageGalleryView: View {
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    let imageNames = [
        "image1", "image2", "image3", "image4", "image5",
        "image6", "image7", "image8", "image9", "image10"
    ]
    
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVGrid(columns: columns, spacing: 20) {
                    ForEach(imageNames, id: \.self) { imageName in
                        Image(imageName)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 100, height: 100)
                            .clipped()
                            .cornerRadius(8)
                    }
                }
                .padding()
            }
            .navigationBarTitle("Image Gallery")
        }
    }
}

@main
struct ImageGalleryApp: App {
    var body: some Scene {
        WindowGroup {
            ImageGalleryView()
        }
    }
}

Explanation:

  1. Grid Configuration:
    • let columns = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]: Defines a grid with three equally flexible columns.
  2. Image Names Array:
    • let imageNames = [...]: An array of image names. Replace these with the actual names of your image assets.
  3. ImageGalleryView Struct:
    • NavigationView: Wraps the content in a NavigationView to provide a navigation bar.
    • ScrollView: Wraps the grid in a ScrollView to allow vertical scrolling.
    • LazyVGrid: Creates a grid layout with the specified columns and spacing.
    • ForEach: Iterates over the image names to create image views.
    • Image(imageName): Loads an image from the asset catalog.
    • Image Modifiers:
      • .resizable(): Makes the image resizable.
      • .aspectRatio(contentMode: .fill): Scales the image to fill its frame.
      • .frame(width: 100, height: 100): Sets the size of the image.
      • .clipped(): Clips the image to the frame.
      • .cornerRadius(8): Rounds the corners of the image.
  4. ImageGalleryApp Struct:
    • Sets up the main window of the app with ImageGalleryView as its root view.

How to Use:

  • Replace the image names in the imageNames array with the names of your image assets.
  • Copy the code into a new SwiftUI project in Xcode.
  • Add the corresponding images to the asset catalog in Xcode.
  • Run the project on a simulator or device to see the image gallery in action.

Image Gallery Code Explanation

import SwiftUI
  • Imports the SwiftUI framework, which is necessary for building the user interface.

Grid Configuration

struct ImageGalleryView: View {
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
  • let columns: Defines a grid with three equally flexible columns using GridItem(.flexible()). This ensures that each column will adjust its width to fit within the available space.

Image Names Array

    let imageNames = [
        "image1", "image2", "image3", "image4", "image5",
        "image6", "image7", "image8", "image9", "image10"
    ]
  • let imageNames: An array of image names. Replace these with the actual names of your image assets in your Xcode project.

ImageGalleryView Struct

    var body: some View {
        NavigationView {
            ScrollView {
                LazyVGrid(columns: columns, spacing: 20) {
                    ForEach(imageNames, id: \.self) { imageName in
                        Image(imageName)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 100, height: 100)
                            .clipped()
                            .cornerRadius(8)
                    }
                }
                .padding()
            }
            .navigationBarTitle("Image Gallery")
        }
    }
}

  • NavigationView: Wraps the content in a NavigationView to provide a navigation bar. This allows for better structure and navigation within the app.
  • ScrollView: Wraps the grid in a ScrollView to allow vertical scrolling. This is important when the content exceeds the screen height.
  • LazyVGrid: Creates a grid layout with the specified columns and spacing.
    • columns: Uses the columns array defined earlier to determine the grid structure.
    • spacing: 20: Sets the spacing between grid items to 20 points.
  • ForEach: Iterates over the image names to create image views.
    • id: \.self: Uses the image name as the unique identifier for each item in the ForEach.
  • Image(imageName): Loads an image from the asset catalog using the provided name.
    • .resizable(): Makes the image resizable.
    • .aspectRatio(contentMode: .fill): Scales the image to fill its frame while maintaining the aspect ratio.
    • .frame(width: 100, height: 100): Sets the size of the image to 100×100 points.
    • .clipped(): Clips the image to the frame, ensuring no overflow.
    • .cornerRadius(8): Rounds the corners of the image with an 8-point radius.
  • .padding(): Adds padding around the grid to provide some space from the edges of the screen.
  • .navigationBarTitle("Image Gallery"): Sets the title of the navigation bar to “Image Gallery”.

Main App Entry Point

@main
struct ImageGalleryApp: App {
    var body: some Scene {
        WindowGroup {
            ImageGalleryView()
        }
    }
}
  • @main: Marks the entry point of the app.
  • struct ImageGalleryApp: App: Defines the main app struct conforming to the App protocol.
  • var body: some Scene: Defines the app’s main scene.
  • WindowGroup: Creates a new window group for the app, which manages the app’s window content.
  • ImageGalleryView(): Sets ImageGalleryView as the root view of the app.

How to Use

  1. Add Images: Ensure the images named in the imageNames array are added to your Xcode project’s asset catalog.
  2. Copy the Code: Copy the code into a new SwiftUI project in Xcode.
  3. Run the App: Run the project on a simulator or device to see the image gallery in action.