Learn SwiftUI for iOS 13

Add to favorites

Learn how to code custom UIs, animations, gestures and components in Xcode 11

Play video

This Course

This course is unlike any other. We care about design and want to make sure that you get better at it in the process. It was written for designers and developers who are passionate about collaborating and building real apps for iOS and macOS. While it's not one codebase for all apps, you learn once and can apply the techniques and controls to all platforms with incredible quality, consistency and performance. It's beginner-friendly, but it's also packed with design tricks and efficient workflows for building great user interfaces and interactions.

SwiftUI makes it super easy to animate and add gestures to your app. The code is lightweight and easy to understand, even for newcomers who come from React or Flutter.

Requirements

Minimal coding experience required, such as in HTML and CSS. Please note that Xcode 11 and Catalina are essential. Once you get everything installed, it'll get a lot friendlier! I added a bunch of troubleshoots at the end of this page to help you navigate the issues you might encounter.

States and Animations

Transitions are like Magic Move in Keynote. You only need to set the states and SwiftUI will figure out for you the transition between the two states.

@State var show = true

.onTapGesture {
    self.show.toggle()
}

Animations

SwiftUI provides a number of ways to animate your transitions. They even have their own physics-based built-in functions that allows you to use overshoot and apply bounciness to your animations.

// Linear
.animation(.linear)

// Ease Animation
.animation(.easeInOut(duration: 0.3))

// Animation with Delay
.animation(Animation.easeOut(duration: 0.6).delay(0.1))

// Spring
.animation(.spring())

Stacks

If you're new to stacks in SwiftUI, I suggest using Spacer a lot. By default, views take min size of child elements. This is an image I made to help you understand.

Here are some of the tricks I've learned while using Stacks in SwiftUI.

// Stack views vertically and take full height
VStack {
  Spacer()
}

// Stack views horizontally and take full width
HStack {
  Spacer()
}

// Gap between views
VStack(spacing: 20) {}

// Stack views on top of each other in a Z (depth) unit
ZStack { 
    VStack {}
    HStack {}
}

// Take maximum width without Spacer()
.frame(minWidth: 0, maxWidth: .infinity)

// Align elements to the top left
ZStack(alignment: .topLeading) {}

SwiftUI for All Devices

SwiftUI works for iPad, Mac, Apple TV and Watch. There are minimal code changes and you can reuse a lot of the same components. The Stacks, Controls and Layout system will work the same, with a few adjustments. The philosophy for SwiftUI is not to write once, apply everywhere, but to learn once, apply anywhere.

For example, modals are automatically contextual giving you the dismiss gesture and sizing them properly for you. Most controls and data work across all platforms, with some minor layout changes and navigation. Those controls will be automatically translated for you, using the appropriate UI for their specific platform. For example, a Picker will look like a List in iOS, but it'll look like a drop-down for Mac.

// All
ZStack, VStack, HStack, TabView
NavigationView, Picker, Stepper, Slider, etc.
SF Symbols

// iPad / Mac
TabView

// Mac
Keyboard Shortcuts

Drag and Drop UI

Views, Modifiers and Images can be dragged to the Preview and to the code. Everything you build are automatically translated to production code.

In code just like in the Preview, you can Command + Click to get a contextual menu where you can Inspect the element and access a bunch of useful options like Embed in VStack or Extract to Subview.

Modifiers

You can easily drag and drop Modifiers next to your Views and they can be enhanced with new properties such as colors, transforms, visual effects, built-in controls and gestures.

.frame(width: 100, height: 100)
.background(Color.blue)
.shadow(radius: 10)
.offset(x: 10, y:10)
.blur()
.padding()

SF Symbols

You'll need to download the newest San Francisco fonts from Apple to open the design files. Apple provides 1000 icons in their new SF Symbols app which can be used as a vector asset in Xcode or in the design tool.

In SwiftUI, you can easily generate icons from SF Symbols using their name. Make sure to download the app. Additionally, you can customize the size (small, medium, large) and change the icon color.

Image(systemName: item.icon)
    .imageScale(.large)
    .foregroundColor(.blue)
    .frame(width: 32, height: 32)

Views and Controls

Basic elements you'd find in design tools or more complex and interactive controls like the Toggle, Slider and Data picker are available for free in SwiftUI. They're extremely easy to style and to customize the functionalities and the data.

Text
Image
Rectangle
Toggle
Picker
Stepper
Slider

Visual Effects

SwiftUI gives you a bunch of visual effects for free so that you can play with them. Most importantly, you can even animate them and it'll transition nicely for you!

.rotationEffect(Angle(degrees: 30))
.rotation3DEffect(Angle(degrees: 60), axis: (x: 0, y: 10, z: 0))
.scaleEffect(0.9)
.blendMode(.hardLight)
.blur(radius: 20)

UI Components

Just like in your design system or in React, you should break down your UI as much you can into components. To create a new component, Command + Click on a container like a VStack and select Extract to Subview.

