30 Days of SwiftUI - Day 18: Testing Your SwiftUI Skills: Dates, Lists, and Animations!

Hello Swift learners! Today, we're putting our knowledge to the test with some practical questions based on what we've learned in the past few days. Let's sharpen our skills and solidify our understanding of dates, lists, and animations.

Practical Tests

Test 1: Date and Time Picker with Formatted Output

Question: Create a SwiftUI view with a DatePicker that allows the user to select a date and time. Display the selected date and time in a formatted string using a DateFormatter with a long date style and a short time style.

Test 2: Dynamic Word List with Validation

Question: Build a SwiftUI view with a TextField to enter words and a button to add them to a list. Use UITextChecker to validate each word before adding it. Display the list of valid words.

Test 3: Animated Toggle with Custom Transition

Question: Create a SwiftUI view with a button that toggles the visibility of a text view. When the text view appears or disappears, use a custom transition that fades the text in and out.

Answers and Complete SwiftUI Code

Answer 1: Date and Time Picker with Formatted Output

import SwiftUI

struct DatePickerTest: View {
    @State private var selectedDate = Date()

    var body: some View {
        VStack {
            DatePicker("Select Date and Time", selection: $selectedDate)
                .datePickerStyle(GraphicalDatePickerStyle())
                .padding()

            Text("Selected Date: \(formattedDate())")
                .padding()
        }
    }

    func formattedDate() -> String {
        let formatter = DateFormatter()
        formatter.dateStyle = .long
        formatter.timeStyle = .short
        return formatter.string(from: selectedDate)
    }
}

struct DatePickerTest_Previews: PreviewProvider {
    static var previews: some View {
        DatePickerTest()
    }
}

Answer 2: Dynamic Word List with Validation

import SwiftUI
import UIKit

struct WordListTest: View {
    @State private var words = [String]()
    @State private var newWord = ""
    let textChecker = UITextChecker()

    var body: some View {
        VStack {
            TextField("Enter a word", text: $newWord)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Button("Add Word") {
                if isValidWord(newWord) {
                    words.append(newWord)
                    newWord = ""
                } else {
                    print("Invalid Word")
                }
            }
            .padding()

            List(words, id: \.self) { word in
                Text(word)
            }
        }
    }

    func isValidWord(_ word: String) -> Bool {
        let range = NSRange(location: 0, length: word.utf16.count)
        let misspelledRange = textChecker.rangeOfMisspelledWord(in: word, range: range, startingAt: 0, wrap: false, language: "en")
        return misspelledRange.location == NSNotFound && !word.isEmpty
    }
}

struct WordListTest_Previews: PreviewProvider {
    static var previews: some View {
        WordListTest()
    }
}

Answer 3: Animated Toggle with Custom Transition

import SwiftUI

struct FadeTransition: ViewModifier {
    let opacity: Double

    func body(content: Content) -> some View {
        content.opacity(opacity)
    }
}

extension AnyTransition {
    static var fade: AnyTransition {
        .modifier(active: FadeTransition(opacity: 0), identity: FadeTransition(opacity: 1))
    }
}

struct TransitionTest: View {
    @State private var showText = false

    var body: some View {
        VStack {
            Button("Toggle Text") {
                withAnimation {
                    showText.toggle()
                }
            }
            if showText {
                Text("Custom Fade")
                    .transition(.fade)
            }
        }
    }
}

struct TransitionTest_Previews: PreviewProvider {
    static var previews: some View {
        TransitionTest()
    }
}

Key Takeaways

• Date Handling: We reinforced the use of DatePicker and DateFormatter to work with dates and times.
• List and Validation: We combined List, TextField, and UITextChecker to create a dynamic and validated word list.
• Custom Transitions: We created a custom fade transition using ViewModifier and AnyTransition.

By working through these practical tests, you've strengthened your understanding of key SwiftUI concepts. Keep practicing, and you'll be building more complex and engaging apps in no time!

Follow me on Linkedin: igatitech 🚀🚀🚀