Swift Components Tour – Autolayout Intro – How? pt. 2 – Button1000000

In this lesson

The Swift Components Tour is over! But let’s talk about autolayout, specifically the who, what, when, where, why, and how of autolayout. Today, how to use autolayout, part 2, Button1000000.

Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


But what about Button1? Let’s make sure that we have Button1 where we want it, 12 pixels to the left of Button2. What about the size of Button1? Do we want to keep it where it’s at? Do we want to set it to the same size as Button2? We can do that with these equal width and equal height constraints that we saw earlier and holding Shift to select both of those. Now, you can see that it is assuming, with this dashed yellow line, that Button1 should be the same size as Button2. Since we haven’t set constraints for the placements of Button1 on the view, it’s assuming that it’s going to be at zero zero, which we will fix in just a second. And these little badges with plus values going on here says that the actual width of Button1 is 69 pixels less than what our constraints are tell it to be. Same with the height, 28 pixels less than what the constraints are telling it to be.


What if we want to just keep Button1 to the same height and width that it is now? We can go down again and check these height and width boxes and add those constraints to Button1. We can see over here in these warnings and errors for this scene in the view controller that Button1 needs constraints for its X position and Button1 needs its constraints for its Y position. It’s expecting it to be the size that we set but its X and Y are going to be zero zero that we see here with this dashed yellow line.


But what if we don’t want Button1 to be titled Button1? What if we want it to titled Button1000000.  We can see that then the button title gets clipped and is shortened with this ellipses here to say that the title at it’s current font size and font cannot fit in the frame size of the button in this current context. How about we select this width constraint and set its relationship to be greater than or equal to 55.


Actually, what we can see with this dashed line again is that since we don’t have constraints for the position yet with Button1000000, it’s assuming it’s at zero zero still, but the size has adjusted to fit the content.  Because we said that the width of Button1000000 can actually be greater than 55. In it’s current state, it is at least greater than or equal to 55. If we shortened it, it’s going to complain that it’s 7 pixels shorter than 55 pixels. So let’s undo that. We can actually increase the width to fit Button1000000 as best as we can or, however we were wanting to, to Button1000000 so that all the text does fit in the button. We can see that it’s now 126 pixels wide but there’s no complaining going on because it is at least 55 pixels wide.


Again, this is just an example. We could be basing the width of this button off it’s text like we’re doing now. We could be setting it at a fixed width. We could be setting it to calculate its size based on the current canvas. Maybe if the view is smaller, then we want the button width to be smaller. There are ways to do that but this is just this introduction for this example.


We need to make sure that iOS is going to calculate the Y position for this button correctly to be centered vertically in the container. One way we can do that, again, is right clicking and dragging to the view and choosing Center Horizontally in Container.


Or another cooler thing we can do- because really, what we are wanting is to keep these two buttons aligned next to each other. We’re going to right click and drag from Button1000000 to Button2 and choose center Y. What that means, it’s going to make sure that the center Y value of Button1000000 is equal to the center Y value of Button2. We’ll select that, and now we can see this dashed yellow line has moved to the correct Y value to be equal with Button2. Something to point out again was that that menu was context sensitive so if we move Button1000000 under there we could actually select the center X to be equal with Button2. But we don’t want to do that. We don’t want them to be stacked on top of each other with the center Y and center X equal to each other.


So now all that there is left to do is to make sure that Button1000000 lays itself out 12 pixels to the left of Button2. We have covered this. Normally what you would do with frame based layout is maybe you would get the X position of Button2 and then subtract 12 and then subtract the width of Button1000000. Or maybe you would place it so many pixels from the left of the screen but then it might not always be 12 pixels from Button2 based on the current environment that you’re in and the real estate that you have to work with.


Again, from the last video, we’re going to drag from Button1000000 to Button2, select horizontal spacing. Again, that will select the two closest attributes from both items. So the trailing attribute of Button1000000, which is the same as the right attribute, and the leading attribute from Button2, which is the same as the left attribute. Again, we can go over to that specific constraint, trailing space two, Button2, and change that constant to 12, press Enter and now our constraints are all laying out so that the content will display how we want it to display.


But there is one problem up here, there’s still a warning that says that the constrained width of the button does not match what it is in the storyboard. And the same with the X value. Actually both of those are stemming off of the width constraint and what Xcode is actually doing here is that it is calculating the exact minimum width that we need in this button to display the text.


One way we can do is click this yellow triangle and it will give us some options for Xcode to automatically fix some problems here using some different processes. We can do through those to see if any of them work for us. Or we can also do this manually and set the width to 123 as your device is going to expect it to be. We’ll just bring that down to 123. Now the X value is off. You can see that it’s looking for 108. We can just type 108 here and the view will change on the scene according to this current frame value.


But, how about we try this way now? We can say update frame and that will move it to the right. Or what if we selected update constraints? If we select update constraints, it’s actually going to change this trailing space value to equal 20. But that’s not what we’re looking for, so again, we can go down here and we can change that to 12 and the view will adjust accordingly. And now, on any screen size Button2 is going to be centered at this size. Button1000000 is going to be centered with as short of a width as possible while fitting it’s text but at least 55 pixels wide and 12 pixels to the left of Button2. As long as this is the desired effect we never have to touch these constraints again.


Again, this is just an example showing you some of the how of Autolayout. If you know how to use Autolayout after watching this then I must have done a really good job and this must have been a great example. But I don’t expect you to know anything more than just to get started with it. But hopefully this can get you started with it or get you a long way. Thanks for watching.

Additional Info

Register to get access to additional resources and info.