0
1
00:00:00,750 --> 00:00:06,900
In this lesson, we're going to be looking at how to start your very first SwiftUI project.
1

2
00:00:06,930 --> 00:00:13,020
We're going to be working with Xcode Vpreview and the Object library to drag and drop components annual
2

3
00:00:13,020 --> 00:00:16,680
watch SwiftUI code generated on the fly.
3

4
00:00:16,680 --> 00:00:22,410
Then I'm going to show you how to use SwiftUI modifiers to update the attributes and properties for
4

5
00:00:22,410 --> 00:00:26,160
the components that you've dragged into your code.
5

6
00:00:26,160 --> 00:00:31,830
Finally, we're going to look at some basic ways of arranging elements using SwiftUI Stacks, as well as
6

7
00:00:31,890 --> 00:00:36,480
sizing and using these SwiftUI image component.
7

8
00:00:36,630 --> 00:00:44,340
Let's get started building our very first SwiftUI app. And to begin, it's as easy as going to file and
8

9
00:00:44,400 --> 00:00:47,560
creating a new project.
9

10
00:00:47,790 --> 00:00:53,550
Now, again, we're going to be choosing in iOS Single View App and the product name is going to be
10

11
00:00:53,610 --> 00:00:56,190
I Am Rich.
11

12
00:00:56,190 --> 00:01:01,870
Now, the most important thing that you need to change in this wizard is the user interface.
12

13
00:01:01,950 --> 00:01:08,910
Make sure that you're choosing to build the user interface using swiftUI rather than storyboards.
13

14
00:01:08,910 --> 00:01:16,440
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

15
00:01:16,440 --> 00:01:23,970
going to increase the amount of space I have to code by closing down some of these panes that I've got
15

16
00:01:24,000 --> 00:01:25,340
on either side.
16

17
00:01:25,470 --> 00:01:32,930
And I'm also going to remove this minimap which shows your code in a minified format.
17

18
00:01:33,090 --> 00:01:37,330
But at the moment, my code is extremely mini already, so I don't need that.
18

19
00:01:37,410 --> 00:01:43,250
So I can go into Editor, and then go ahead and uncheck the Minimap checkbox.
19

20
00:01:43,380 --> 00:01:49,800
Now, we've got the full amount of space for coding as well as seeing our live previews.
20

21
00:01:49,800 --> 00:01:56,130
So the first thing to do is go ahead and click Resume which will start our preview, build our app, and
21

22
00:01:56,190 --> 00:02:02,050
show it on the right hand side here which is the area that we call the canvas.
22

23
00:02:02,130 --> 00:02:09,030
Now, feel free to use your trackpad to pinch and zoom in a little bit so you can see the entire preview.
23

24
00:02:09,690 --> 00:02:17,130
And you can see that to begin with the starting code, just includes a single text component which says,
24

25
00:02:17,220 --> 00:02:18,420
"Hello World."
25

26
00:02:18,420 --> 00:02:21,040
And that's what you see on screen here.
26

27
00:02:21,240 --> 00:02:27,360
Now, our SwiftUI code files usually start out with two structures.
27

28
00:02:27,390 --> 00:02:34,560
One is for defining what the user interface is going to look like and how it's going to behave, and another
28

29
00:02:34,620 --> 00:02:40,130
for how the preview should be created and how it should behave.
29

30
00:02:40,140 --> 00:02:45,890
For example, here we are rendering our content view as the preview,
30

31
00:02:46,380 --> 00:02:49,740
and you can even set various properties on the content view.
31

32
00:02:49,800 --> 00:02:55,500
For example, I could change the preview device to use a different device.
32

33
00:02:55,580 --> 00:03:05,610
I could change this to a preview device that has the raw value of, I don't know, an iPhone SE, for example,
33

34
00:03:06,090 --> 00:03:12,270
and you can see immediately, our device changes to fit the aspect ratios and dimensions of
34

35
00:03:12,480 --> 00:03:14,070
our iPhone SE.
35

36
00:03:14,070 --> 00:03:21,240
Now, in order to find out the names of these different devices, you can simply option click on the method
36

37
00:03:21,240 --> 00:03:26,530
preview device, and then you'll see a list of all the different values that you can use.
37

38
00:03:26,550 --> 00:03:32,010
Remember that SwiftUI and the preview is still quite experimental.
38

