0
1
00:00:00,330 --> 00:00:07,860
Now that we've had our grand tour of Xcode, we're ready to design our app using iOS components inside
1

2
00:00:07,980 --> 00:00:16,660
the Xcode Storyboard. So remember where our design file is located, it's right here in the Main.storyboard.
2

3
00:00:16,720 --> 00:00:22,210
A lot of students, when they're first starting out, often confuse the Main.storyboard with the
3

4
00:00:22,210 --> 00:00:28,510
LaunchScreen.storyboard. The launch screen looks pretty much identical to the Main.storyboard which
4

5
00:00:28,510 --> 00:00:35,530
is why people get confused. But this is the part that you can design to determine what shows up in the
5

6
00:00:35,530 --> 00:00:38,710
first moments when your app gets launched.
6

7
00:00:38,710 --> 00:00:46,060
So very often that you'll see a company logo or maybe the words "loading," but it's going to appear in a flash
7

8
00:00:46,150 --> 00:00:48,100
and then it's going to disappear.
8

9
00:00:48,130 --> 00:00:51,310
So this is not where you want to design your app.
9

10
00:00:51,340 --> 00:00:56,980
Instead you want to make sure you're inside Main.storyboard before you start adding UI components
10

11
00:00:57,070 --> 00:00:57,990
into the screen.
11

12
00:00:59,380 --> 00:01:07,810
Now down here you'll see this area where it says,
"View as iPhone XR," and if you click on it, it starts
12

13
00:01:07,810 --> 00:01:12,710
giving you various options,
so you could change the type of device.
13

14
00:01:12,880 --> 00:01:16,240
And notice how it doesn't have every single device.
14

15
00:01:16,240 --> 00:01:22,140
It doesn't have, for example, the iPhone 7 or the 6 or the 5, but it does have the four.
15

16
00:01:22,180 --> 00:01:23,680
So why is that?
16

17
00:01:23,680 --> 00:01:30,280
Well, it's because there's a number of iPhones that share the same aspect ratios.
17

18
00:01:30,280 --> 00:01:32,980
For example, the iPhone 6, 7, and 8,
18

19
00:01:32,980 --> 00:01:40,840
they all have the same aspect ratio screen which is a 4.7-inch screen. And that means that
19

20
00:01:41,140 --> 00:01:47,310
when you click on the iPhone 8 canvas size, then if you design on this canvas,
20

21
00:01:47,380 --> 00:01:54,070
it will be exactly the same when displayed on an iPhone 6, 7, or 8.
21

22
00:01:54,070 --> 00:02:02,140
But for other sizes, for example, the plus sizes, then it's got a different width and height, so you might
22

23
00:02:02,140 --> 00:02:06,690
need to have a different canvas to see how it would be laid out.
23

24
00:02:06,760 --> 00:02:12,580
Now you've also got the selection of the light and dark modes as well as the landscape and portrait.
24

25
00:02:13,090 --> 00:02:19,810
So you can change these as your designing to quickly see what your design would look like on each of
25

26
00:02:19,810 --> 00:02:21,740
these different settings.
26

27
00:02:21,760 --> 00:02:30,580
So I'm going to leave it as the iPhone XR as my default which is the default canvas. And if you don't
27

28
00:02:30,580 --> 00:02:36,490
see this canvas, then it might be because you have an older version of Xcode. So make sure you're on
28

29
00:02:36,490 --> 00:02:45,000
the latest version of Xcode 11, and you can check that if you go to Xcode and About Xcode.
29

30
00:02:45,000 --> 00:02:51,330
So now that we have our canvas selected, let's go ahead and collapse that menu to, again, give ourselves as much
30

31
00:02:51,330 --> 00:02:52,770
space as possible.
31

32
00:02:53,070 --> 00:02:57,750
And you can actually move around in the canvas using your trackpad.
32

33
00:02:57,750 --> 00:03:04,800
So if you put two fingers on the trackpad and you move left and right, then you can pan your canvas around.
33

34
00:03:05,160 --> 00:03:09,950
If you move up and down, then you can also move it up and down as well.
34

35
00:03:10,020 --> 00:03:13,910
You can also do pinch to zoom to make it larger or smaller.
35

36
00:03:14,370 --> 00:03:20,100
But if you ever find yourself in a position where you can't actually find your screen anymore, then simply
36

