UI Fundamentals with SwiftUI, UIKit, Layout, and Navigation

Declarative vs Imperative UI

SwiftUI is declarative. You describe what the interface should look like for a given state. UIKit is more imperative, where you create and configure views directly and update them over time. Students should understand both because many production apps still contain UIKit, even when new features are written in SwiftUI.

Core SwiftUI Layout Building Blocks

struct ProfileCard: View {
    let name: String

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text(name)
                .font(.title2)
                .bold()
            Text("Premium Member")
                .foregroundColor(.secondary)
        }
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(Color(.systemBackground))
    }
}

Views like VStack, HStack, ZStack, Spacer, and ScrollView are the basic language of SwiftUI layout.

UIKit Layout Awareness

UIKit uses Auto Layout constraints, view hierarchies, and view controller coordination. Even if you prefer SwiftUI, UIKit knowledge remains useful for legacy maintenance, SDK integration, advanced customization, and embedding one UI system inside another.

Navigation Patterns

NavigationStack {
    List(products) { product in
        NavigationLink(product.name) {
            ProductDetailView(product: product)
        }
    }
}

Common navigation models include stack navigation, tab navigation, modal presentation, sheets, full-screen covers, onboarding flows, and deep-link routing.

Design Systems and Reusable Components

Real products rarely use raw controls everywhere. They define reusable buttons, typography tokens, color semantics, spacing systems, card patterns, form components, and stateful feedback patterns. Building a small design system early improves consistency and development speed.

Real-World UI Example

An e-commerce app home screen may combine a hero banner, category chips, personalized offers, recommendation cards, cart badge state, loading placeholders, pull-to-refresh behavior, and analytics tracking. That one screen already requires layout discipline, state thinking, navigation design, and performance awareness.