I have a UIView in my UIViewController in storyboard which I want to add a constraint on to space that view a distance from the top edge.
Now, when I do the usual by ctrl + drag to the ViewController's main view I only get option to set it to top layout guide.
This is a problem for me because at one point in the app Im going to move the main view up around 20-50px and what happens then is that view I have will not move... because its not aligned to superview.
How can I manually do this in storyboard or do I have to add it programatically?
Im using xcode 6.
There is an arrow to the right of the constraint constant value. If you click on it, a menu pops out where you can choose what is it that you want to make your constraint relative to. If you choose 'View', than it will pin it to the top of the view.
You should be able to do it by highlighting the view you want in the storyboard and then selecting Editor > Pin > Top Space to Superview in the top menu.
This is outdated in XCode 7, see #PaulGurov's answer instead.
TL;DR: You can constrain to the margin by pressing the Alt key on the keyboard.
One can also add that if the view you are trying to pin is not a direct subview of the view that you want to pin it to, the suggested approach is not really valid. Let's say the view hierarchy looks like that and you want to pin the image view (Parallax Image View in this case) to the view controller's view (View in this case).
To do that you just Control + Drag from the Parallax Image View to the View. That presents the default choices where you can see Vertical Spacing to Top Layout Guide to pin the Parallax Image View to the top layout guide.
What you want is to pin it to the top (margin) of the view. To do that you have to switch to the other set of constraints by pressing Alt
I had a whole bunch of constraints already there and I just wanted to change them rather than break them. Turns out if you double click on the constraint to edit, then click on the item that has the ".Margin", you can just turn off the "Relative to Margin" by selecting that item.
Dan's answer works. I just wanted to state that if you set your view in storyBoard at y < 20, and configure constraints through the pin panel, it will set top to superview:
If the height of the view is set to 0 by accident, Vertical Space to Top Layout Guide will NOT appear. Vertical Space to Bottom Layout Guide will appear, however, which must have made sense to someone inside Apple circa 2004.
None of the above answers worked for me, instead I have to do a hack to set my subview's top with superview's top instead with Top layout guide.
First, set the subview center vertically with superview.
Then, change the Center Y constraints for subview as well as superview to Top constraint.
You are good to go now.
Related
I'm hoping someone can help me out here. I set where I want the items to be using constraints and when I run and build the app it seems to push everything to the top. This occurs even when I don't put any constraints on any items. I've attached pictures if they help at all.
Have you tried setting the Top Constraint of your topmost subview to "Top Layout Guide" as seen in this screenshot? (Looks like your Top constraint is to the 'Superview' instead!)
http://i.stack.imgur.com/fpHAQ.png
Making sure your view is selected go click on the triangle constraint button in the bottom right and select clear constraints under all views.
Place the views where you want them. Then for each element click the square constraint button on the bottom right and do this:
Uncheck constrain to margins
Pin to top bottom and both sides
Check width and height
Then select the triangle and choose update frames for selected view.
Fine tune position by by selecting the view you want to move and updating the constraint value.
Because sometimes its just easier to start again than to try and fix constraints.
I've figured out a solution. Somal was on the right track in terms of the Top Layout Guide. I simply had to right click each individual object to drag onto the view and select Vertical Spacing to Top Layout Guide (See picture) or I could of simply delete the entire ViewController and start from scratch with no copying and pasting from the old View.
VerticalSpacingMenu-Image
Why the pin constraint doesnt work? I have no constraints, and I want to pin one view to bottom of main view, so I select the child view, then I click the icon from "w:Any h:Any row" in Interface Builder bottom right (Pin), then i click the bottom "I" to create bottom constraint, but if I resize the controller view (in design mode) the view is not moved but something like this appears: (The red line with number - instead of moving the blue view to bottom).
I have pinned it to "bottom layout guide". I also tried to pin it to "view" from dropdown while pinning, but that doesnt work too.
If I look on the "Issue navigator" there is only warning saying "Position and size are ambigious for View"
Without any other other constraints there is no way for Xcode to know what you want to do with the view, all it knows is that you want the bottom of your subview to stay 99pts away from the bottom of the superview, but doesn't know what to do with the top, left, or right edges.
Try adding constraints for the remaining 3 edges, it can be as simple as setting the width and height (the options under the bottom edge in your screenshot), or something more complex depending on what you want to achieve.
You need to define the position of view properly. So that constraints can define position and size of the object.
Like in your case you have only provided constraint from the bottom, which will not be sufficient to define position. So you need to define either Height and Width constraints or top, left and right constraints.
And as long as long red line is being shown keep adding constraints.
I'm setting constraints in IB like
But when i run the app on iPhone4 it shows
Why last three buttons not shown properly on iPhone4 screen?is there any mistake in my constraints ?
Edit:- This is my view hierarchy:-
UITabbarControlle -> UINavigationController -> UIViewController and tab bar controller is rootviewcontroller.
Edit:- FYI there is no effect of any constraints on the screen(basically autolayout not working for me).
You have designed the buttons on 4 inch and you don't have enough space on 3.5 for all of them.
One way to do this is to place scroll view over your view controller's view and add the buttons on the scroll view.You have to add constraint on the scroll view , to be fixed on each side (without width/height).
After that grab all the buttons and add constrains on each side and sizes , so they will be fixed
If you , on other hand, have enough space for all the buttons to fit in 3.5' without any top/bottom margins you can add the button in UIView (instead of scroll view). Place the buttons in the view and set fixed width/height on that view.Center the view and it will keep his size (with the buttons inside on both screen sizes)
There is an issue in your constraints, you have to update them.
You can do as is shown on the image bellow:
Once done, you will see, the Orange lines under your buttons turned to blue.
I wish that helps you!
Your view is probably within a UIScrollView which will extend your total contentheight. It is not related to the absolute height of your viewport.
However, what do you expect? Your 3 buttons would overlay to the next buttons, if your theoretical approach would work.
What you need to to do is to wire all buttons to each other and give the view a top and bottom constraint to the top and bottom layout. You probably need to adjust your view to be on full screen and not to extend to the bottom.
Hint: as long as something is 'yellow' you need to add further constraints.
Just created a demo single view controller project. Controller view contains collection view, and it contains cell view (orange). Cell view contains a view (selected inside) and I need to align it to bottom of cell view. However, when I select orange view inside cell view, press Ctrl and drag it to cell view I don't see "Align bottom to container view" or similar. There's only "Bottom Space to Container" selection and I'm not sure does it have the same behaviour:
And if I select "Bottom Space to Container" and don't get desired "Align bottom to parent" system constraint:
I need to add a new label in existing code base with auto layout, and the label must be positioned next to existing label that has "Align bottom to: parent cell" system constraint:
There's some setting "Bottom edges" if I select my new label and press align button icon at the bottom. However, this selection is disabled anyways and I assume this is user constraint but I need system constraint "Align bottom to: parent cell". Any suggestions why existing label has this constraint but I can't add a similar one to the new label?
Just faced the situation in which the bottom constraint was being pinned to the Bottom Layout Guide (a TabBar, in my case) instead of to the superview, as I wanted.
After tinkering around with programmatically created and or modified constraints, I found that you could actually do it through Autolayout's Pin Popover, just by selecting View instead of Bottom Layout Guide in the drop down that appears if you clic on the little arrow of the constraint's textfield.
That was, probably, not very clear, so here:
Adding a Bottom Space to Container constraint is the correct way to go. It will align a view to a constant distance from it's parent's bottom edge. If you add that constraint and it doesn't result in the correct behaviour when resizing the view, there might be other constraints on the view that might need to be removed first (think a top constraint).
You could also align your label to the other label totally ignoring the container of course if you find that easier to setup.
I am attempting to layout a screen design using constraints (auto-layout) from interface builder and hope to avoid coding constraints, but I would accept an answer for either case I guess.
I have two subviews in a contained in a top level view. I want to fix vertical distance of the first subview to the top of the screen (I was able to accomplish that - common use case for a vertical space constraint). I want the second subview to float (vertically) in the center of the distance between the bottom of first subview and the bottom of the screen. The idea is that the design responds somewhat to iPhone 3.5" vs 4" dimensions.
I am having trouble defining a constraint or set of constraints that would accomplish this.
I have tried setting inequalities on the vertical spacing constraints between the second subview and the top of it's neighbor (the first subview) and the bottom of the superview, and playing with the priorities of those constraints.
An idea that was suggested in a few other related posts on SO is to use a container that is pinned to the bottom of the screen, as well as the pinned to the bottom edge of the first subview, and then center my second subview in the container. I was hoping to avoid complicating the view hierarchy if possible, but maybe that isn't easily avoided.
Any thoughts or suggestions?
UPDATE
This answer describes how to do this in Xcode 6.0 (and probably works in Xcode 5.0 and 5.1).
ORIGINAL
If you want to do this with auto layout, you have to add at least one spacer view. It doesn't have to be the superview of the vertically-centered view (or any other view), so it has a pretty minor effect on your view hierarchy.
I recommend not trying to set up constraints in Interface Builder in Xcode 4.6.3. It's just too painful. But if you really must, this is doable.
Create a spacer (a plain old UIView) from the bottom edge of the top-hugging view to the bottom edge of superview. Set it to hidden. Give it constraints to the top-hugging view and the left and bottom edges of the root view, and pin its width. My spacer width is 10:
Add your middle view (here, a button). Give it a “Horizontal Center in Container” constraint. Then select both the middle view and the spacer view and give them a “Vertical Centers” constraint:
Note that if you drop the middle view when IB is showing the correct guidelines, it will set these constraints for you.
You can test by enabling resizing for descendents (but not siblings & ancestors) and resizing the root view in IB. The middle view will remain centered between the top-hugging view and the bottom of the superview: