iOS 11 Developer Course Tutorial - Auto Layout Part 18 Video Lecture -

so in this video we're going to take a
quick break from our Swift coding and
learn the basics of something called
Auto layout which will allow us to build
apps which will look good at any screen
size and also in portrait and landscape
orientations so I've just created a new
project in will go for the usual single
view application and I'm going to call
it is it prime I would avoid leaving a
question mark in the product name just
because that can cause problems in some
cases and I'll leave it right there on
the desktop so Auto layout is xcode's
solution to the problem of making an app
look good in different screen sizes and
orientations and it's actually pretty
easy to use so let's get started with
our storyboard get rid of things that we
don't need and we'll start off by just
bringing in a label so just a plain old
label and I'm going to Center it
horizontally and vertically in the
screen so for an iPhone success screen
that will work absolutely fine but if we
tried viewing this app on a different
device so a smaller screen for example
it becomes very clear that that label is
no longer centered and similarly for
larger devices the label is not centered
so those blue lines only help you lay it
out for that particular screen size
which generally speaking is not what we
want and it definitely doesn't work at
other orientations as well the label is
all the way down there but to fix that
it's pretty easy all we need to do if we
want our label here to be horizontally
and vertically centered we can just
click on that alignment constraints
button there and select horizontally and
vertically aligned in container and then
we add those could two constraints and
you can see we're
now set up with solid blue lines there
if you get red lines that means that
you've done something wrong but blue
lines are indicator that probably you've
done things right and now we can have a
look at other orientations and you can
see label is still nicely centered and
on smaller screen sizes that's still
centered on larger screens centered as
well so that's all very well if you want
something in the middle of the screen
but what if you wanted something say
centered but towards the top of the
screen well let's bring in another label
for that so there we go
so this label on the 6's screen will be
nicely centered but again if we change
the device it will no longer be centered
in fact it'll be the same distance from
the left edge as it is on the iPhone 6s
screen so very quick challenge for you
then can you make sure that this is
centered just horizontally on all screen
sizes and orientations go for it all
right hope you managed it all you needed
to do was click the align and click
horizontally in container and then add
that one constraint and now you can see
we've got a blue line underlining it
there but a red line that's showing that
it's not properly constrained or
positioned vertically but if we have a
look at the different devices you can
see that it is centered horizontally so
we have done that bit right but we
haven't done the vertical positioning
right yet to do that it's a bit like
adding an iboutlet
we press ctrl and then we drag and in
this case I'm going to drag upwards into
the background there just like that and
then we'll have the option to vertically
space to top layout guide that's what we
want to do so that will then give us a
nice blue
line vertically saying that it's aligned
to that top layout guide and that will
be the case regardless of again screen
size and orientation all right finally
then what if you wanted to take a label
and align it to another label so maybe
we want a label which is centered but
just below this label here
well again I can drag it in so it will
look good on this particular screen but
then if I change the orientation that no
longer works so I'm gonna Center it
horizontally again in the same way and
I'm gonna control drag to the label
above and then let go and then select
vertical spacing and that will then
space it correctly to the label above
and that will now work regardless of
screen size so this label is aligned to
top of screen you can see a tree centers
itself there for us this one is aligned
to label above and this one
is centered horizontally and vertically
and it will remain so regardless of
screen size so very very quick challenge
before we make our app layout using auto
layout can you create a label which is
aligned to the bottom of the screen and
centered horizontally go for it
alright hopefully that was fairly
straightforward we're just going to drag
it in here and we'll get it right
according to the blue lines and then
once again we'll choose the alignment
constraints center horizontally in
container and I'm then gonna drag
control drag down onto the view and I
want to fix the vertical spacing to the
bottom layout guide and there we go that
label will now be fixed centered and at
the bottom of the screen great so now
let's set up our layout for our app I'll
work with the iPhone 6s as usual and in
fact I'll set this as a challenge but
with you to decide how the app should
look so in terms of functionality we
want the user to be able to enter a
number and for our app to tell them
whether it's prime or not simple as that
so you decide the layout but make sure
that your layout will look good on all
screen sizes and orientations go for it
all right I hope you managed it I'm
going to stick to something and fairly
straightforward so we're going to bring
in a label up here which is going to be
our title is it prime make that a little
bit bigger and centered there we go and
I want to actually a little bit down
from the top of the screen and then
we're going to add a horizontally
centered constraint and drag control
drag vertically to the top layout guide
and you can see here that we've got an
orange box this is because our label
doesn't completely reach the edge of the
box surrounding it so we need to specify
the width and height of the label as
part of the constraints that's easy to
do we just click on the add new
constraints button there and once you've
got the width and height set correctly
as you want them then just to fix those
as constraints add those and then you'll
get rid of those nasty orange lines okay
so we didn't have to do that before
because our label stretched all the way
to the edge but it doesn't here okay
now let's add another label with an
instruction so I'm gonna use the blue
line again as my indicator and then I'm
going to control drag and fix the
vertical spacing to the label above and
we're gonna horizontally Center that in
the container as well I'm not sure my
control drag actually took there there
we go okay
so we'll ask them to enter a positive
whole number here we go so yeah I don't
need to worry about setting the width
and height you can do if you want to but
we don't need to do that here next I'm
going to bring in my text field to allow
them to enter their number so I'm going
to drag that a little bit further down I
think and then stretch that too close to
the edges and for the text field I
wanted to stretch to the edge of the
screen regardless of screen size so I'm
going to do that using the constraints
button there and I'm going to fix the
left constraint and the right constraint
to be zero which means it will be fixed
to those blue layout guide lines and
then the top constraint is going to be
29 pixels to the label above you can see
it's spacing to nearest neighbor there
so that will set it 29 pixels below that
one and stretch to the edge of the
screen both ways to the left and the
right and let's have a look just make
sure that that looks good there we go so
that's stretched out again regardless of
screen size right to the edge okay
while we're here I'm gonna add a
placeholder I'm gonna put eg for eight
or twenty-nine just to give them a very
clear idea at the sort of thing they
should be entering and I'm gonna add a
number pad keyboard type so that we make
sure that they're entering a number
all right we're nearly there next I'm
gonna add my button which I'm just gonna
put in there and it's going to be
centered horizontally and I'll use
control drag to align it to the text
field above and I'm going to change the
button text to is it prime there we go
and my final UI element then is going to
be my label which will tell me whether
or not it is indeed prime I'm gonna
stretch this all the way to the left and
the right and actually I'm going to give
it a bit more height because we might
need a few lines there so I'm going to
change it to zero lines which means
it'll have as many lines as we need and
centered like that and we'll set the
constraints as we did for the text field
so zero for left and right and eight
pixels below the is it prime button
and here as with the is it prime label
at the top it doesn't take up the full
width or height so I'm going to set the
height I don't need to set the width
because that's going to stretch all the
way out anyway but I'm going to set the
height to be fixed as we've got it there
so it's sort of three or four lines
worth of label there we go so blue lines
everywhere which is good that means
we've probably got a good layout or at
least we've got a non conflicting layout
so let's just have a quick look there we
go
that looks nice and it all looks good
even on the massive iPad screen although
that's possibly too wide in the
landscape orientation but there we go do
practice that it can be a bit fiddly but
that is the basics of Auto layout or how
we can use constraints to make sure our
apps look good regardless of screen size
or orientation in the next video then
we'll bring this all together and bring
the code that we made in the previous
video into this app so we get a working
prime number detector see you there