1

I’m working through the Auto Layout portion of the Calculator Assignment of the latest Stanford CS193p course using the latest Xcode in the App Store (6.1.1 6A2008a).

The constraints for the Label for the display work properly, but when I was laying out the Buttons, Auto Layout seemed to ignore the presence of the Label. Even after adding the constraints as in the lecture, the Buttons seem to ignore the Label even though the constraint counts matched up with Professor Hegarty’s.

The layout “works” like this, but it isn't “right” and I’d like to know what I’m doing wrong here so I don’t get into bad Auto Layout habits.

I’d post screenshots, but I apparently don’t have enough reputation to do so, so I threw my working code up on github:

https://github.com/krger/cs193p-2015/tree/master/Calculator

I’d appreciate any input/guidance/suggestions. Apart from here, there doesn’t seem to be a place where iTunes U “students” can discuss the course.

krger
  • 13
  • 3

5 Answers5

1

Your top buttons are pinned to the Top Layout Guide instead of to the bottom of the display label. Remember, Professor Hegarty said to pay attention to the blue lines. Your top button are overlapping the display label, so when you created the constraints for the button, AutoLayout chose to pin the top buttons to the Top Layout Guide.

To fix this:

  1. Get rid of all of your constraints.
  2. Add the constraints back for the display label.
  3. Select all of your buttons and drag them down so that top of 7/8/9/x/sin is aligned with the bottom of your display label.
  4. Add the constraints back for your buttons.

Another way to fix this that works is to:

  1. Delete the top constraint for each of the 7/8/9/x/sin buttons.
  2. In the Document Layout view, control-drag from each of those buttons in turn to the display label and choose Vertical Spacing from the pop up. This will add a vertical spacing constraint to the bottom of the display label. You now just need to fix up the constant.
  3. Click on each of the 7/8/9/x/sin buttons in turn. Edit the Top Space constraint in the Size Inspector, changing the constant to 0 or 8.
vacawama
  • 150,663
  • 30
  • 266
  • 294
  • 1
    Thanks for the quick answer. When I was originally placing the `Button`s, I tried to line them up against the bottom of the display `Label` but I didn’t get blue guide lines for the bottom of the `Label`—only for the top guide. I removed all of the constraints and started over. I deleted the Display `Label` and made a new one, constrained to the top, left, and right. I made it taller than it should be so it would prompt me to fix the height to match what it expects. Even now, I'm still not getting alignment guides to the Bottom of the `Label`—only to the top guide. Checked in current code. – krger Mar 01 '15 at 16:21
0

I have had the same problem, and after some trials and errors, I've got a solution.

Although, I don't know the background mechanism of auto-layout system of Xcode, this issue seem to be related to the 'Intrinsic Size' of UILabel.

So, at the 'Size Inspector' of the Label, change the 'Intrinsic Size' value from 'Default(System Defined)' to 'Placeholder'.

After then, you'll be able to see the blue guide line.

Anyway, if you know how it works like that, please explain the reason. Thanks.

Min-ho Kim
  • 1
  • 1
0

Around 56:10 of the second lecture, he says that if you select your label, then select "Reset to Suggested Constraints" in the "Resolve Auto layout Issues" icon located in the bottom right hand corner (little triangle between two vertical parallel lines), you can see the bottom edge of your label. This seems to have fixed it for me.

halecommarachel
  • 124
  • 1
  • 9
0

I had a very similar issue where my buttons weren't exhibiting behavior that they had understood I want a margin of 8 relative to the top label. They were just spacing themselves off the bottom of the view.

Well... the issue was just that. Despite setting 8 in the top constraint (in the Pin-->"Add New Constraints" Section), the bar was still dotted. (I'd post a picture but don't have enough reputation).

You need to make sure that when you add new constraints, the bar becomes solid. This means the system understood the constraint.

I fixed this by deleting the number, tabbing to a different box, and entering the number again. I'm pretty sure it's an xcode glitch, but, after a few crashes of xcode, it finally worked. Hope that's helpful... this was very frustrating for me too.

Mihnea Munteanu
  • 1
  • 1
0

I ran into the same issue, and was able to resolve it by clearing the constraints, resizing the label, and trying again.

I've attached a screenshot of my sizing that gets the auto layout working correctly. You could try copying my x=20, y=28, and height=38 as you see in the size inspector panel below:

Auto Layout label fix

Austin
  • 1,369
  • 1
  • 13
  • 19