37
00:03:20,100 --> 00:03:24,600
just click on the View Controller Scene in the document outline and it will bring it back to
37

38
00:03:24,600 --> 00:03:26,390
the center of the screen.
38

39
00:03:26,400 --> 00:03:33,000
So now let's go ahead and add some stuff to our canvas. And to do this, we have to head over to the object
39

40
00:03:33,000 --> 00:03:38,270
library and we can bring up the object library by clicking the plus button.
40

41
00:03:38,280 --> 00:03:41,200
Notice how it's already telling me that this is the library.
41

42
00:03:41,550 --> 00:03:46,310
And the first thing that I'm going to drag onto the screen is going to be a label.
42

43
00:03:46,380 --> 00:03:52,830
So I'm going to click and select my Label and it tells you a little bit about what this component is
43

44
00:03:52,920 --> 00:03:54,340
and what it does.
44

45
00:03:54,420 --> 00:04:01,260
It presents read-only text, so you can't type and do it, for example, you can't edit it. But this is exactly
45

46
00:04:01,260 --> 00:04:01,740
what we need,
46

47
00:04:01,740 --> 00:04:05,750
so we're going to click and drag it onto the screen.
47

48
00:04:06,030 --> 00:04:12,090
Now when you drag things onto the screen, you see these little blue lines pop up and these are called
48

49
00:04:12,090 --> 00:04:13,610
the guidelines.
49

50
00:04:13,740 --> 00:04:16,290
They help you position your elements.
50

51
00:04:16,290 --> 00:04:22,050
So for example, if I wanted it bang in the middle, then you can see that it shows up right here.
51

52
00:04:22,110 --> 00:04:29,280
Now drag it on somewhere close to the top third of the app and make sure that it's in the middle.
52

53
00:04:29,520 --> 00:04:32,670
And we're going to change what it says.
53

54
00:04:32,670 --> 00:04:38,640
Now remember if we want to change something in our design, we first have to select it, and then we have
54

55
00:04:38,640 --> 00:04:44,370
to go into the Attribute Inspector which is denoted by this symbol right here.
55

56
00:04:44,970 --> 00:04:51,090
And if you hover over them, they also tell you what they are. Inside the Attribute Inspector, we can get
56

57
00:04:51,090 --> 00:04:53,970
started changing our label.
57

58
00:04:53,970 --> 00:04:57,180
So the first thing I'm going to do is I'm going to change what it says.
58

59
00:04:57,230 --> 00:05:01,510
So I'm going to write I Am Rich and then hit enter
59

60
00:05:01,590 --> 00:05:04,170
for that to update the text in my label.
60

61
00:05:04,500 --> 00:05:07,310
And now let's change some other things about it.
61

62
00:05:07,410 --> 00:05:14,330
Let's change the color to white which, of course, will make it disappear from the screen.
62

63
00:05:14,340 --> 00:05:19,020
So if you ever need to find it again, then the document outline is your best friend.
63

64
00:05:19,020 --> 00:05:25,280
And if you don't see this pane, then simply just click on the toggle right here to bring it out.
64

65
00:05:25,350 --> 00:05:29,660
So now that we've got our white text, which is also very small,
65

66
00:05:29,700 --> 00:05:36,240
let's go ahead and change its size. So we click on this "T" button right here and we can change the font
66

67
00:05:36,240 --> 00:05:45,150
size to something a lot bigger, say, size 14. And we can also change these styles or whether it's bold or
67

68
00:05:45,180 --> 00:05:52,530
not bold. But if you want to change the font, you have to go in here and select Custom first before it
68

69
00:05:52,530 --> 00:05:55,460
comes up with this dropdown for the font family,
69

70
00:05:55,650 --> 00:06:00,010
and you can change it to whichever font you prefer.
70

71
00:06:00,030 --> 00:06:06,990
Now I'm going to change it to the Helvetica Neue font and I'm going to keep it as regular, but I'm going
71

72
00:06:06,990 --> 00:06:10,350
to make sure that the font size is 40.
72

73
00:06:10,680 --> 00:06:18,030
So we've got this label which we can vaguely select by using the document outline, but we can't see it
73

74
00:06:18,060 --> 00:06:19,990
because it's white on white.
74