VStack {
    Text("Card Back")
}
.frame(width: 340, height: 220.0)

Reference the component by writing its name. Components are Views and can still receive additional Modifiers without even passing properties!

CardView()
    .background(show ? Color.red : Color.blue)
    .cornerRadius(10)

Live Preview

What's interesting about SwiftUI is that all the changes that you make is live, including the data that you work with. The Debug code allows you to quickly test data and preview environments in Swift UI. It's really powerful for quick iterations.

You can preview your SwiftUI design on multiple devices at the same time. You have to Group your Content Views first and you can the preview and data settings. In this case, we're making the Preview window to be adaptive. On top of that, you can Pin your preview so that you'll always see the same screen as you make code changes.

Group {
    ContentView()
    ContentView()
        .previewLayout(.sizeThatFits) // Preview components
        .environment(\.sizeCategory, .extraExtraExtraLarge) // Accessibility
        .previewDevice("iPhone 8")  // Specific device
}

Dark Mode

To preview your layout in Dark Mode, you need to add a modifier to the Content View in the Debug area. Please note that to make your design work well with Dark mode, you should use their default colors and controls like the Navigation View as much as possible.

ContentView(courses: testData)
    .environment(\.colorScheme, .dark)

Declarative Code

In SwiftUI, you'll write shorter code that's declarative, so it's all about telling what the UI should do. It's readable and straight to the point.

Auto Indent Code

As you edit your code, it will eventually become hard to read, so you can use Re-Indent in Xcode to keep everything clean. This is a bit similar to Prettier, but you have to select the code and press Control + I.

Round to Nearest Pixel

SwiftUI does the pixel fitting for you so that your views will look sharp all the time.

Swift Packages

Swift now has a package manager that lets you easily install third-party libraries from the community. To install a Library, go to your Project Settings > Swift Packages.

Install Catalina and Xcode 11

Catalina and Xcode 11 are required to run SwiftUI with the live preview features. To download Xcode, go to the Mac App Store and search for Xcode. Once everything is installed, you'll have to install a bunch of new components and follow the instructions.

Your First SwiftUI App

To create an app, click on Create a new Xcode project. Then, select Single-View app. After, you have to set the project settings. The identifier is typically your domain name in reverse. Finally, make sure to check Use SwiftUI.

After you finish setting up your app, you'll be greeted with the SwiftUI code editor alongside the Preview. Make sure to click on Resume at the top right to see the results in real-time. You can also hide the Left navigation and right inspector by clicking on the top right buttons.

Importing Assets

If you use images or glyphs, you have to import PNG, JPG or PDF assets. Photos are usually saved as JPG while vector glyphs like icons should be in PDF. PNG are used for more complex transparent images that require a level of accuracy and pixel perfection that can't be replicated in PDF, like gradients, drop shadows infused with bitmaps.

App Icon

In Sketch, you can find a template to create your App Icon. Once you customize the visual, you can export everything to a folder. Then, drag and drop the images into the App Icon inside the Assets. Make sure to remove the unassigned images and move the missing 3 images: Icon.png to 1024, icon_83.5@2x.png to iPad 83.5pt (2x), icon_76@2x.png to iPad 76pt 2x.

Color Sets in Assets

I recommend setting the colors for your app in advance directly in the Assets. Like this, you can easily reference those colors from the Inspect and from the code. On top of that, those colors will support Light/Dark modes. I prepared an Assets.xcassets folder where you can expand and drag and drop the Colors folder to your assets.

Colors set in Assets can be referenced in code like this.

Color("accent")

Keyboard Shortcuts

The most important Xcode keyboard shortcuts are the following:

Cmd + Click: Contextual menu for code or UI.
Option + Click: Quick info for code.
Cmd + 0: Show/hide Navigator.
Cmd + Shift + L: Insert new element.
Cmd + R: Run the app.
Cmd + . : Stop the app.

App Name

To change your App Name that appears next to your App Icon, you need to go to your Project Settings > Info > Bundle Name.

Test on Device

Using your app on your device is a magical experience. Keep in mind that what you're building is fully native and extremely performant. To be able to test your app on your phone, you'll need a free developer account, and to connect via USB.

Tutorials

The tutorials made by Apple are fantastic and extremely well-executed. They tend to speak more to developers though and the complexity jumps VERY quickly. But after you take my course, I believe that you'll be able to go back to those tutorials and understand them a lot better.

SwiftUI by example

If you want quick references to how you do certain things in SwiftUI, I suggest the excellent quick tutorials by Paul Hudson from Hacking with Swift.

Resources

It would be impossible to cover everything within such a short period, so it's important to continue your journey with awesome resources. This is an excellent list.

Newsletters

There are excellent newsletters for getting the latest resources about iOS: iOS Dev Weekly and iOS Goodies.

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Videos

Assets

ePub

Learn SwiftUI for iOS 13

Learn how to code custom UIs, animations, gestures and components in Xcode 11