In this lesson, we're going to be looking at how to start your very first SwiftUI project. 1
We're going to be working with Xcode Vpreview and the Object library to drag and drop components annual 2
watch SwiftUI code generated on the fly. 3
Then I'm going to show you how to use SwiftUI modifiers to update the attributes and properties for 4
the components that you've dragged into your code. 5
Finally, we're going to look at some basic ways of arranging elements using SwiftUI Stacks, as well as 6
sizing and using these SwiftUI image component. 7
Let's get started building our very first SwiftUI app. And to begin, it's as easy as going to file and 8
creating a new project. 9
Now, again, we're going to be choosing in iOS Single View App and the product name is going to be 10
I Am Rich. 11
Now, the most important thing that you need to change in this wizard is the user interface. 12
Make sure that you're choosing to build the user interface using swiftUI rather than storyboards. 13
And then go ahead and click next and save it anywhere you like. So the first thing I'm going to do is I'm 14
going to increase the amount of space I have to code by closing down some of these panes that I've got 15
on either side. 16
And I'm also going to remove this minimap which shows your code in a minified format. 17
But at the moment, my code is extremely mini already, so I don't need that. 18
So I can go into Editor, and then go ahead and uncheck the Minimap checkbox. 19
Now, we've got the full amount of space for coding as well as seeing our live previews. 20
So the first thing to do is go ahead and click Resume which will start our preview, build our app, and 21
show it on the right hand side here which is the area that we call the canvas. 22
Now, feel free to use your trackpad to pinch and zoom in a little bit so you can see the entire preview. 23
And you can see that to begin with the starting code, just includes a single text component which says, 24
"Hello World." 25
And that's what you see on screen here. 26
Now, our SwiftUI code files usually start out with two structures. 27
One is for defining what the user interface is going to look like and how it's going to behave, and another 28
for how the preview should be created and how it should behave. 29
For example, here we are rendering our content view as the preview, 30
and you can even set various properties on the content view. 31
For example, I could change the preview device to use a different device. 32
I could change this to a preview device that has the raw value of, I don't know, an iPhone SE, for example, 33
and you can see immediately, our device changes to fit the aspect ratios and dimensions of 34
our iPhone SE. 35
Now, in order to find out the names of these different devices, you can simply option click on the method 36
preview device, and then you'll see a list of all the different values that you can use. 37
Remember that SwiftUI and the preview is still quite experimental. 38
So if you wanted to, say, take a look at the Apple Watch Series 4, and you copy this string and you can 39
put it in here, maybe at the time when you're actually using this 40
this might work. But for me, a lot of these different devices don't look quite right yet, 41
and they can often crash. 42
So the most reliable ones I've found are the original one where you simply just have a default content 43
view using the iPhone XR or the iPhone SE also seems to work quite well. 44
So for now, I'm going to keep it as the default rendering which is the iPhone XR in the canvas 45
and I'm going to go ahead and create some components in our code. 46
Firstly, we're going to change our text from "Hello World" to "I Am Rich." 47
And notice how this is just like the UILabels that we created when we were building apps with storyboards 48
and UIKit. 49
Now, once we've changed our text, we can go ahead and add some different attributes. And to do that, 50
you can either go to the plus sign which brings up the object library. And here if you click on this tab, 51
we can see the Modifiers library. And if you scroll down in this list, there are a whole bunch of modifiers 52
that are for text. 53
So the first thing I'm gonna change is the font. 54
So I'm just gonna drag this and drop it onto my text. And down at the bottom here, 55
you should see what it's going to do. 56
So in this case, I'm adding the font to my text. And by default, you can see we've got a placeholder here, 57
but it's actually also active code. 58
So it set it to a Title sized font. 59
And if you simply select the placeholder and hit enter, it will insert the default value in there. 60
Now, if you want to take a look at all the options, you can also write the dot, and then scroll down the 61
list, and you can see you've got body call out or the system font, and which allow you to change the size 62
of the font as well. 63
So I'm going to change that to a 40.font to make it a lot bigger. 64
And notice that in addition to using the Object library and the modifiers, the other way that you can 65
see the attributes is if you select the font and you open up the right-hand pane, you can see that we've 66
got our text and we've got our modifiers, including the type of font that we want, the weight of the fonts, 67
the color alignment, as well as padding, and the size of the text label effectively. 68
You can see that there's not a whole lot of modifiers for tags that you can choose from yet. 69
I expect within the next two or three years that SwiftUI will mature and we'll be able to do everything 70
that we can do normally using SwiftUI as well. 71
But for now, the list of attributes is a lot smaller. 72
But as SwiftUI matures, we are going to see a lot of other options in here. 73
But at the moment, we can already use it to build out a very simple app. 74
So, now that we've got our I Am Rich set, I'm going to go ahead and change the weight to a bold typeface 75
to make that stand out a little bit more. 76
And I also want to change the color to a white font color. 77
Now, as soon as I do that it's going to disappear because my background is also white. 78
So in order to be able to see it, I'm going to set my background for the app. And to do that, 79
I'm gonna go into the Object library, and I'm going to find a component called a Color. 80
And this is just a color that we can actually simply drop onto the screen and we can create a ZStack 81
which is going to be able to hold both our color and our text components, so that we end up with two things 82
on top of each other like so. 83
Now, the color at the moment at least can't be set in the attributes pane, but we can do it using code 84
by either defining the RGB values or we can simply use the simplified palette by writing dot, and then 85
we have access to our common UIColors. 86
So, for example, in my case, I'm going to choose maybe a systemTeal color. 87
It's quite a nice color. And that should change the background. 88
But notice how it doesn't invade into the safe areas. 89
And in order for it to do go to the edges, we have to add a modifier to the color which is called 90
Edges Ignoring Safe Area. 91
And this is going to modify whichever view we drop it onto to go into the safe areas. 92
So I can either drop that into my code here like so, 93
or you can drop it onto the actual canvas. 94
But now that we've added this, this is still a default placeholder, 95
so let me just hit enter to make it active, and you can see that all edges are now ignoring the safe area. 96
And we've now got a background color, as well as a text label created and set up. Now, the next thing 97
I want to add into my stack is an image. But I don't want to add it into the Z Stack because what will 98
happen is it will actually appear on top of the text because it's in the Z axis. 99
So going from behind the phone all the way to the front of the phone. Instead, I'm going to create a new 100
vertical stack. 101
I want to embed my text component into a vertical stack and I can do that by holding down the command 102
key on the keyboard, selecting the text component, and say embed in a vertical stack. 103
And now it's been put inside a vertical stack which will allow me to add another component here which 104
is going to be an image component. 105
So let's find an image component down here and let's go ahead and drag it into our code. By default, 106
the image will look for a name that you have in your assets folder. 107
So at the moment, our assets folder is completely empty. 108
So let's go ahead and get some assets. 109
So if you head over to the course resources page and download the I Am Rich Assets for the SwiftUI 110
module, you should be able to unzip and see the I Am Rich assets folder. And then back in Xcode if you 111
head over to Assets.xcassets, 112
select the app icon and click the minus button to delete it, and then we can go into that 113
I Am Rich assets folder that we downloaded just now. And you're going to select both of these, and then 114
drop it inside this pane here. And now you should end up with app icons for iPhone, iPad, and Mac, and you 115
should also have a image of a diamond which is 116
a PDF vector image already with Vector Data Preserved. 117
Now, we can head back into our content view and try to use these things. 118
So the name of our diamond image was called diamond, 119
so inside here where we've got the placeholder for Image Name. 120
Let's go ahead and simply add the string called "diamond," 121
making sure that we spelt it exactly the same way as it is in the assets folder, and you can see that 122
I've now got a gigantic image of a diamond. 123
Let's go ahead and add some modifiers to our image. 124
Now, when you actually just select the image component and you look at it in the Attribute Inspector, 125
you can see that at the moment as of Xcode earlier 11 versions, there's actually not much we can 126
do with it other than set it's Padding and its Frame. 127
Now, before we can set its frame which determines its width and height, we first have to set it to be 128
resizable. 129
So if we go into the Object library, go to the modifiers pane, and under these green modifiers, 130
there's something called Image resizeable, 131
and I'm going to drop that right at the end to tag that on to modify my image. And now, it'll try to resize 132
the image so that instead of having its original size being rendered, it's actually being resized to 133
fit the screen. But it looks kind of weird. 134
So the next modifier that we need is something called Aspect Ratio. 135
So let's go ahead and drag this on towards the end as well. And instead of setting it to fill, I'm going 136
to set it to aspectRatio fit, so that it retains the original proportions of the image. So you can see 137
that we can either tag on these methods one after the other with a whole bunch of dots, or we can abide 138
by SwiftUI convention which is to set them out like we have for our text component which is one line 139
after the other to be able to see it more easily because we tend to add quite a few of these modifiers on. 140
So, now if we want to be able to resize the image and actually specify a frame size, then we should be 141
able to do it here. 142
But at the moment, I'm for some reason not able to do that. 143
So instead, we can simply write it in our code. 144
So it's .frame and we're going to make the width: 200 and the height: 200, and we'll make it center aligned. 145
So, now we've got a much smaller icon and it's still aspectRatio fit, and it's been resized to 146
the frame size that we've specified. That's it. 147
We've managed to create a very simple I Am Rich app using swiftUI and using the Object library being 148
able to drag and drop things onto the screen and into the code, and get our user interface generated 149
in Swift code. In the next lesson, we're going to go one step further and explore some of the other things 150
that we can do with SwiftUI layouts. 151
So for all of that and more, I'll see you there.