75
00:06:20,070 --> 00:06:24,580
So the next thing I want to do is to change the background color of my app.
75

76
00:06:24,630 --> 00:06:31,860
Now notice that in my document outline, I have my label which I created just now, and it's sitting inside
76

77
00:06:31,950 --> 00:06:33,910
something called a View.
77

78
00:06:33,990 --> 00:06:42,720
Now the View is basically what you see in the background. And we can change it by, again, selecting it
78

79
00:06:42,840 --> 00:06:46,980
in the document outline and going to the Attribute Inspector.
79

80
00:06:47,010 --> 00:06:49,480
And here we can change its background.
80

81
00:06:49,890 --> 00:06:55,620
So let's go ahead and select a random background color. We can make it purple.
81

82
00:06:55,620 --> 00:06:57,930
Notice how that changes the background color
82

83
00:06:57,930 --> 00:07:05,520
and now my white text is visible once more,
so I can position it easily and I can select it easily on
83

84
00:07:05,520 --> 00:07:06,990
the canvas.
84

85
00:07:06,990 --> 00:07:15,990
Now if you want a really specific color, then you can go to custom. And if you go into the slider tab
85

86
00:07:15,990 --> 00:07:21,780
and go to all RGB Sliders, then you can actually enter a custom hex color.
86

87
00:07:22,020 --> 00:07:31,230
So let's add my HEX color that I want to use which is 24495E and I'm going to hit enter, and I get
87

88
00:07:31,230 --> 00:07:37,230
this nice sort of dark green-blue color,
kind of Indigo-ish, I would say.
88

89
00:07:37,470 --> 00:07:43,590
Now one of the tools that I rely on quite heavily is something called Color Hunt and it's a website
89

90
00:07:43,620 --> 00:07:48,470
where professional designers have curated some of their favorite color palettes.
90

91
00:07:48,630 --> 00:07:56,490
So let's say, if I really like this particular palette, well, then I can go ahead and click on this
91

92
00:07:56,580 --> 00:07:59,910
dark blue color and it copies the HEX code right there.
92

93
00:08:00,390 --> 00:08:08,130
And now I can go into my background, select my View, change the custom color by clicking on that Custom,
93

94
00:08:08,640 --> 00:08:11,450
and then paste in that HEX  code right here.
94

95
00:08:12,120 --> 00:08:18,810
And now if I unselect the view, you can see it's now the color that I got from the tool.
95

96
00:08:18,810 --> 00:08:26,070
And if I want to have a matching color palette, then I'm going to copy this pink color and change my
96

97
00:08:26,100 --> 00:08:29,150
title to use a Custom color.
97

98
00:08:29,430 --> 00:08:35,890
And I'm going to make sure I've got RGB Sliders selected, so I can paste in my HEX code.
98

99
00:08:36,330 --> 00:08:41,610
And now I have a beautiful color palette without any hard work at all.
99

100
00:08:41,610 --> 00:08:48,570
All I've done is just browsed for one that I really liked and I started using the colors in that particular
100

101
00:08:48,600 --> 00:08:50,130
palette sets.
101

102
00:08:50,130 --> 00:08:56,430
So this is a really easy way of making a really beautiful looking app without needing a lot of design
102

103
00:08:56,430 --> 00:08:57,700
knowledge.
103

104
00:08:57,690 --> 00:09:04,650
Now if you want to undo anything that you've done, then simply just hold down command and hit Zed or Z.
104

105
00:09:05,250 --> 00:09:10,790
And as you keep going, you'll be able to revert to whichever stage you want to go back to.
105

106
00:09:11,130 --> 00:09:15,470
So that's a really neat trick if you just want to unwind the clock.
106

107
00:09:15,680 --> 00:09:22,400
So sometimes when you're working as an iOS developer, you might be working in a team, and in your team
107

108
00:09:22,430 --> 00:09:29,170
you might have somebody whose job is to design the canvas and the user interface.
108

109
00:09:29,360 --> 00:09:31,940
So you might have an app designer.
109

110
00:09:31,940 --> 00:09:38,780
And in those cases, you probably won't be able to just drag something around and just position it where
110

111
00:09:38,780 --> 00:09:39,800
you see fit.
111

112
00:09:39,800 --> 00:09:44,790
They might provide you with exact specifications for how it should look.
112

