Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

iOS Build a Simple iPhone App with Swift Improving Our User Interface Introduction to Auto Layout

Different layout after adding constraints

I feel a little silly adding this question, but can't seem to figure out why I'm getting a different behaviour here compared to the video. Finding auto-layout a bit tricky to understand, and this isn't helping.

Essentially, I'm adding the constraints to the left and right, but these constraints appear to be affecting the size of the label itself. So it's squishing the label in by the 20 points that I'm setting the constraints by, whereas in the video's example, this doesn't happen.

Not quite sure where I'm going wrong!

5 Answers

Just in case others come up against this - I found that essentially just continue on if you find things look different from in the video. Weirdly, at the moment at least, the next video displays everything differently again, but I believe things sorted themselves out when you start to resolve the view, which comes a little while later.

Basically, don't worry if things looked different to what you saw in the video - it all eventually syncs back up again!

Thomas Dobson
Thomas Dobson
7,511 Points

It sounds like your attaching your constraints to the Superview Margins... as in your label is 20 points from the edge when your trying to make it go to the edge of the screen?

If that is the case, delete your margins and try this:

Select your label and go to add constraints add a left and right constraint, ensure the left and right constraint values are zero Uncheck the "Constraints to Margins" option. Your label should now connect to the edges of the screen.

I hope this helps.

Hi Thomas - indeed, if I uncheck 'constrain to margins' and then create the constraints, I get what I believe I'm meant to be seeing, sort of. I'm seeing the blue spacers outside my label box, leading to the edge of the screen.

Sorry to be all 'but in the video'... but... in the video, this is left checked, and those spaces aren't there. In the video, essentially the label box looks exactly as it was before, just with the red box around the outside of it now. So I can either follow the videos instruction and my label box gets smushed up, or work around it with a constraint of 20 on the margins, with the constrain to margins unchecked... oh, I'm really not sure. I think I may just have to leave this step and just make sure I'm practicing enough to understand what's happening here. Because I guess the more I look into it, the more I don't fully understand what's happening in the video itself.

Xavier D
PLUS
Xavier D
Courses Plus Student 5,840 Points

I tried and unchecked that box but nothing happened...however...nothing appears to be wrong either

Seconding that my label was squashed and this part made autolayout seem confusing / fiddly, which isn't a great omen when it's the first and seemingly easy interaction with the auto layout features for us students. Prioritizing updating this video and making sure you're very specific would be a really good idea IMO