30 Days of SwiftUI - Day 20: Beyond the Basics - Images, Scrolls, Navigation, and Codable Mastery

March 20, 2025

Hello Swift explorers! Today, we're taking our SwiftUI skills to the next level by exploring image resizing, scrolling views, navigation, and advanced Codable data handling. Let's dive in!

Picture Perfect: Resizing Images to Fit the Available Space

We'll learn how to make images fit within their containers while maintaining aspect ratios.

Example: Resizing Images

import SwiftUI

struct ResizedImage: View {
    var body: some View {
        Image("exampleImage") // Replace with your image asset name
            .resizable()
            .scaledToFit()
            .frame(width: 200, height: 200)
            .clipped()
    }
}

struct ResizedImage_Previews: PreviewProvider {
    static var previews: some View {
        ResizedImage()
    }
}

Visual Representation:

An image scaled to fit within a 200x200 frame, maintaining its aspect ratio.
.resizable(): Allows the image to be resized.
.scaledToFit(): Scales the image to fit within the frame while maintaining its aspect ratio.
.frame(): Sets the image's dimensions.
.clipped(): Clips any part of the image that extends beyond the frame.

Infinite Canvas: How ScrollView Lets Us Work with Scrolling Data

ScrollView enables users to scroll through large amounts of content.

Example: ScrollView with Vertical Content

import SwiftUI

struct ScrollViewDemo: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(1...100, id: \.self) { number in
                    Text("Item \(number)")
                        .padding()
                }
            }
        }
    }
}

struct ScrollViewDemo_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewDemo()
    }
}

Visual Representation:

A scrollable list of "Item 1" to "Item 100."

Navigating the Depths: Pushing New Views onto the Stack Using `NavigationLink`

NavigationLink allows users to navigate between views.

Example: Navigation with NavigationLink

import SwiftUI

struct NavigationLinkDemo: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink("Go to Details", destination: DetailView())
            }
            .navigationTitle("Main View")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("Details View")
            .navigationTitle("Detail")
    }
}

struct NavigationLinkDemo_Previews: PreviewProvider {
    static var previews: some View {
        NavigationLinkDemo()
    }
}

Visual Representation:

A "Main View" with a "Go to Details" link that pushes a "Details View" onto the navigation stack.

Hierarchical Data: Working with Hierarchical Codable Data

We'll learn how to handle nested Codable structures.

Example: Hierarchical Codable Structs

import SwiftUI

struct User: Codable {
    let name: String
    let address: Address
}

struct Address: Codable {
    let street: String
    let city: String
}

struct HierarchicalCodable: View {
    var body: some View {
        Text("Hierarchical Codable")
    }
}

Grid Layouts: How to Lay Out Views in a Scrolling Grid

We'll use LazyVGrid to create scrolling grids.

Example: LazyVGrid Layout

import SwiftUI

struct GridView: View {
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 10) {
                ForEach(1...20, id: \.self) { number in
                    Text("Item \(number)")
                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 50)
                        .background(Color.gray.opacity(0.3))
                        .cornerRadius(8)
                }
            }
            .padding()
        }
    }
}

struct GridView_Previews: PreviewProvider {
    static var previews: some View {
        GridView()
    }
}

Visual Representation:

A scrollable grid with 2 columns, displaying "Item 1" to "Item 20."

Specific Data Loading: Loading a Specific Kind of Codable Data

We'll learn how to load specific Codable types from data sources.

Example (Conceptual): Loading Specific Codable Data

func loadData<T: Codable>(from file: String) -> T? {
    if let url = Bundle.main.url(forResource: file, withExtension: "json") {
        do {
            let data = try Data(contentsOf: url)
            let decodedData = try JSONDecoder().decode(T.self, from: data)
            return decodedData
        } catch {
            print("Error loading data: \(error)")
        }
    }
    return nil
}

Universal Loading: Using Generics to Load Any Kind of Codable Data

We'll use generics to create a reusable data loading function.

Example: Generic Codable Data Loading

func loadGenericData<T: Codable>(from file: String) -> T? {
    // Same implementation as above
}

// Example usage
let userData: User? = loadGenericData(from: "user")

Combining Data: Merging Codable Structs

We'll explore how to merge data from different Codable structs.

Example (Conceptual): Merging Codable Structs

struct Part1: Codable {
    let id: Int
    let name: String
}

struct Part2: Codable {
    let age: Int
    let city: String
}

struct Merged: Codable {
    let id: Int
    let name: String
    let age: Int
    let city: String
}

// Conceptual merging logic

🔥 Conclusion

Day 20 has been a deep dive into advanced SwiftUI techniques. We've covered image resizing, scrolling, navigation, and sophisticated Codable data handling. Keep exploring, and you'll be building more complex and feature-rich apps!

Follow me on Linkedin: igatitech 🚀🚀🚀

Search This Blog

iGatiTech