Mobile development

Stage 2 of 7 · 10 lessons · ~3 months

SwiftUI views and layout

Build screens the way your platform expects: small composable pieces, layout, lists, images, forms and theming. The aim is to turn a design into a screen that looks right on a small phone and a large one.

Start: Views as structs

Lessons· one lesson for each topic, in this order

  1. 1Views as structs
  2. 2Xcode previews
  3. 3Modifiers and their order
  4. 4VStack, HStack, ZStack and spacing
  5. 5Safe areas, screen sizes and Dynamic Type
  6. 6@State and bindings
  7. 7List, ForEach and lazy grids
  8. 8Forms and controls
  9. 9SF Symbols, semantic colours and dark mode
  10. 10Apple's Human Interface GuidelinesOptional

Start with· follow one of these

  • CourseFree
    SwiftUI Tutorials (Apple)

    Apple · Beginner

    Apple's own path from views and stacks to lists and navigation

  • CourseFree
    100 Days of SwiftUI

    Paul Hudson (Hacking with Swift) · Beginner

    Days 16 to 35 build six small apps on views, modifiers, lists and animation

Practise

  • Frontend Mentor

    Use a free challenge's mobile design image as the spec for a native screen

Keep handy

Before moving on: Rebuild three screens from a real app you use (a login, a list with images and a detail page) so they adapt to a small and a large phone and support dark mode.

Tauseef's advice
Follow Apple's SwiftUI tutorials to see how the pieces fit, then the Hacking with Swift projects for repetition. Check every screen on the smallest iPhone simulator as well as the newest one.

Mark this stage as not done?