113
00:09:44,810 --> 00:09:46,760
So what do you do in that case?
113

114
00:09:46,760 --> 00:09:55,670
Well, let's say that I wanted this label to be 166 in width and 48 in height and a specific position,
114

115
00:09:56,180 --> 00:10:02,240
then I would, again, select the label, and instead of going to the Attribute Inspector, I would go to the
115

116
00:10:02,240 --> 00:10:07,880
size inspector to change the position and these sizes.
116

117
00:10:07,880 --> 00:10:13,130
So let's say that I change the exposition to 124.
117

118
00:10:13,160 --> 00:10:20,320
So move it to the right a little bit and I change my Y position to 156,
118

119
00:10:20,450 --> 00:10:24,900
moved up a little bit, and I keep my width as it is,
119

120
00:10:25,460 --> 00:10:28,670
and I change the height to, let's say, 48.
120

121
00:10:28,700 --> 00:10:29,270
Right.
121

122
00:10:29,300 --> 00:10:38,480
So if your designer is giving you this precise positioning and sizing instruction, then you can change
122

123
00:10:38,480 --> 00:10:38,780
that
123

124
00:10:38,810 --> 00:10:40,760
inside this tab right here.
124

125
00:10:40,760 --> 00:10:46,340
But if you're building your own app, then, of course, you can place it wherever you like in whatever position
125

126
00:10:46,340 --> 00:10:48,530
that pleases you.
126

127
00:10:48,560 --> 00:10:55,100
Now the next thing we want to do is we want to be able to add a picture into our app. So to do that,
127

128
00:10:55,100 --> 00:11:01,780
we need to use a component from the object library called an image view. As a challenge,
128

129
00:11:01,790 --> 00:11:08,150
I want you to see if you could remember how to get prebuilt components out of the object library and
129

130
00:11:08,150 --> 00:11:10,310
position it onto the screen.
130

131
00:11:10,520 --> 00:11:17,090
Once you dragged and dropped it onto the screen, then I want you to give it a specific position.
131

132
00:11:17,300 --> 00:11:25,610
So the X position should be 72, the Y position should be 313, and change its size to have a width of
132

133
00:11:25,610 --> 00:11:29,090
270 and a height of 270.
133

134
00:11:29,690 --> 00:11:32,600
Pause the video now and try to complete that challenge.
134

135
00:11:36,490 --> 00:11:36,880
All right.
135

136
00:11:36,910 --> 00:11:39,580
So did you remember how to do that?
136

137
00:11:39,580 --> 00:11:45,550
Well, first thing's first, we have to be inside the Main.storyboard and we have to open up the object
137

138
00:11:45,550 --> 00:11:52,000
library by clicking on this button right here, and then we simply search for an item. So you can either
138

139
00:11:52,000 --> 00:11:58,090
scroll through this list to find the Image View or you can simply type in the search bar: Image View,
139

140
00:11:58,660 --> 00:12:05,430
and it will show up the component that we need. This component will show an image or a series of images
140

141
00:12:05,800 --> 00:12:13,510
as long as we drag and drop it onto our screen. Once it's on our screen, then we're going to change its
141

142
00:12:13,510 --> 00:12:15,250
position and its height and width.
142

143
00:12:15,610 --> 00:12:23,770
So the X position we said, it was 72, the Y position was 313, and then the width
143

144
00:12:23,830 --> 00:12:28,510
and height were both going to be 270.
144

145
00:12:28,540 --> 00:12:36,250
So now you should have a UI Image View that position onscreen in the exact same location as what you
145

146
00:12:36,250 --> 00:12:44,950
see in this video because we've used precise coordinates and width and height to achieve this effect.
146

147
00:12:44,950 --> 00:12:52,360
Now if you're wondering what does the 72 and 313 actually refer to and how
147

148
00:12:52,360 --> 00:12:56,860
do you figure out that this position should be those values,
148

149
00:12:56,860 --> 00:12:59,230
well, you don't have to wonder anymore.
149

150
00:12:59,230 --> 00:13:03,150
We're going to talk about how positioning works in Xcode.
150

151
00:13:03,190 --> 00:13:08,980
Let's say that we have a UI element that we've moved around on screen and we're happy with its position
151

