Now that we've had our grand tour of Xcode, we're ready to design our app using iOS components inside 1
the Xcode Storyboard. So remember where our design file is located, it's right here in the Main.storyboard. 2
A lot of students, when they're first starting out, often confuse the Main.storyboard with the 3
LaunchScreen.storyboard. The launch screen looks pretty much identical to the Main.storyboard which 4
is why people get confused. But this is the part that you can design to determine what shows up in the 5
first moments when your app gets launched. 6
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
and then it's going to disappear. 8
So this is not where you want to design your app. 9
Instead you want to make sure you're inside Main.storyboard before you start adding UI components 10
into the screen. 11
Now down here you'll see this area where it says, "View as iPhone XR," and if you click on it, it starts 12
giving you various options, so you could change the type of device. 13
And notice how it doesn't have every single device. 14
It doesn't have, for example, the iPhone 7 or the 6 or the 5, but it does have the four. 15
So why is that? 16
Well, it's because there's a number of iPhones that share the same aspect ratios. 17
For example, the iPhone 6, 7, and 8, 18
they all have the same aspect ratio screen which is a 4.7-inch screen. And that means that 19
when you click on the iPhone 8 canvas size, then if you design on this canvas, 20
it will be exactly the same when displayed on an iPhone 6, 7, or 8. 21
But for other sizes, for example, the plus sizes, then it's got a different width and height, so you might 22
need to have a different canvas to see how it would be laid out. 23
Now you've also got the selection of the light and dark modes as well as the landscape and portrait. 24
So you can change these as your designing to quickly see what your design would look like on each of 25
these different settings. 26
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
see this canvas, then it might be because you have an older version of Xcode. So make sure you're on 28
the latest version of Xcode 11, and you can check that if you go to Xcode and About Xcode. 29
So now that we have our canvas selected, let's go ahead and collapse that menu to, again, give ourselves as much 30
space as possible. 31
And you can actually move around in the canvas using your trackpad. 32
So if you put two fingers on the trackpad and you move left and right, then you can pan your canvas around. 33
If you move up and down, then you can also move it up and down as well. 34
You can also do pinch to zoom to make it larger or smaller. 35
But if you ever find yourself in a position where you can't actually find your screen anymore, then simply 36
just click on the View Controller Scene in the document outline and it will bring it back to 37
the center of the screen. 38
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
library and we can bring up the object library by clicking the plus button. 40
Notice how it's already telling me that this is the library. 41
And the first thing that I'm going to drag onto the screen is going to be a label. 42
So I'm going to click and select my Label and it tells you a little bit about what this component is 43
and what it does. 44
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
what we need, 46
so we're going to click and drag it onto the screen. 47
Now when you drag things onto the screen, you see these little blue lines pop up and these are called 48
the guidelines. 49
They help you position your elements. 50
So for example, if I wanted it bang in the middle, then you can see that it shows up right here. 51
Now drag it on somewhere close to the top third of the app and make sure that it's in the middle. 52
And we're going to change what it says. 53
Now remember if we want to change something in our design, we first have to select it, and then we have 54
to go into the Attribute Inspector which is denoted by this symbol right here. 55
And if you hover over them, they also tell you what they are. Inside the Attribute Inspector, we can get 56
started changing our label. 57
So the first thing I'm going to do is I'm going to change what it says. 58
So I'm going to write I Am Rich and then hit enter 59
for that to update the text in my label. 60
And now let's change some other things about it. 61
Let's change the color to white which, of course, will make it disappear from the screen. 62
So if you ever need to find it again, then the document outline is your best friend. 63
And if you don't see this pane, then simply just click on the toggle right here to bring it out. 64
So now that we've got our white text, which is also very small, 65
let's go ahead and change its size. So we click on this "T" button right here and we can change the font 66
size to something a lot bigger, say, size 14. And we can also change these styles or whether it's bold or 67
not bold. But if you want to change the font, you have to go in here and select Custom first before it 68
comes up with this dropdown for the font family, 69
and you can change it to whichever font you prefer. 70
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
to make sure that the font size is 40. 72
So we've got this label which we can vaguely select by using the document outline, but we can't see it 73
because it's white on white. 74
So the next thing I want to do is to change the background color of my app. 75
Now notice that in my document outline, I have my label which I created just now, and it's sitting inside 76
something called a View. 77
Now the View is basically what you see in the background. And we can change it by, again, selecting it 78
in the document outline and going to the Attribute Inspector. 79
And here we can change its background. 80
So let's go ahead and select a random background color. We can make it purple. 81
Notice how that changes the background color 82
and now my white text is visible once more, so I can position it easily and I can select it easily on 83
the canvas. 84
Now if you want a really specific color, then you can go to custom. And if you go into the slider tab 85
and go to all RGB Sliders, then you can actually enter a custom hex color. 86
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
this nice sort of dark green-blue color, kind of Indigo-ish, I would say. 88
Now one of the tools that I rely on quite heavily is something called Color Hunt and it's a website 89
where professional designers have curated some of their favorite color palettes. 90
So let's say, if I really like this particular palette, well, then I can go ahead and click on this 91
dark blue color and it copies the HEX code right there. 92
And now I can go into my background, select my View, change the custom color by clicking on that Custom, 93
and then paste in that HEX code right here. 94
And now if I unselect the view, you can see it's now the color that I got from the tool. 95
And if I want to have a matching color palette, then I'm going to copy this pink color and change my 96
title to use a Custom color. 97
And I'm going to make sure I've got RGB Sliders selected, so I can paste in my HEX code. 98
And now I have a beautiful color palette without any hard work at all. 99
All I've done is just browsed for one that I really liked and I started using the colors in that particular 100
palette sets. 101
So this is a really easy way of making a really beautiful looking app without needing a lot of design 102
knowledge. 103
Now if you want to undo anything that you've done, then simply just hold down command and hit Zed or Z. 104
And as you keep going, you'll be able to revert to whichever stage you want to go back to. 105
So that's a really neat trick if you just want to unwind the clock. 106
So sometimes when you're working as an iOS developer, you might be working in a team, and in your team 107
you might have somebody whose job is to design the canvas and the user interface. 108
So you might have an app designer. 109
And in those cases, you probably won't be able to just drag something around and just position it where 110
you see fit. 111
They might provide you with exact specifications for how it should look. 112
So what do you do in that case? 113
Well, let's say that I wanted this label to be 166 in width and 48 in height and a specific position, 114
then I would, again, select the label, and instead of going to the Attribute Inspector, I would go to the 115
size inspector to change the position and these sizes. 116
So let's say that I change the exposition to 124. 117
So move it to the right a little bit and I change my Y position to 156, 118
moved up a little bit, and I keep my width as it is, 119
and I change the height to, let's say, 48. 120
Right. 121
So if your designer is giving you this precise positioning and sizing instruction, then you can change 122
that 123
inside this tab right here. 124
But if you're building your own app, then, of course, you can place it wherever you like in whatever position 125
that pleases you. 126
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
we need to use a component from the object library called an image view. As a challenge, 128
I want you to see if you could remember how to get prebuilt components out of the object library and 129
position it onto the screen. 130
Once you dragged and dropped it onto the screen, then I want you to give it a specific position. 131
So the X position should be 72, the Y position should be 313, and change its size to have a width of 132
270 and a height of 270. 133
Pause the video now and try to complete that challenge. 134
All right. 135
So did you remember how to do that? 136
Well, first thing's first, we have to be inside the Main.storyboard and we have to open up the object 137
library by clicking on this button right here, and then we simply search for an item. So you can either 138
scroll through this list to find the Image View or you can simply type in the search bar: Image View, 139
and it will show up the component that we need. This component will show an image or a series of images 140
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
position and its height and width. 142
So the X position we said, it was 72, the Y position was 313, and then the width 143
and height were both going to be 270. 144
So now you should have a UI Image View that position onscreen in the exact same location as what you 145
see in this video because we've used precise coordinates and width and height to achieve this effect. 146
Now if you're wondering what does the 72 and 313 actually refer to and how 147
do you figure out that this position should be those values, 148
well, you don't have to wonder anymore. 149
We're going to talk about how positioning works in Xcode. 150
Let's say that we have a UI element that we've moved around on screen and we're happy with its position 151
and we want to be able to define this position in terms of coordinates, 152
so an X and a Y. Well, you can imagine the iPhone screen as a graph where the top left corner is zero 153
or the origin of the graph, and where the x-axis runs along the horizontal edge of the phone and the 154
y-axis corresponds to the vertical edge. 155
Now on an iPhone 6, the width of the screen is 375 and the height 156
is 667. 157
If you want to know these values for different size screens, then I recommend taking a look at PaintCodes' 158
Ultimate Guide to iPhone resolutions where you can see the sizes of the iPhone X, the iPhone XR, 159
the 5 series, 6 series, the plus series, and you can see their sizes defined as points. 160
Now why does it say points and not pixels? 161
Well, as the resolution of the iPhones improved, they managed to cram more pixels into the same screen 162
size. 163
So for example, when you take a look at the original iPhone 2G, 3G, then 320 points by 480 points 164
is literally 320 x 480 pixels. 165
But in the iPhone 4, they managed to double the amount of pixels crammed into the same screen size. 166
So the screens are still the same, but now we have doubled the resolution to make the images much sharper. 167
So the points simply refer to the sizes that you see in the app and the pixels refers to, essentially, 168
the number of light bulbs if you will in the screen. 169
So the more light bulbs, the more detail you can get and the sharper the image. 170
But when we're talking about designing for iOS apps, we're always talking about the sizes in terms of 171
points. 172
So we know that iPhone 6 has 375 points along the horizontal and 667 along the vertical, 173
how can we define the position of this purple UI element? 174
Well, we define the position by, again, the upper left corner of any element. 175
So we know that the screen starts its origin at the top left corner and the elements are positioned 176
by their top left corner. 177
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
to 375, 179
so let's say it's about 165 points on the x-axis, 180
and then if we run a line to the y-axis or the vertical, then you can see that from zero down 181
667. 182
Let's say this is about 75 points. 183
Well, now we have our position for this element, it's X=165 and Y=75. 184
Pretty simple. 185
Now in the next lesson, we're actually going to use that Image View that we put onto the screen and we're 186
going to learn how we can incorporate image assets into our Xcode projects so that we can put a picture 187
inside the image. 188
So all of that and more we'll see on the next lesson.