Hey, guys, 1
and welcome to a brand-new module on SwiftUI. In this module, 2
we're going to be exploring what exactly is SwiftUI. 3
What does it do? 4
And how can we use it to build iOS apps? 5
Now, at the Dub Dub DC 2019, one of the most exciting announcements that came out was SwiftUI. 6
Now, SwiftUI is Apple's brand-new UI framework built with declarative Swift code. 7
Now, you might be wondering what is all of that mean. 8
Well, this is Apple's attempt to make it easier for beginners to get into iOS development through a whole 9
bunch of cool features, such as drag-and-drop code creation. 10
Let me demo. So, for example, using SwiftUI, you can simply go into the Object library, drag in a button 11
or a text element, and then simply drop it onto the canvas, and it will automatically write the necessary 12
code. 13
Now, not only is that limited to components such as text and buttons, but you can also drag on attributes 14
such as, for example, if you wanted to change the font of our text, we just drag and drop it onto the text, 15
or if we want to change the font weight. And you can see that the preview canvas on the right is automatically 16
updating to show our code changes as and when they're made. 17
Now, SwiftUI being a UI framework, one of its main goals was to make layouts much easier in iOS apps and 18
we can do that through something called vertical horizontal and the Z axis stack. 19
So, for example, you've already seen that we can simply drag on elements and drop them, either below to 20
create a vertical stack or next to other elements to create a horizontal stack. 21
And using these stacks, we can create pretty complex designs just through the use of these vertical and 22
horizontal, almost like columns and rows if you will. 23
And a lot of this has inspirations from the web design world where we're often using tools like bootstrap 24
or other UI frameworks to be able to easily build out a complex and adaptive user interface. 25
So, in this case, I'm actually going to use a Z Stack to stack elements on top of each other. 26
So right now, I've got a purple background, and then I'm going to add a circle onto my stack and it's 27
gonna go straight on top. And then I'm going to add a button which is also going to go on top in the 28
z axis. 29
So I've now got three layers of a purple background a black circle and a button right at the top. 30
And you can see that the order is determined by which order these elements go into the Z Stack from 31
top to bottom. Now, by creating swift code while we're designing our UI. 32
It means that the user interfaces that we build become highly reusable. 33
So, for example, here I've built a really simple layout of a horizontal stack which has an image of a 34
book and I've sized it and changed its color. And then I've got a vertical stack inside the horizontal 35
stack which has a title text as well as a sort of smaller author text. And I've arranged and added the 36
attributes that I wanted to set up this particular appearance. 37
Now, if I wanted to reuse this component that I've designed, all I have to do is simply command-click 38
on each stack, and I can extract this as a subview. I can give that view a name. And now, I can add 39
properties to that view to be able to set various components to use those properties. And when I initialize 40
a new BookView, I can pass in a dynamic title. 41
So, now if I wanted to build a bunch of these BookViews, I can just initialize a brand-new BookView, 42
pass in the properties that are changeable or dynamic, and I end up with a whole bunch of these BookViews 43
all stacked together on my screen. And I can go even one step further and change my V stack into 44
a list view just by renaming it a list. 45
And now all the components inside the list are going to be stacked into a table view. 46
I can also change that into a form which creates a group sort of like interface. 47
And just by changing these different components around and reusing these views I've created, I can create 48
incredibly complex components, and I can simply copy and paste this code to be reused anywhere else where 49
it's needed. Now, you've already seen that we can use the canvas preview to see as we make changes. 50
For example, when we drag on new components, 51
we can see these changes happen pretty much live on screen, and that happens when I'm dragging components 52
onto the canvas or as I'm typing code in my content view. 53
But what you might not know is that there's actually a live preview mode where once I'm done with my 54
layouts. 55
So in this case, I've got a VStack that's inside a ScrollView, 56
so I've made it scrollable, and I've got a text component a text field, a Stepper, and a Picker. 57
So all of those components are now live. And in my preview without having to run the app or use a simulator 58
or use a device, 59
I can already start testing out these components and the layouts as if it was running in a real device. 60
Now, 61
finally, one of the biggest reasons why Apple came out with SwiftUI is to make it easier to build cross 62
platform user interfaces. 63
Now, when I say cross platform, I don't mean fully cross platform, like a cross iOS or Android, but a cross 64
the Apple platform. 65
So this means that you can build the same app, say, for watch or for Mac,and still use all of these tools 66
and SwiftUI to see how they look and create their layouts and reuse some of those subviews that you've 67
created for your apps across different platforms. 68
Now, not only is the UI more reusable across different Apple platforms, they've actually made it a lot 69
easier for us to build our iOS apps, say, for iPhone or iPad, and turn it straight into a Mac app through 70
something called Project Catalyst. 71
Now, Project Catalyst basically allows us to build an iOS app like the demo that I created just now, 72
and simply go into the Settings and check the Mac checkbox, so that it also works on Mac. And then, of course, 73
you need a Apple developer account setup, and then if you run, your app will be run straight onto the 74
Mac app, and you will be able to see it as a separate application running on your Mac. 75
So, now that we've seen all the capabilities of SwiftUI, let's get some more hands-on practice and build 76
an app using SwiftUI ourselves. 77
Now, before we proceed you first have to make sure that you are running macOS Catalina version 10.5 78
or above, 79
ideally, the latest version that you can get on the App Store. And on top of that, you will need the latest 80
version of Xcode. 81
So at minimum, it's gonna be 11.0. 82
The other thing to remember is that the apps built with SwiftUI can only run on a device that's running 83
iOS 13, and the only devices that can actually update iOS 13 are iPhones 6S or later, as well as the iPhone SE, 84
and on iPad, it's the iPad Air 2 or later, or the latest iPad mini 4. 85
So this does mean that anybody with an older phone or who have an updated iOS 13 would not be able 86
to download an app that's actually made with SwiftUI. 87
So at the moment, SwiftUI is very much in sort of early adopter experimentation phase. And for the next 88
two or three years, we're not going to see any serious apps built with it. 89
But there's no better time to get a head start on everybody and have a play around with SwiftUI.