Zenler Player
Your course is loading. Hang tight.
A design-oriented course on SwiftUI
Back to curriculum
0% Complete
0% Complete
1.1 SwiftUI Roadmap
1.2 UIKit to SwiftUI
2.1 Create your First Project with Xcode 14
2.2 Navigate Your Files in Xcode 14
2.3 Working with the Navigator Area
2.4 Introduction to SwiftUI Views
2.5 Using the SwiftUI Preview to speed up your development
2.6 How to add an App Icon
2.7 Launch Screen
2.8 Find Help with the SwiftUI Documentation
2.9 Typical Errors and How to Avoid Them
Finished Project for this Section
3.1 VStack, HStack and ZStack
3.2 Spacer and Divider
3.3 Padding and IgnorSafeArea
3.4 Image Sizing
3.5 Frame
Quiz time
3.6 Background and Overlay
3.7 Material Backgrounds
3.8 Position and Offset
3.9 SwiftUI Layout System
Layout Challenge 1
Layout Challenge 2
3.10 Group and @ViewBuilder
3.11 GroupBox and Styling
3.12 ControlGroup
3.13 Foreach and Identifiable
3.14 ScrollView
3.15 Scrolling Programmatically
3.16 EdgeInsets
3.17 LazyVStack and LazyHStack
3.18 LazyVGrid and LazyHGrid
3.19 Complex Example with Images
3.20 Modifying Alignment Guides
3.21 Alignment Guide Examples
3.22 Custom Alignment Guides
2.23 Example Movie Detail View for Custom Alignment Guides
2.24 Grid View
2.25 Grid View more Examples
Finished Project for this Section
4.1 Motivation behind a Style Guide
4.2 Adding custom Colors
4.3 Using Color
4.4 Include Colors in your Style Guide
4.5 How to create different Gradients
4.6 Where to use Gradients
4.7 Including Gradients in your Style Guide
4.8 Create Shadows and Card Views
4.9 How to write your own view modifiers
4.10 Introduction to system fonts
4.11 Using custom fonts with dynamic type
4.12 Styling a example text view
4.13 Defining a Typography Style Guide
4.14 How Button styles work on different platforms
4.15 How to define your own button style
5.1 Exploring different system provided shapes
5.2 Drawing shapes with stroke, fill and trim
5.3 How to transform your views and shapes with modifiers
5.4 How to create a custom shape
5.5 Example: Drawing an Arrow
5.6 How to use, scale and style system icons
5.7 Working with images: resizing
5.8 Working with images: brightness, saturation, and opacity
5.9 How you could include images in your project
5.10 How to make your own icons
5.11 How to include icons into your macOS apps
5.12 rotation3DEffect
6.1 How @State and @Binding help us
6.2 Let's use animations
6.3 @ObservedObject: How to work with more complex data flows
6.4 @EnvironmentObject: The place to be
7.1 What we will build in this section
7.2 Let's make a new project with a Master-Detail Navigation
7.3 Working with Lists
7.4 NavigationView: NavigationBarTitle, NavigationBarItems and NavigationLink
7.5 TabView
7.6 Using a new Tab in TabView to show different Presentation options
7.7 How to use popover
7.8 How to use Alerts
7.9 How to use ActionSheet
7.10 How to show a view in Modal Presentation
7.11 Advanced Navigation
7.12 Advanced Navigation: programmatically navigate anywhere
7.13 Different Style for iPhone and iPad
7.14 Let's make a Mac app
7.15 Special feature for macOS: make a new window!
8.1 Introduction to Animation
8.2 How to make Animation Go: Implicit Animations
8.3 How to make Animation Go: Explicit Animations
8.4 What is the difference between implicit and Explicit Animations?
8.5 How implicit animations work on stack views
8.6 How to make Animations go: automatically when the view appears
8.7 Changing the timing of an animation: timing curves
8.8 Changing the timing of an animation: repeat, delay and speed
8.9 Transitions: Animate views appearing and disappearing
8.10 Transition: example with lists
8.11 Transition: Animate within a appearing stack
8.12 Transition: Example
8.13 What is Animatable?
8.14 How to make gradients animatable
8.15 Animating shapes with Animatable
8.16 Animating spaces with trim and StrokeStyle
8.17 Creating your own progress indicator
8.18 Onboarding Example: Sequenced Animation
Coding Callenge: Success state
Coding Callenge: Solution
9.1 Introduction to Adaptive layout
9.2 Walk through to our sample application: Inspiring Quotes
9.3 How Size Classes work
9.4 Knowing the device orientation and window size
9.5 Some Basics: ViewBuilder, Closures and Generics
9.6 Let's make our own custom stack views
9.7 How to make a grid view
9.8 Warning: NavigationLinks and conditional layout
9.9 How to make your WindowSizeManager work with the SwiftUI preview
10.1 Walk-through of our sample application
10.2 Using .onTap and .onLongPress
10.3 Add a gesture with the .gesture() modifier
10.4 DragGesture and how to implement a swipe
10.5 MagnificationGesture and RotationGesture: how to change an image view
10.6 Composing gestures for more complex interaction
10.7 How to handel competing gestures
10.8 Example: Using gestures to create a photo preview editor
10.9 Example: Using a Swipe gesture for amazing onboarding animations
10.1 Slider
10.2 Stepper
10.3 Toggle
10.4 Picker
10.5 DatePicker
10.6 TextField and SecureField
10.7 How to make a multiline TextField if SwiftUI does not give you one
10.8 Example: Make a Settings view with Forms
12.1 AcitvityIndicator
12.2 MapKit and how to make your code work on multiple platforms
12.3 PageControl
12.4 PageViewController
12.5 Show a website with WebKit
12.6 SignInWithAppleButton
12.7 Example: Make a drawing app with PencilKit
12.8 Example: Make a drawing app part 2
13.1 Let's start by creating a bad example for code organisation
13.2 What is the idea behind MVVM and why does it work so well with SwiftUI?
13.3 Let's use MVVM to improve our example code
14.1 Introduction to user experience design for mobile applications
14.2 Make your first fake view
14.3 Add a fake data model to prototype faster
14.4 Make a fake grid view with HStacks and VStack
14.5 Fake a map view with nearby toast
14.5 Fake a list with detail toast Images
14.6 How to show all app idea on the device
14.7 How to fake user interactions and transitions (with MatchingGeometryEffect)
14.8 Case study: the IKEA app for iPad
14.9 Design considerations for iPad and iOS 14
14.10 Sketching out the new iPad version of the IKEA app
14.11 Let's make a sidebar list as the main navigation for the IKEA app
14.12 How to use images to fast prototype the inspirational section of the IKEA app
14.13 Integrating a fake virtual walkthrough of IKEA stores
14.14 Integrating Newsroom and Offers
14.15 More complexe navigation in Product section
14.16 Final wrap up: Wish list and Mood-board
1. Introduction
1.1 SwiftUI Roadmap
Preview
1.2 UIKit to SwiftUI
2. Getting started with SwiftUI
2.1 Create your First Project with Xcode 14
Preview
2.2 Navigate Your Files in Xcode 14
Preview
2.3 Working with the Navigator Area
Preview
2.4 Introduction to SwiftUI Views
Preview
2.5 Using the SwiftUI Preview to speed up your development
Preview
2.6 How to add an App Icon
Preview
2.7 Launch Screen
Preview
2.8 Find Help with the SwiftUI Documentation
Preview
2.9 Typical Errors and How to Avoid Them
Preview
Finished Project for this Section
3. Layout Basics
3.1 VStack, HStack and ZStack
Preview
3.2 Spacer and Divider
Preview
3.3 Padding and IgnorSafeArea
3.4 Image Sizing
3.5 Frame
Preview
Quiz time
3.6 Background and Overlay
3.7 Material Backgrounds
Preview
3.8 Position and Offset
3.9 SwiftUI Layout System
Layout Challenge 1
Preview
Layout Challenge 2
Preview
3.10 Group and @ViewBuilder
3.11 GroupBox and Styling
3.12 ControlGroup
3.13 Foreach and Identifiable
3.14 ScrollView
3.15 Scrolling Programmatically
3.16 EdgeInsets
3.17 LazyVStack and LazyHStack
3.18 LazyVGrid and LazyHGrid
3.19 Complex Example with Images
3.20 Modifying Alignment Guides
3.21 Alignment Guide Examples
3.22 Custom Alignment Guides
2.23 Example Movie Detail View for Custom Alignment Guides
2.24 Grid View
Preview
2.25 Grid View more Examples
Preview
Finished Project for this Section
4. Styling
4.1 Motivation behind a Style Guide
Preview
4.2 Adding custom Colors
4.3 Using Color
4.4 Include Colors in your Style Guide
4.5 How to create different Gradients
4.6 Where to use Gradients
4.7 Including Gradients in your Style Guide
4.8 Create Shadows and Card Views
4.9 How to write your own view modifiers
4.10 Introduction to system fonts
4.11 Using custom fonts with dynamic type
4.12 Styling a example text view
4.13 Defining a Typography Style Guide
4.14 How Button styles work on different platforms
4.15 How to define your own button style
5. Images, Icons and Drawings
5.1 Exploring different system provided shapes
5.2 Drawing shapes with stroke, fill and trim
5.3 How to transform your views and shapes with modifiers
5.4 How to create a custom shape
5.5 Example: Drawing an Arrow
5.6 How to use, scale and style system icons
5.7 Working with images: resizing
5.8 Working with images: brightness, saturation, and opacity
5.9 How you could include images in your project
5.10 How to make your own icons
5.11 How to include icons into your macOS apps
5.12 rotation3DEffect
6. Data Flow in SwiftUI
6.1 How @State and @Binding help us
6.2 Let's use animations
6.3 @ObservedObject: How to work with more complex data flows
6.4 @EnvironmentObject: The place to be
7. App Architecture with SwiftUI
7.1 What we will build in this section
7.2 Let's make a new project with a Master-Detail Navigation
7.3 Working with Lists
7.4 NavigationView: NavigationBarTitle, NavigationBarItems and NavigationLink
7.5 TabView
7.6 Using a new Tab in TabView to show different Presentation options
7.7 How to use popover
7.8 How to use Alerts
7.9 How to use ActionSheet
7.10 How to show a view in Modal Presentation
7.11 Advanced Navigation
7.12 Advanced Navigation: programmatically navigate anywhere
7.13 Different Style for iPhone and iPad
7.14 Let's make a Mac app
7.15 Special feature for macOS: make a new window!
8. Animation
8.1 Introduction to Animation
Preview
8.2 How to make Animation Go: Implicit Animations
8.3 How to make Animation Go: Explicit Animations
8.4 What is the difference between implicit and Explicit Animations?
8.5 How implicit animations work on stack views
8.6 How to make Animations go: automatically when the view appears
8.7 Changing the timing of an animation: timing curves
8.8 Changing the timing of an animation: repeat, delay and speed
8.9 Transitions: Animate views appearing and disappearing
8.10 Transition: example with lists
8.11 Transition: Animate within a appearing stack
8.12 Transition: Example
8.13 What is Animatable?
8.14 How to make gradients animatable
8.15 Animating shapes with Animatable
8.16 Animating spaces with trim and StrokeStyle
8.17 Creating your own progress indicator
8.18 Onboarding Example: Sequenced Animation
Coding Callenge: Success state
Coding Callenge: Solution
9. Adaptive Layout
9.1 Introduction to Adaptive layout
9.2 Walk through to our sample application: Inspiring Quotes
9.3 How Size Classes work
9.4 Knowing the device orientation and window size
9.5 Some Basics: ViewBuilder, Closures and Generics
9.6 Let's make our own custom stack views
9.7 How to make a grid view
9.8 Warning: NavigationLinks and conditional layout
9.9 How to make your WindowSizeManager work with the SwiftUI preview
10. Gestures
10.1 Walk-through of our sample application
Preview
10.2 Using .onTap and .onLongPress
10.3 Add a gesture with the .gesture() modifier
10.4 DragGesture and how to implement a swipe
10.5 MagnificationGesture and RotationGesture: how to change an image view
10.6 Composing gestures for more complex interaction
10.7 How to handel competing gestures
10.8 Example: Using gestures to create a photo preview editor
10.9 Example: Using a Swipe gesture for amazing onboarding animations
11. Control Views
10.1 Slider
10.2 Stepper
10.3 Toggle
10.4 Picker
10.5 DatePicker
10.6 TextField and SecureField
10.7 How to make a multiline TextField if SwiftUI does not give you one
10.8 Example: Make a Settings view with Forms
12. Integration with UIKit and AppKit
12.1 AcitvityIndicator
12.2 MapKit and how to make your code work on multiple platforms
12.3 PageControl
12.4 PageViewController
12.5 Show a website with WebKit
12.6 SignInWithAppleButton
12.7 Example: Make a drawing app with PencilKit
12.8 Example: Make a drawing app part 2
13. Advanced SwiftUI: MVVM
13.1 Let's start by creating a bad example for code organisation
13.2 What is the idea behind MVVM and why does it work so well with SwiftUI?
13.3 Let's use MVVM to improve our example code
14. Prototyping
14.1 Introduction to user experience design for mobile applications
14.2 Make your first fake view
14.3 Add a fake data model to prototype faster
14.4 Make a fake grid view with HStacks and VStack
14.5 Fake a map view with nearby toast
14.5 Fake a list with detail toast Images
14.6 How to show all app idea on the device
14.7 How to fake user interactions and transitions (with MatchingGeometryEffect)
14.8 Case study: the IKEA app for iPad
14.9 Design considerations for iPad and iOS 14
14.10 Sketching out the new iPad version of the IKEA app
14.11 Let's make a sidebar list as the main navigation for the IKEA app
14.12 How to use images to fast prototype the inspirational section of the IKEA app
14.13 Integrating a fake virtual walkthrough of IKEA stores
14.14 Integrating Newsroom and Offers
14.15 More complexe navigation in Product section
14.16 Final wrap up: Wish list and Mood-board
×
This is an unpublished lesson. This lesson will not be shown for students unless you set it as Public.
Back to Dashboard
No contents are available in this lesson!
No lessons available !
Back to Dashboard
Lesson contents locked
Enroll to unlock this lesson.
Enroll to unlock
Next Lesson