Learn how to develop an Onboarding in SwiftUI - iOS tutorial for Beginner App Developers - Part 2

🟢 LIMITED TIME OFFER - SAVE 37%
Practical iOS and macOS app development tutorials with SwiftUI in 4K

By the end of this class, we’re going to develop a fully functional Onboarding screen with SwiftUI’s new Page Tab View. In order to make this onboarding screen display some content, we will create a new reusable card view for the fruits.

CHAPTERS

00:00 Introduction
00:53 Setting up SwiftUI files and folders
01:56 Create a Card View
06:12 Add an image view
07:46 Add a background to the view
10:29 Add a title to the view
11:40 Add a headline to the view
13:48 Add a button to the view
14:37 Create a new button component for the Card view
19:49 Add the button component to the main view
20:08 Add scale effect animation to the view
23:14 Start the Live Preview in Xcode 12
24:30 Develop the Onboarding feature
25:11 Create a new SwiftUI file: Onboarding View
26:26 Add a Page Tab View to the Onboarding
28:13 Add a new For Each loop to the view
28:50 Modify the main App SwiftUI file
29:24 Test the mobile application in Xcode's Simulator
30:05 Conclusion

As you can notice, we can see only one card at one time, but we can activate the next card by moving our fingers horizontally on the screen. This paging functionality with the little circle indicators at the bottom of the card is a built-in feature that we can utilize in SwiftUI by writing only a couple lines of code.

All right, without further ado, let’s open the Fruits iPhone app project in Xcode and start coding, shall we?

#SwiftUI #Xcode #iOSDevelopment

[yours.trustworthy]

Extremely good teaching style... thank you so much

[bryankia]

This is exactly what I was looking for. Thank you very much for your time and expertise

[danno]

I love the tutorials of yours that I have done so far. I’m going to start going through all of them because they have been so useful!

I have two questions on this one. Is there a way to have the start button only appear on the final page of onboarding? So that users don’t skip over important walk-through information.

My second question is, my image only animates when I swipe to the second page. It does not animate on any other page. I’m not sure what I did wrong.

[Trojancomment]

I loved that video! But in my case the image only animates when I scroll to the second page... Do you know what could be wrong?

[lindalevin]

at 8.18 I can't embed in VStack. I don't have that as an option when I command click?