Hi Alex here from rebeloper.com and welcome to ASD - App Store Domination
and today we are going to talk about safe area layout guides so let's get started!
Okay! What are safe area layout guides? Well they are one property of our auto
layout constraints and I will show you in practice today how you can implement
them. But what do they actually solved? Well as you might have already seen
there are a lot of issues with older apps one iPhoneX devices or even
your simulator. And that is that the top is very much clipped at the... of the view
is clicked so let me just show you how that looks. I will just open up our
current Xcode and let me just go into here and first of all let's go to our
ViewController and let's create a simple view that we will add to let's
say to the top top left corner of our view... Let's return
this so: let view = UIView and let's return view here. And I will just
simply add our view.backgroundColor = .red.
Okay and I will just make this backgroundColor white for my whole view.
Now next up is that we need to add our custom view to our view.
So: view.addSubView(customView) and finally we need to
anchor it to our view. And for that first of all we need to set our
custom views translatesAutoresizingMaskIntoConstrants = false.
And then we can add our constraints. So: customView. topAnchor
and let's have here constraint. And I will just choose this equal to and
our views top anchor. So the very top of our view. And of course we need to set
isActive = true. Okay, we will do the same for our left
anchor. So: customView.leftAnchor.constraint(equalTo: view.leftAnchor)
and we will of course will not specify any constraints if you are
having two noticed already. So let's add this to true and finally we are going to
set the width and height to a constant and I will just type in here our
width and that is let's say 60 and it will be a CGFloat. Okay!
Now I am ready to add our constraints, so: customView.widthAnchor.constraint
and I will choose this equalToConstant: width. Okay and finally
our customViews.heightAnchor will be a constant of our predefined the width.
Of course don't forget isActive = true and isActive = true.
Okay! Now we should see our block. Let's choose our iPhoneX simulator and
let's see our view, our red view here. Our custom red view.
Okay, there it is! And this is what I am talking about, if you are simply choosing
the top anchor then this will happend and if I just go ahead and rotate this
to the left you will see that this happens laughs. Let us choose left
because I just rotate to the right. Okay! Not so good! Okay! And now let's add our
safe area layout guides and this is what you came for to this video. What we
need to do is constrain this not to the top anchor but to our safeAreaLayoutGuide.topAnchor
Okay! And again safeAreaLayoutGuide.leftAnchor.
And that is all you need to do this is how easy it is and this is how
easy Apple made us this safe area layout guide to use. You can use it with ease.
There you have it! Okay! Let me just rotate this I believed in the left. Yeah
there you have it! It is at the top of our safe area layout guide and on the
left of our safe area layout guide. Okay! There you have it. Now you know how you
can use the safe area layout guide. Hope you enjoyed this video and as usual I will
see you in the next one! Good stuff! Now if you want to see more of this video
and want to boost your app business go ahead and take a look at my 30 Days
Challenge App Store Domination. Go ahead and click the link down below and I will
see you inside ASD - App Store Domination! Let's get to work!