152
00:13:09,730 --> 00:13:14,920
and we want to be able to define this position in terms of coordinates,
152

153
00:13:14,950 --> 00:13:24,640
so an X and a Y. Well, you can imagine the iPhone screen as a graph where the top left corner is zero
153

154
00:13:24,730 --> 00:13:33,730
or the origin of the graph, and where the x-axis runs along the horizontal edge of the phone and the
154

155
00:13:33,730 --> 00:13:37,930
y-axis corresponds to the vertical edge.
155

156
00:13:37,930 --> 00:13:45,770
Now on an iPhone 6, the width of the screen is 375
and the height
156

157
00:13:45,770 --> 00:13:47,390
is 667.
157

158
00:13:47,620 --> 00:13:53,770
If you want to know these values for different size screens, then I recommend taking a look at PaintCodes'
158

159
00:13:53,770 --> 00:14:01,960
Ultimate Guide to iPhone resolutions where you can see the sizes of the iPhone X, the iPhone XR,
159

160
00:14:02,020 --> 00:14:10,130
the 5 series, 6 series, the plus series, and you can see their sizes defined as points.
160

161
00:14:10,150 --> 00:14:12,800
Now why does it say points and not pixels?
161

162
00:14:13,300 --> 00:14:21,490
Well, as the resolution of the iPhones improved, they managed to cram more pixels into the same screen
162

163
00:14:21,490 --> 00:14:22,360
size.
163

164
00:14:22,360 --> 00:14:31,000
So for example, when you take a look at the original iPhone 2G, 3G, then 320 points by 480 points
164

165
00:14:31,000 --> 00:14:35,160
is literally 320 x 480 pixels.
165

166
00:14:35,410 --> 00:14:44,510
But in the iPhone 4, they managed to double the amount of pixels crammed into the same screen size.
166

167
00:14:44,680 --> 00:14:52,590
So the screens are still the same, but now we have doubled the resolution to make the images much sharper.
167

168
00:14:52,630 --> 00:15:00,670
So the points simply refer to the sizes that you see in the app and the pixels refers to, essentially,
168

169
00:15:00,670 --> 00:15:03,880
the number of light bulbs if you will in the screen.
169

170
00:15:03,880 --> 00:15:09,580
So the more light bulbs, the more detail you can get and the sharper the image.
170

171
00:15:09,580 --> 00:15:15,520
But when we're talking about designing for iOS apps, we're always talking about the sizes in terms of
171

172
00:15:15,520 --> 00:15:17,020
points.
172

173
00:15:17,170 --> 00:15:26,450
So we know that iPhone 6 has 375 points along the horizontal and 667 along the vertical,
173

174
00:15:26,470 --> 00:15:30,660
how can we define the position of this purple UI element?
174

175
00:15:30,670 --> 00:15:37,320
Well, we define the position by, again, the upper left corner of any element.
175

176
00:15:37,450 --> 00:15:45,340
So we know that the screen starts its origin at the top left corner and the elements are positioned
176

177
00:15:45,610 --> 00:15:46,930
by their top left corner.
177

178
00:15:47,620 --> 00:15:55,590
So in this case, we would, say, run a line up to the x-axis and we get to a point which is kind of halfway
178

179
00:15:55,630 --> 00:15:57,280
to 375,
179

180
00:15:57,280 --> 00:16:02,420
so let's say it's about 165 points on the x-axis,
180

181
00:16:02,500 --> 00:16:09,200
and then if we run a line to the y-axis or the vertical, then you can see that from zero down
181

182
00:16:09,200 --> 00:16:11,000
667.
182

183
00:16:11,170 --> 00:16:14,090
Let's say this is about 75 points.
183

184
00:16:14,110 --> 00:16:21,820
Well, now we have our position for this element, it's X=165 and Y=75.
184

185
00:16:21,850 --> 00:16:23,080
Pretty simple.
185

186
00:16:23,230 --> 00:16:28,580
Now in the next lesson, we're actually going to use that Image View that we put onto the screen and we're
186

187
00:16:28,590 --> 00:16:34,210
going to learn how we can incorporate image assets into our Xcode projects so that we can put a picture
187

188
00:16:34,240 --> 00:16:35,600
inside the image.
188

189
00:16:36,210 --> 00:16:39,150
So all of that and more we'll see on the next lesson.