Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

iOS Build a Simple iPhone App with Swift Improving Our User Interface Finishing Up Our Layout

Dhanish Gajjar
Dhanish Gajjar
20,185 Points

How to pin the top of this label, the fun fact label, to the center?

I would like to know how I can make the label expand from below, when it has more lines of text.

5 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points

That is actually covered in the first video of the section of the course you are in. Pasan discusses it starting about 3:30 into the video.

:dizzy:

Sean Wilson
Sean Wilson
2,572 Points

That section of the video describes how to make the Label expand, but it doesn't answer the main question asked by Dhanish.

Specifically, how do you pin the TOP of the Label to the CENTER of the parent View?

Pasan alludes to this ability at the very end of this video, but I don't think it's possible without using techniques that haven't been taught yet.

Another way is to click on the "center Y alignment constraint" for the fun fact label (i.e. the thin horizontal blue line going across the middle of the label). Once the constraint is highlighted, go to the Size Inspector window, change the "First Item" dropdown to "Fun Fact Label.Top"

Xavier Avery
Xavier Avery
8,059 Points

The show another fun fact button is cutting the words out. I tried do like the video said in the earlier video but it still isn't working correctly.

NIKOLA RUSEV
NIKOLA RUSEV
5,293 Points

hi,

Dhanish i cant open your link. can you set again?

Dhanish Gajjar
Dhanish Gajjar
20,185 Points

Hey NIKOLA RUSEV Sorry man, I had cleaned up my drop box. I recorded it again, here it is https://www.dropbox.com/s/b3s5naqb5hu2t7r/FunFactOp.mov?dl=0 Hope it helps. It's a simple way to anchor it to the top, so when the paragraph expands, it only expands towards the bottom, looks more consistent.

NIKOLA RUSEV
NIKOLA RUSEV
5,293 Points

i understood what you did. but if you make only a constraint for the fact label only to the top like you did, you have actualy fixed points from the label to the top.( for example if you work on 6s model its 279.5). and the same if you play on simulator on model 5 or 5s 279.5 points will not be in the center it will be under the center. and passan in video said that ,,we can pin the top of this label, the fun fact label, to the center.'' so the whole point is to pin fact label with his top to the center. never mind in the nexts courses mayebe i will figure it out. tnx anyway

Dhanish Gajjar
Dhanish Gajjar
20,185 Points

Hi guy! actually Jason Anders tried to explain it, and it's so simple, I didn't understand the first time. It is true that Pasan talks about it, but doesn't show it exactly what to do. I have recorded a small video to show, hope it helps. I also had to delete all the constraints and start fresh, but it might just work fine at your end. Make sure you delete the constraint between the "Did you know?" label and the text area, and then only implement one which pins the text area to the top. Here's the link

https://www.dropbox.com/s/fa86dr8w4etzi3x/constraint.mov?dl=0 Let me know if it works for you guys.

Sean Wilson
Sean Wilson
2,572 Points

Hi Dhanish! Thanks for taking the time to reply and to make a video. However, that's not exactly accomplishing what Pasan alluded to. That pins the TOP of the Label a certain distance from the TOP of the parent View, rather than to the CENTER of the parent View. The functional difference is that on devices of different screen lengths (eg. iPhone 5, iPhone 7 Plus), the Label will appear slightly above or below the center of the screen, which doesn't look as visually appealing.

I think the behaviour Pasan briefly described would require significantly more work to achieve. On Stack Overflow, rmccreary describes a clever solution by using an additional thin View. You can center align that thin View in the parent View, then top align the Label to that thin View. Here's a link: http://stackoverflow.com/questions/26880009/how-to-align-the-top-of-a-view-to-half-the-parent-views-height-in-xcode-6-1