30 Days of SwiftUI - Day 11: Building Interactive SwiftUI Apps

     

🚀 Welcome to SwiftUI

SwiftUI is Apple's modern UI toolkit designed to help developers build beautiful, responsive apps with less code.

🌟 What Makes SwiftUI Special?

• Declarative syntax for easy layout.

• Automatic support for dynamic type, dark mode, and localization.

• Smooth integration with Swift and other Apple frameworks.

---

🏗️ Building Your First SwiftUI App

Example Code:

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .font(.largeTitle)
            .padding()
    }
}

Output: ✅ Displays "Hello, SwiftUI!" in large text with padding.

---

📋 Creating Forms for User Input

Example Code:

import SwiftUI

struct ContentView: View {
    @State private var name = ""

    var body: some View {
        Form {
            TextField("Enter your name", text: $name)
            Text("Hello, \(name)")
        }
    }
}

Output: ✅ Displays a form where users can type their name, which is displayed below.

---

📂 Adding a Navigation Bar

Example Code:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Welcome to SwiftUI!")
                .navigationTitle("Home")
        }
    }
}

Output: ✅ Displays "Welcome to SwiftUI!" with "Home" as the navigation bar title.

---

🔄 Managing Program State

Example Code:

import SwiftUI

struct CounterView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button("Increment") {
                count += 1
            }
        }
    }
}

Output: ✅ A button that updates the count on each tap.

---

🔗 Binding State to UI Controls

Example Code:

import SwiftUI

struct ParentView: View {
    @State private var toggleStatus = false

    var body: some View {
        ToggleView(isOn: $toggleStatus)
    }
}

struct ToggleView: View {
    @Binding var isOn: Bool

    var body: some View {
        Toggle("Switch", isOn: $isOn)
    }
}

Output: ✅ Toggle updates the parent view’s state in real-time.

---

🔁 Creating Views in a Loop

Example Code:

import SwiftUI

struct ContentView: View {
    let names = ["Alice", "Bob", "Charlie"]

    var body: some View {
        List(names, id: \..self) { name in
            Text(name)
        }
    }
}

Output: ✅ Displays a dynamic list of names.

---

🖋️ Capturing User Input with TextField

Example Code:

import SwiftUI

struct ContentView: View {
    @State private var username = ""

    var body: some View {
        VStack {
            TextField("Enter username", text: $username)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            Text("Your username is \(username)")
        }
    }
}

Output: ✅ Displays the entered username in real-time.

---

🔄 Adding Pickers for User Choices

Example Code:

import SwiftUI

struct ContentView: View {
    @State private var selectedColor = "Red"
    let colors = ["Red", "Blue", "Green"]

    var body: some View {
        Picker("Choose a color", selection: $selectedColor) {
            ForEach(colors, id: \..self) { color in
                Text(color)
            }
        }
        .pickerStyle(SegmentedPickerStyle())
    }
}

Output: ✅ Displays a segmented picker for color selection.

---

💰 Building a Tip Calculator

Example Code:

import SwiftUI

struct ContentView: View {
    @State private var billAmount = ""
    @State private var tipPercentage = 15

    var totalAmount: Double {
        let bill = Double(billAmount) ?? 0
        return bill + (bill * Double(tipPercentage) / 100)
    }

    var body: some View {
        Form {
            TextField("Enter bill amount", text: $billAmount)
                .keyboardType(.decimalPad)
            Text("Total Amount: $\(totalAmount, specifier: "%.2f")")
        }
    }
}

Output: ✅ Displays total amount including a 15% tip calculation.

---

⌨️ Hiding the Keyboard

Example Code:

import SwiftUI

struct ContentView: View {
    @State private var text = ""

    var body: some View {
        VStack {
            TextField("Type something...", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            Button("Done") {
                hideKeyboard()
            }
        }
    }
}

extension View {
    func hideKeyboard() {
        UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

Output: ✅ Keyboard dismisses when the "Done" button is tapped.

---

📌 Summary: SwiftUI in Action

✅ Mastered SwiftUI's structure and basics. ✅ Created interactive forms, navigation bars, and pickers. ✅ Built a tip calculator and efficiently managed user input. ✅ Gained expertise in state management, ForEach, and @Binding.

---

Follow me on Linkedin: igatitech 🚀🚀🚀