From the course: iOS Development: Auto Layout Programmatically

Visual Format pin constants - iOS Tutorial

From the course: iOS Development: Auto Layout Programmatically

Start my 1-month free trial

Visual Format pin constants

“

- [Instructor] You've learned the basics of using the visual language. What we got so far is not very pretty. We need to get more sophisticated with it and use the aligns and spacing better. Change the constraints to have all the horizontal constraints touching the superView. Go back to your code, stop the app, and let's do two things here. I want my constraints to be like I have here that the horizontals are touching the superView, but I'm gonna make all the verticals not touch the superView like this and have a little bit of a margin. Go ahead and run that. Click the hamburger and see what happens. The back button is a big chunk and the order button and the label are still small. Since there's something that needs to stretch, the first one is the one that's affected. You can specify space for a pin in the dashes. So for example, I'm gonna stop this and go back to my strings here. I could put the space between the order button and the back button to 150 point and I do that by putting a dash 150 dash just like that and 60 points from the back button to the label the same way. Choose the iPad 9.7 inch. That way we can see the borders and the view a little better and then go ahead and run that code and you can start to see the gaps we had made so we have a large gap between order and back and we have a gap between hamburger for the label and the back button. I can also do the space between the views and the superViews. I'll change the strings to this. So I'll shut this down again and over here where I got horizontal constraints I wanna put a 15 here the same way I did it before so there's a 15 space here and then I'm gonna put 15 space here so I'm leaving and trailing with 15 points. And for the vertical, I'll start with 15, but I'll end it with 100 points like that. We've got 100 points from the bottom to the label and then 60 points, this is the back button, and then 15 points so all my edges except for this bottom one are 15 points. Okay, run that on the iPad. Hit hamburger. You get that 15-point margin here and here, 100-point margin here. Now if you look at this carefully, it sorta looks like the back button didn't do what it was supposed to do. If you look even more carefully, you'll see that there's a little bit of color behind the navigation controller. If you go this way, you'll see it even more. You can see the color here if you rotate it. So here's what's going on. The value found over here is always to the superView. You only get a safeView value, which avoids the navigation bar, with default values. Any specific value will always go to the superView. Now to just deal with all this stuff, I'm gonna start hiding the navigation bar. So with the app stopped, head up to the very first line of layoutViews and above imageView.isHidden, put in this navigationController.isNavigationBarHidden set it to true and that'll give us a cleaner slate to work with going forward. Going back to our constraints, we can change our top and bottom spacing to 20 so I'm gonna change this to 20 and this to 20 and run that on the iPad. Click hamburger and that's all starting to look kinda good. Here's a rule that you can follow. The pipe defaults to the safeView if there's no spacing. If there's spacing, it represents the superView. Be careful when setting up views to take this into account.

Contents