39
00:03:32,010 --> 00:03:39,930
So if you wanted to, say, take a look at the Apple Watch Series 4, and you copy this string and you can
39

40
00:03:39,930 --> 00:03:44,060
put it in here, maybe at the time when you're actually using this
40

41
00:03:44,070 --> 00:03:50,090
this might work. But for me, a lot of these different devices don't look quite right yet,
41

42
00:03:50,130 --> 00:03:52,150
and they can often crash.
42

43
00:03:52,200 --> 00:03:59,310
So the most reliable ones I've found are the original one where you simply just have a default content
43

44
00:03:59,310 --> 00:04:06,040
view using the iPhone XR or the iPhone SE also seems to work quite well.
44

45
00:04:06,060 --> 00:04:13,080
So for now, I'm going to keep it as the default rendering which is the iPhone XR in the canvas
45

46
00:04:13,080 --> 00:04:17,400
and I'm going to go ahead and create some components in our code.
46

47
00:04:17,610 --> 00:04:23,130
Firstly, we're going to change our text from "Hello World" to "I Am Rich."
47

48
00:04:23,130 --> 00:04:30,090
And notice how this is just like the UILabels that we created when we were building apps with storyboards
48

49
00:04:30,120 --> 00:04:31,580
and UIKit.
49

50
00:04:31,620 --> 00:04:37,860
Now, once we've changed our text, we can go ahead and add some different attributes. And to do that,
50

51
00:04:37,860 --> 00:04:45,870
you can either go to the plus sign which brings up the object library. And here if you click on this tab,
51

52
00:04:45,960 --> 00:04:52,590
we can see the Modifiers library. And if you scroll down in this list, there are a whole bunch of modifiers
52

53
00:04:52,860 --> 00:04:54,780
that are for text.
53

54
00:04:54,810 --> 00:04:56,880
So the first thing I'm gonna change is the font.
54

55
00:04:56,900 --> 00:05:02,600
So I'm just gonna drag this and drop it onto my text. And down at the bottom here,
55

56
00:05:02,610 --> 00:05:04,370
you should see what it's going to do.
56

57
00:05:04,380 --> 00:05:10,280
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

58
00:05:10,560 --> 00:05:12,630
but it's actually also active code.
58

59
00:05:12,630 --> 00:05:16,390
So it set it to a Title sized font.
59

60
00:05:16,560 --> 00:05:23,240
And if you simply select the placeholder and hit enter, it will insert the default value in there.
60

61
00:05:23,250 --> 00:05:29,250
Now, if you want to take a look at all the options, you can also write the dot, and then scroll down the
61

62
00:05:29,250 --> 00:05:36,660
list, and you can see you've got body call out or the system font, and which allow you to change the size
62

63
00:05:36,660 --> 00:05:37,980
of the font as well.
63

64
00:05:37,980 --> 00:05:42,310
So I'm going to change that to a 40.font to make it a lot bigger.
64

65
00:05:42,570 --> 00:05:49,500
And notice that in addition to using the Object library and the modifiers,  the other way that you can
65

66
00:05:49,500 --> 00:05:56,190
see the attributes is if you select the font and you open up the right-hand pane, you can see that we've
66

67
00:05:56,190 --> 00:06:04,350
got our text and we've got our modifiers, including the type of font that we want, the weight of the fonts,
67

68
00:06:04,410 --> 00:06:12,040
the color alignment, as well as padding, and the size of the text label effectively.
68

69
00:06:12,270 --> 00:06:18,820
You can see that there's not a whole lot of modifiers for tags that you can choose from yet.
69

70
00:06:19,000 --> 00:06:25,030
I expect within the next two or three years that SwiftUI will mature and we'll be able to do everything
70

71
00:06:25,030 --> 00:06:28,860
that we can do normally using SwiftUI as well.
71

72
00:06:28,950 --> 00:06:33,350
But for now, the list of attributes is a lot smaller.
72

73
00:06:33,400 --> 00:06:38,560
But as SwiftUI matures, we are going to see a lot of other options in here.
73

74
00:06:38,860 --> 00:06:43,330
But at the moment, we can already use it to build out a very simple app.
74

75
00:06:43,510 --> 00:06:52,240
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

76
00:06:52,570 --> 00:06:55,590
to make that stand out a little bit more.
76

