This is my storyboard:
This is the iPad Simulator:
For the constraints I go to the bottom right and click on the button that has a triangle with two extruding bars (it sort of looks like a star wars fighter with a triangle as the cockpit). I scroll down to the section that says all view in view controller I click on clear constraints. Then I go back to the same button but this time I click add missing constraints.
Why is this happening? How can I fix it?
Adding missing constraints doesn't mean "add the constraint I think will look better in my project". Xcode adds some constraints to keep everything in place, but this may (or may not) be what you want.
To paint a control in place without ambiguity your need at least 4 constraint, two on each axe (two for X, two for Y). I recommend to clear all constraints, and start control by control, adding constraints.
Some tips:
you can set the constraints, then move a control, ask Xcode to refresh the constraints to the new position with the update Constraints option. update frames option do the opposite: given a set of constraints, repaints your control in the right position.
Use the Assistant editor to split your Xcode view, so you can select Preview and have while designing your Storyboard and see how it looks. You can add different devices to see how it fits (little + button at the bottom)
Related
Why is my the elements of my storyboard (buttons) showing up differently in the simulator to the device? I've got auto-layout on, and I've disabled size-classes but surely this shouldn't matter?
How it looks in the storyboard: http://s11.postimg.org/h1xbn5f9v/Screen_Shot_2016_02_09_at_18_57_54.png
It looks fine on the iPhone 5 (it matches the storyboard), although on the iPhone 6 and other devices it's different.
How it looks on the iPhone 6:
http://s17.postimg.org/tfdaagt3y/Screen_Shot_2016_02_09_at_18_58_39.jpg
I'm using a view to hold together the buttons and centered it horizontally.
Any ideas? I'm baffled. It seems I'll have to programmatically place it if this is the case...
From the images you've shared thus far, I don't see any constraints other than the height/width. You need to select the buttons of interest and then hold Control and drag to the bottom of the container, click "Vertical Spacing to Bottom Layout Guide" and then on the right panel, set Vertical Space Constant to adjust (incase you find yourself having to temporarily place the button in the container to get the "Vertical Spacing to Bottom Layout Guide" option when Control + Dragging). Looks like you'll need a negative number for the Vertical Spacing constant to achieve the buttons being slightly out the bottom of the container. Then "Update Frames for Selected View" by pressing Control + Option + =
You can also try clicking the little triangle icon and clicking "Add Missing Constraints." This will add missing constraints needed to keep your icons where they are in the Storyboard, but sometimes I've found that using this automatic feature doesn't achieve my exact intent.
I have read through several tutorials and stack overflow posts about this but I can't get it to work.
Here is what I'm doing:
Create fresh Xcode project
Add Button to center of default view in IB
Make sure size is set to Any, Any
click align button in lower right corner to Add New Alignment Constraint
Check box for Horizontally in Center: 0
This works as expected. However, if I copy and paste a button from an existing project, and go through the same steps, I encounter problems.
For example, if I resize to a compact width, the new, copied button is not centered, and instead has a +100.5 next to its constraint.
I have compared the settings of the two buttons and they are the same.
What is the issue here?
I have a number of views from an old project (xcode 5) that I would not like to create, but all elements have this issue.
Just for future reference to this issue, the issue was related to not adding constraints on the second screen. One easy way to do that is by asking Xcode to add suggested constraints for you.
When you drag your button in the middle of screen, you can see that Xcode gives you some hints and shows you horizontal and/or vertical lines when you move the view in the middle of the screen. You can make sure that the view is in the middle of the screen if you can see both horizontal and vertical lines:
And then you can ask Xcode to add missing constraints for you by tapping the first item in the lower right, and choose Add Missing Constraints
For more information on Auto Layout and how to use it, I would suggest checking out Auto Layout sessions in Apple WWDC sessions.
I have been learning Xcode and iOS and things are going well with coding but I am confused about a few options in interface builder.
It seems that when I add a contraint I can choose to "Update Frames" and then either "Items of new contraints" or "All Frames" but it seems that I don't always need to do this... sometimes I do and sometimes I don't - I don't think I truly understand the concept. It seems to be optional. When is the case to choose it or not?
Once a constraint is added, then should that be it?
There is also a context menu (Resolve autolayout issues) (3rd item on the bottom on interface builder, represented by a triangle between 2 vertical lines) which also allows me to Force Update of constraint or update of frame. Why is this needed ? I notice the options inside are usually disabled so I presume this becomes active when there are issues ?
I have tried searching the internet and I can't find anything specific; the more I read, the more confused I seem to get.
Also, a sanity check: a frame is the bounding box of every single control (view) not just the viewcontrol, so every view (control) as its own frame. Is this correct?
I'll try to explain the concept of constraints and storyboard representation.
Constraints - are used to determine the position of UIView elements inside your view. For example, the vertical distance from top of the view to UIView element top. When you add constraint using the storyboard it plays 2 roles:
Positioning the element inside a view when your app runs
Positioning the element in the storyboard representation itself
Update Frames - is used when you want to update storyboard display so that it fits the currently applied constraints. When the display of the storyboard does not match the constraints a warning will appear.
Add missing constraints / Update constraints - will create/change the constraints applied on UIView element to match what currently presented in the storyboard. Kind of the other way around from update frames.
This answer is not a replacement for Apple's Auto Layout Guide
You do not have to click on "update frame" every time you add a constraint, if you do, it will update the frame of the view to whatever it should be based on the constraints. Yes, every view has a frame and it is the rectangle relative to the views superview.
More often than not you'll probably click on update constraints (Shift + Command + =), this will allow you to resize views that are already constrained, and have the constraints updated to match.
I just like two buttons above each other with no margins. This seems like an easy task, but I am new to iOS and I wasted too much time now. I tried dozens of contraints but it never went out well. I always ended up with setting the leading Spaces to -24 and having marings above and beneath the buttons. I am using xcode6, iOS8.1 and storyboard. My app is landscape only. Can someone please teach me what to do?
The buttons should look like seen in this picture: Fullscreen, no margins and Button1 should reach unter the statusbar!
I'll outline the steps:
Pin Button 1 to 0 spacing on Left, Right, Top
Pin Button 2 to 0 spacing on Left, Right, Bottom
Select both buttons, then Pin heights equally
(You can access pin either from the Editor tool bar in the top menu, or from the second icon in the constraints area)
The thing with constraints and auto layout is that you only need enough constraints to let the app calculate where elements should be at all times. You might be able to get away with less constraints.
To get remove the borders, you need to change the button Type in IB from System to Custom, then you can drag and alter the margins to remove them. Following that you will need to update constraints on the buttons.
I am trying to design UITableViewCell in AppCode, but It is not showing me the constraints
However, in their blog video, it seems to work
I saw that AutoLayout is set in Document, but still :(
Anyone knows what I am missing?
This is not specifically for AppCode. This is for the new size classes. I hope some of this is similar:
The first thing you should do is remove all constraints.
Second you need to go into each element and add their own constraints (do not "add missing constraints"). Then only add constraints for what you want. If you later ship elements you can click "Update Constraints" as it will only update the values; it will not add new ones you don't want.
EX. If you want a button always 100px from the top of the screen only add: height, width, left, and top constraints. This will insure when moving from the 3.5inch to a 4inch screen the button is not shifted.
Hope this helps.