Now that we've had our grand tour of Xcode, we're ready to design our app using iOS components inside
the Xcode storyboard.
Remember where our design file is located, it's right here in the main story, but a lot of students,
when they're first starting out, often confuse the main DOT story board with the launch screen dot
storyboard.
The launch screen looks pretty much identical to the main DOT storyboard, which is why people get confused.
But this is the part that you can design to determine what shows up in the first moments when your app
gets launched.
So very often you'll see a company logo or maybe the words loading, but it's going to appear in a flash
and then it's going to disappear.
So this is not where you want to design your app.
Instead, you want to make sure your inside may not storyboard before you start adding UI components
into the screen.
Down here, you'll see you as followed by an iPhone model, in my case, it reads you as iPhone 11 and
if you click on it, it starts giving you various options so you could change the type of device and
notice how it doesn't have every single device.
It doesn't have, for example, the iPhone seven or the six or the five, but it does have the four.
So why is that?
Well, it's because there's a number of iPhones that share the same aspect ratios.
For example, the iPhone six, seven and eight, they all have the same aspect ratio screen, which
is a four point seven inch screen.
And that means if you were to select the iPhone, Southy, second generation camisoles, then the app
will look exactly the same on an iPhone six, seven or eight because they all share a four point seven
inch screen.
But for other sizes, for example, the plus sizes, then it's got a different width and a height.
So you might need to have a different canvas to see how it would be laid out.
Now, you've also got the selection of the light and dark modes as well as the landscape and portrait.
So you can change these as you're designing to quickly see what your design would look like on each
of these different settings.
So I'm going to use the iPhone 11 canvas, which has the same six point one inch screen as the iPhone
X are.
But you can use a different canvas, too, if you like.
And as long as the cameras that you've chosen isn't much larger or much smaller than what I'm using,
you shouldn't have any issues following along with me in this material.
Besides, Apple regularly updates this list as they release new devices and update the Xcode software.
So now that we have our canvas selected, let's go ahead and collapse that menu to again give ourselves
as much space as possible and you can actually move around in the canvas using your trackpad.
So if you put two fingers on the trackpad and you move left and right, then you can pan your canvas
around, you move up and down, then you can also move it up and down as well.
You can also do pinch to zoom to make it larger or smaller.
But if you ever find yourself in a position where you can't actually find your screen anymore, then
simply just click on The View controller seen in the document outline and it'll bring it back to the
center of the screen.
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 library and we can bring up the object library by
clicking the plus button.
Notice how it's already telling me that this is the library.
And the first thing that I'm going to drag on to the screen is going to be a label.
So I'm going to click and select my label and it tells you a little bit about what this component is
and what it does.
It presents read only text, so you can't type into it.
For example, you can't edit it.
But this is exactly what we need.
So we're going to click and drag it onto the screen.
Now, when you drag things onto the screen, you see these little blue lines pop up and these are called
the guidelines, they help you position your elements.
So, for example, if I wanted it bang in the middle, then you can see that it shows up right here.
Now, drag it on somewhere close to the top third of the app and make sure that it's in the middle and
we're going to change what it says.
Now, remember, if we want to change something in our design, we first have to select it and then
we have to go into the attribute inspector, which is denoted by this symbol right here.
And if you hover over them, they also tell you what they are inside the astrobee inspector.
We can get started changing our label.
So the first thing I'm going to do is I'm going to change what it says.
So I'm going to write I am rich and then hit enter for that to update the text in my label.
And now let's change some other things about it.
Let's change the color to white, which of course will make it disappear from the screen.
So if you ever need to find it again, then the document outline is your best friend.
And if you don't see this pain, then simply just click on the toggle right here to bring it out.
So now that we've got our white text, which is also very small, let's go ahead and change its size.
So we click on this button right here and we can change the font size to something a lot bigger, say
a size 14, and we can also change the style.
So whether if it's bold or not bold, but if you want to change the font, you have to go in here and
select custom first before it comes up with this dropdown for the font family.
And you can change it to whichever font you prefer.
Now I'm going to change it to the Helvetica Noya font and I'm going to keep it as regular.
But I'm going to make sure that the font size is 40.
So we've got this label, which we can vaguely select by using the document outline, but we can't see
it because it's white on white.
So the next thing I want to do is to change the background color of my app.
Now notice that in my document outline I have my label, which I created just now, and it's sitting
inside something called a view.
Now the view is basically what you see in the background and we can change it by, again, selecting
it in the document outline and going to the attribute inspector.
And here we can change its background.
So let's go ahead and select a random background color.
We can make it purple.
Notice how that changes the background color.
And now my white text is visible once more so I can position it easily and I can select it easily on
the canvas.
Now, if you want a really specific color, then you can go to custom.
And if you go into the slider tab and go to Agip Slider's, then you can actually enter a custom hex
color.
So let's add my hex color that I want to use, which is two four four nine five E and I'm going to hit
enter and I get this nice sort of dark green, blue color, kind of indigo ish I would say.
Now one of the tools that I rely on quite heavily is something called Callahans, and it's a website
where professional designers have curated some of their favorite color palettes.
So let's say if I really like this particular palette, well, then I can go ahead and click on this
dark blue color and it copies the hex code right there.
And now I can go into my background, select my view, changed the custom color by clicking on that
custom and then paste in that hex code right here.
And now, if I unselective you, you can see it's now the color that I got from the tool.
And if I want to have a matching color palette, then I'm going to copy this pink color and change my
title to use a custom color.
And I'm going to make sure I've got AGIP sliders selected so I can paste in my hex code.
And now I have a beautiful color palette without any hard work at all.
All I've done is just browsed for one that I really liked and I've started using the colors in that
particular palette sets.
So this is a really easy way of making a really beautiful looking app without needing a lot of design
knowledge.
Now, if you want to undo anything that you've done, then simply just hold on command and hit Z or
Zed.
And as you keep going, you'll be able to revert to whichever stage you want to go back to.
So that's a really neat trick if you just want to unwind the clock.
So sometimes when you're working as an in-house developer, you might be working in a team and in your
team, you might have somebody whose job is to design the canvas and the user interface.
So you might have an app designer.
And in those cases, you probably won't be able to just drag something around and just position it where
you see fit.
They might provide you with exact specifications for how it should look.
So what do you do in that case?
Well, let's say that I wanted this label to be 166 in width and 48 in height and a specific position.
Then I would again select the label and instead of going to the attribute inspector, I would go to
the size inspector to change the position and these sizes.
So let's say that I change the exposition to 124, so move it to the right a little bit and I change
my Y position to 156, move it up a little bit and I keep my width as it is and I change the height
to, let's say, 48.
Right.
So if your designer is giving you these precise positioning and sizing instructions, then you can change
that inside this tab right here.
But if you're building your own app, then of course, you can place it wherever you like in whatever
position that pleases you.
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, we need to use a component from the object library called an image view as a challenge.
I want you to see if you can remember how to get pre-built components out of the object library and
position it onto the screen.
Once you dragged and dropped it onto the screen, then I want you to give it a specific position.
So the exposition should be 70 to the Y positions, should be 313 and change its size to have a width
of 270 and a height of 270.
Post the video now and try to complete that challenge.
All right, so did you remember how to do that?
Well, first things first, we have to be inside the main storyboard and we have to open up the object
library by clicking on this button right here.
And then we simply search for an item.
So you can either scroll through this list to find the image view or you can simply type in the search
by image view and it will show up the component that we need.
This component will show an image or a series of images as long as we drag and drop it onto our screen.
Once is on our screen, then we're going to change its position and its height and width.
So the exposition we said it was 72, the Y position was 313, and then the width and height were both
going to be 270.
So now you should have a UI image view that position on screen in the exact same location as what you
see in this video, because we've used precise coordinates and width and height to achieve this effect.
Now, if you're wondering what does the 72 and 313 actually refer to and how do you figure out that
this position should be those values?
Well, you don't have to wonder anymore.
We're going to talk about how positioning works in Xcode.
Let's say that we have a UI element that we've moved around on screen and we're happy with its position
and we want to be able to define this position in terms of coordinates.
So an X and a Y?
Well, you can imagine the iPhone screen as a graph where the top left corner is zero or the origin
of the graph, and where the x axis runs along the horizontal edge of the phone and the Y axis corresponds
to the vertical edge.
Now, on an iPhone six, the width of the screen is 375 and the height is six hundred and sixty seven.
If you want to know these values for different sized screens, then I recommend taking a look at Painton
Code's ultimate guide to iPhone resolutions, where you can see the sizes of the iPhone X, the iPhone
X or the five series six series, the plus series.
And you can see their sizes defined as points.
Now what does it say?
Points are not pixels.
Well, as the resolution of the iPhone's improved, they managed to cram more pixels into the same screen
size.
So, for example, when you take a look at the original iPhone 2G, 3G, then 320 points by 480 points
is literally 320 by 480 pixels.
But in the iPhone four, they managed to double the amount of pixels crammed into the same screen size.
So the screens are still the same.
But now we have doubled the resolution to make the images much sharper.
So the points simply refer to the sizes that you see in the app.
And the pixels refers to essentially the number of light bulbs, if you will, in the screen.
So the more light bulbs, the more detail you can get and the sharper the image.
But when we're talking about designing for iOS apps, we're talking about the sizes in terms of points.
So we know that are iPhone six has 375 points along the horizontal and 667 along the vertical.
How can we define the position of this purple UI element?
Well, we define the position by, again, the upper left corner of any element.
So we know that the screen starts its origin at the top left corner and the elements are positioned
by their top left corner.
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
to 375.
So let's say it's about one hundred and sixty five points on the X axis.
And then if we run a line to the Y axis or the vertical, then you can see that from zero down to six
hundred sixty seven.
Let's say this is about 75 points.
Well, now we have our position for this element.
It's X equals one six five and Y equals 75.
Pretty simple.
Now, in the next lesson, we're actually going to use that image of you that we put onto the screen
and we're going to learn how we can incorporate image assets into our Xcode projects so that we can
put a picture inside the image.
You so all of that and more I see on the next lesson.