77
00:06:55,750 --> 00:07:01,120
And I also want to change the color to a white font color.
77

78
00:07:01,150 --> 00:07:06,320
Now, as soon as I do that it's going to disappear because my background is also white.
78

79
00:07:06,370 --> 00:07:12,470
So in order to be able to see it, I'm going to set my background for the app. And to do that,
79

80
00:07:12,490 --> 00:07:18,310
I'm gonna go into the Object library, and I'm going to find a component called a Color.
80

81
00:07:18,580 --> 00:07:27,970
And this is just a color that we can actually simply drop onto the screen and we can create a ZStack
81

82
00:07:28,030 --> 00:07:35,830
which is going to be able to hold both our color and our text components, so that we end up with two things
82

83
00:07:35,920 --> 00:07:39,570
on top of each other like so.
83

84
00:07:39,790 --> 00:07:46,630
Now, the color at the moment at least can't be set in the attributes pane, but we can do it using code
84

85
00:07:47,050 --> 00:07:55,900
by either defining the RGB values or we can simply use the simplified palette by writing dot, and then
85

86
00:07:55,900 --> 00:07:59,560
we have access to our common UIColors.
86

87
00:07:59,590 --> 00:08:05,190
So, for example, in my case, I'm going to choose maybe a systemTeal color.
87

88
00:08:05,710 --> 00:08:08,970
It's quite a nice color. And that should change the background.
88

89
00:08:09,160 --> 00:08:13,090
But notice how it doesn't invade into the safe areas.
89

90
00:08:13,090 --> 00:08:22,180
And in order for it to do go to the edges, we have to add a modifier to the color which is called 
90

91
00:08:22,270 --> 00:08:24,210
Edges Ignoring Safe Area.
91

92
00:08:24,280 --> 00:08:30,610
And this is going to modify whichever view we drop it onto to go into the safe areas.
92

93
00:08:30,610 --> 00:08:34,270
So I can either drop that into my code here like so,
93

94
00:08:34,270 --> 00:08:37,680
or you can drop it onto the actual canvas.
94

95
00:08:37,930 --> 00:08:42,400
But now that we've added this, this is still a default placeholder,
95

96
00:08:42,400 --> 00:08:49,330
so let me just hit enter to make it active, and you can see that all edges are now ignoring the safe area.
96

97
00:08:49,420 --> 00:08:58,150
And we've now got a background color, as well as a text label created and set up. Now, the next thing
97

98
00:08:58,150 --> 00:09:05,710
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

99
00:09:05,710 --> 00:09:12,450
happen is it will actually appear on top of the text because it's in the Z axis.
99

100
00:09:12,460 --> 00:09:18,970
So going from behind the phone all the way to the front of the phone. Instead, I'm going to create a new
100

101
00:09:19,060 --> 00:09:20,570
vertical stack.
101

102
00:09:20,620 --> 00:09:27,730
I want to embed my text component into a vertical stack and I can do that by holding down the command
102

103
00:09:27,730 --> 00:09:34,060
key on the keyboard, selecting the text component, and say embed in a vertical stack.
103

104
00:09:34,210 --> 00:09:41,050
And now it's been put inside a vertical stack which will allow me to add another component here which
104

105
00:09:41,050 --> 00:09:43,900
is going to be an image component.
105

106
00:09:44,050 --> 00:09:53,620
So let's find an image component down here and let's go ahead and drag it into our code. By default,
106

107
00:09:53,620 --> 00:09:58,870
the image will look for a name that you have in your assets folder.
107

108
00:09:58,870 --> 00:10:02,610
So at the moment, our assets folder is completely empty.
108

109
00:10:02,650 --> 00:10:04,870
So let's go ahead and get some assets.
109

110
00:10:04,930 --> 00:10:11,560
So if you head over to the course resources page and download the I Am Rich Assets for the SwiftUI
110

111
00:10:11,560 --> 00:10:19,930
module, you should be able to unzip and see the I Am Rich assets folder. And then back in Xcode if you
111

112
00:10:19,930 --> 00:10:22,660
head over to Assets.xcassets,
112

113
00:10:22,660 --> 00:10:29,360
select the app icon and click the minus button to delete it, and then we can go into that
113

