3

I'm watching Stanford's cs193p lectures with iTunes U and the first demo has been a calculator. In the second lecture, the professor aligns the buttons with the bottom edge of the display label using a black grid line that appears. How do I enable this grid line, so I know that my buttons are directly below the label?

halecommarachel
  • 124
  • 1
  • 9
  • Xcode 6.3.2. The button alignment for the calculator was shown in the first lecture(did that change?), and I also noticed that when I tried to align the whole button group, the grid line for the bottom of the label was missing. I used 32 for the font size. – 7stud Dec 01 '15 at 00:22
  • By the way, if anyone is wondering how the prof selected 3 or 6 buttons at once: 1) If you merely drag the cursor in a storyboard, it creates a selection rectangle. If you stop dragging, the selection triangle disappears. 2) Drag the selection rectangle over 3 buttons(you just need to hit a pieces of each button), release, and all the Buttons will be selected. 3) Put your cursor over any of the selected buttons, and while holding down the alt/option key drag to another area of the storyboard. All the buttons will be copied...(continued) – 7stud Dec 01 '15 at 01:39
  • That's actually not what the prof did because the video shows him hitting the `⌘` key. Sometimes when copying you will fail to move the copy, and then you will end up with buttons stacked on top of buttons--but you won't notice the extra buttons because they will exactly cover the buttons underneath. The only way you will know something is amiss is if you happen to notice the extra buttons listed in the *table of contents* for the UI; or you notice the UI has some subtle problems which you can't explain. – 7stud Dec 01 '15 at 01:39
  • Okay, the prof used `⌘D` for *Duplicate*, which offsets the copy slightly from the original, which means the copy won't be hidden by the original. I like that better than `alt/option + drag cursor`. – 7stud Dec 01 '15 at 09:26

6 Answers6

4

I'm having the same issue. I just resize the label to remove the previous fix and set it manually the height value as: 38 and the blue line appears. enter image description here

Juan Saravia
  • 7,661
  • 6
  • 29
  • 41
  • 1
    I'm using Xcode 7 and I'm having the same issue. The misplaced views warning says the label is expected 38, but when I click fix misplacement using "Update frames", the label is set to 38.5 which is weird. I change it to 38 according to @juancho 's answer and the blue line appears at the bottom of the label when I move the buttons around. – PickBoy Sep 25 '15 at 18:29
1

The guides should be on by default when you first install Xcode, but if they are not, you can go to the Editor menu and select Canvas->Snap to Guides.

EDIT: Snapping controls to guides can still be a little tricky, owing to the fact that the bounds of the controls are not visible. One way to help make the positioning easier is to make the bounds visible. You can do this by, again, going to the Editor menu and selecting Canvas->Show Bounds Rectangles.