114
00:10:29,380 --> 00:10:35,560
I Am Rich assets folder that we downloaded just now. And you're going to select both of these, and then
114

115
00:10:35,620 --> 00:10:44,080
drop it inside this pane here. And now you should end up with app icons for iPhone, iPad, and Mac, and you
115

116
00:10:44,080 --> 00:10:48,340
should also have a image of a diamond which is 
116

117
00:10:48,370 --> 00:10:51,790
a PDF vector image already with Vector Data Preserved.
117

118
00:10:51,790 --> 00:10:57,370
Now, we can head back into our content view and try to use these things.
118

119
00:10:57,370 --> 00:11:02,080
So the name of our diamond image was called diamond,
119

120
00:11:02,080 --> 00:11:06,100
so inside here where we've got the placeholder for Image Name.
120

121
00:11:06,100 --> 00:11:09,220
Let's go ahead and simply add the string called "diamond,"
121

122
00:11:09,370 --> 00:11:15,250
making sure that we spelt it exactly the same way as it is in the assets folder, and you can see that
122

123
00:11:15,340 --> 00:11:19,370
I've now got a gigantic image of a diamond.
123

124
00:11:19,960 --> 00:11:23,320
Let's go ahead and add some modifiers to our image.
124

125
00:11:23,320 --> 00:11:29,080
Now, when you actually just select the image component and you look at it in the Attribute Inspector,
125

126
00:11:29,440 --> 00:11:35,800
you can see that at the moment as of Xcode earlier 11 versions, there's actually not much we can
126

127
00:11:35,800 --> 00:11:39,550
do with it other than set it's Padding and its Frame.
127

128
00:11:39,550 --> 00:11:44,830
Now, before we can set its frame which determines its width and height, we first have to set it to be
128

129
00:11:44,830 --> 00:11:45,970
resizable.
129

130
00:11:46,000 --> 00:11:53,320
So if we go into the Object library, go to the modifiers pane, and under these green modifiers,
130

131
00:11:53,320 --> 00:11:55,700
there's something called Image resizeable,
131

132
00:11:55,800 --> 00:12:03,400
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

133
00:12:03,400 --> 00:12:09,010
the image so that instead of having its original size being rendered, it's actually being resized to
133

134
00:12:09,010 --> 00:12:12,410
fit the screen. But it looks kind of weird.
134

135
00:12:12,580 --> 00:12:18,160
So the next modifier that we need is something called Aspect Ratio.
135

136
00:12:18,340 --> 00:12:24,670
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

137
00:12:24,670 --> 00:12:33,280
to set it to aspectRatio fit, so that it retains the original proportions of the image. So you can see
137

138
00:12:33,280 --> 00:12:39,970
that we can either tag on these methods one after the other with a whole bunch of dots, or we can abide
138

139
00:12:39,970 --> 00:12:47,320
by SwiftUI convention which is to set them out like we have for our text component which is one line
139

140
00:12:47,350 --> 00:12:53,710
after the other to be able to see it more easily because we tend to add quite a few of these modifiers on.
140

141
00:12:54,090 --> 00:13:02,820
So, now if we want to be able to resize the image and actually specify a frame size, then we should be
141

142
00:13:02,820 --> 00:13:04,290
able to do it here.
142

143
00:13:04,470 --> 00:13:08,350
But at the moment, I'm for some reason not able to do that.
143

144
00:13:08,370 --> 00:13:12,540
So instead, we can simply write it in our code.
144

145
00:13:12,540 --> 00:13:19,050
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

146
00:13:19,050 --> 00:13:28,830
So, now we've got a much smaller icon and it's still aspectRatio fit, and it's been resized to
146

147
00:13:28,860 --> 00:13:32,250
the frame size that we've specified. That's it.
147

148
00:13:32,250 --> 00:13:40,740
We've managed to create a very simple I Am Rich app using swiftUI and using the Object library being
148

149
00:13:40,740 --> 00:13:46,620
able to drag and drop things onto the screen and into the code, and get our user interface generated
149

150
00:13:46,950 --> 00:13:52,950
in Swift code. In the next lesson, we're going to go one step further and explore some of the other things
150

151
00:13:52,950 --> 00:13:55,180
that we can do with SwiftUI layouts.
151

152
00:13:55,470 --> 00:13:57,660
So for all of that and more, I'll see you there.