WERUreo
  • 194
  • 2
  • 12
  • It's already selected. I can see the blue guides, but the closest one to the bottom edge of the label only lets me align the bottom of the text in the button with the bottom of the text in the label. – halecommarachel Mar 17 '15 at 00:09
  • That's really weird. I just watched part of that video and see how some of his guidelines are black. But when I try to do that exact thing, all I get are blue guide lines. Try this: In the Editor menu, select Canvas->Show Bounds Rectangles. That will show you the bounds of the controls. From there, you should see able to align the buttons and label like you want. – WERUreo Mar 17 '15 at 00:36
  • I think the "black" guidelines on the video are not really black. They look black, but I think it's just a color anomaly with the video. So, ignoring black vs blue lines, I think it's just that it's hard to see exactly where the controls bounds are because they're not visible. You'll see guidelines for the relevant parts of the controls (e.g. the edges of a label or button, the bounds of the text inside those controls, etc), but it can get confusing when you can't see what each guide line represents. Showing the bounds rectangles will make it easier to see. I'll update my answer above. – WERUreo Mar 17 '15 at 03:29
  • Thanks for the reply. 'Show Bounds Rectangles' shows the edges of the label and buttons, but I would like to move all the buttons to right below the bottom edge of the display label using the blue (or black when watching the lecture video) alignment guides. – halecommarachel Mar 17 '15 at 06:31
  • Sorry I'm not being much help. Let me give it one more go. I went through all of lecture 2 of the CS193P course on iTunesU, so I think I know what your final view should look like. I took a [screenshot](https://dl.dropboxusercontent.com/u/25219267/Xcode/Calculator.png) of the finished view. I also left the bounds rectangles visible. That is what you're trying to accomplish, right? Also, just to visualize, I took a [screenshot](https://dl.dropboxusercontent.com/u/25219267/Xcode/lbl_to_btn.png) of the line I get when putting a button below a label. Is that the line you're not seeing? – WERUreo Mar 17 '15 at 11:49
  • Yes, that's the line I'm not seeing. Out of curiously, are you using the latest xcode? – halecommarachel Mar 17 '15 at 15:57
  • Yes, I'm running version 6.2. – WERUreo Mar 17 '15 at 18:43
  • Could you try something? If you add constraints to left, top, and right edge of the label using ctrl + drag to container and selecting "Leading/Top space to margin", then change the font in the label to 32. There should be an error, with the suggested solution to update the frame - do that. Now change the font in the button to size 32 and then drag near the bottom of the label - do you still see the guideline? – halecommarachel Mar 17 '15 at 20:28
  • 1
    What I've found is that up until I apply the "update frame" fix, I can align the button to the bottom of the label. As I have it now, the button's font is 17, if that makes a different. Weird. – halecommarachel Mar 17 '15 at 21:01
  • Yeah, I do still see the guide line after setting all those constraints and updating the frame. That is strange that you're seeing this issue... You absolutely should be seeing that line, especially if you're seeing all the other guide lines. I'm pretty sure there is no way in Xcode to disable certain guide lines. It's all or nothing. Sorry I can't be of more help. If you need me to try anything else for you, please don't hesitate to ask. Good luck! – WERUreo Mar 17 '15 at 23:26
1

I was also having this issue. I found that it has something to do with the "Update Frame" command on the constraints. I just manually changed the height to 38 in the size inspector, and I could still fit my buttons to the bottom of the label.

Ganooch
  • 11
  • 1
  • This worked for me. I deleted the Label and all the Button's and started over. After adding the constraints to the Label, I looked at the *table of contents* for the UI (which can be revealed by clicking on the icon in the bottom left corner of the storyboard). In the *table of contents* for the UI, the top entry is *View Controller Scene*, and to the right of that is a yellow circle. Clicking on the yellow circle reveals the expected height and actual height for the label. Then I selected the Label, opened the Size Inspector, and I changed the height of the label to the expected height. – 7stud Dec 01 '15 at 00:43
0

Click and drag the UIButton into your view, Then use the blue alignment lines to help

TitanSloth
  • 3
  • 3
  • I already have buttons in my view. I can even see the left/right/top alignment guides when I select all of my buttons and move them near the top display label. I cannot see the bottom alignment line. – halecommarachel Mar 17 '15 at 06:27
0

I was able to get the intended result even though I experienced the exact same issue, i.e. not seeing the black dotted guide that would delineate the bottom of the display label.

Before following the steps in the tutorial beginning at 43:30, I made sure the top row of my buttons was well below the bottom border of the display label. Once I followed the steps, everything fell into place.

If you're still having trouble, the instructor provides troubleshooting steps beginning at 54:03.

Matt Levene
  • 1
  • The initial placement of the buttons proved irrelevant for me. Once I added the constraints and chose Update Frame the grid line for the bottom of the Label disappeared. – 7stud Dec 01 '15 at 00:38
0

The solution juancho noted didn't quite do the trick for me. I fixed the problem by referring to his troubleshooting tips following the section where he describes how to dynamically set the width/height of the buttons.

He specifically says that you should refer to the triangular "bulk auto layout" button and click "Reset to suggested constraints" under Selected Views to try to make the "blue line attainable".

Nadir Muzaffar
  • 4,772
  • 2
  • 32
  • 48