In XCode I'm working on a small view I use on several screens:
There is the black bar on the top. By default it has 2 constraints that defines a static distance between the bottom of the bar and the bottom of the view. So if I load this view on a large screen the top bar will be stretched out. I would like keep it fixed height and want to stretch the view in the center instead.
I've tried to delete the 2 constraints but they were re-created immediately. Also tried to set their value to 'auto' but that did not help either.
How can keep the top bar fixed and stick to the top - and having the view in the center dynamic height?
You'll want to add two new constraints. One that sets the top space of the top bar to superview and one that sets the height of the top bar. Once you add these constraints you should be able to remove the other two that are causing this issue. You can add these constraints using the middle button (pin) in the bottom right hand corner of the storyboard window:
Related
I'm trying to make a row of buttons on the bottom of the screen and the buttons are images. I was having aspect ratio issues so a few sites recommended making image views and simply put transparent buttons on top of them. I've placed six image views in a stack view and constrained it to the bottom. I thought it would make sense to put six buttons in another stack view and then also constrain it to the bottom, but it always constrains to the nearest neighbor so now the images are actually on the bottom of the screen, but the transparent buttons are vertically sitting above them. Is it possible to have both constrained to the bottom of the screen so that they completely overlap? Thanks!
It is very much possible, from what you have written I assume that your second stackView is pinned to the top of First stackView. Change that constraint to bottom of your superView. This would be enough for your requirement.
Also Instead of using two different stackViews, I would recommend doing this in one single StackView, which will 6 UIViews inside and each UIView will have UIImageView and UIButton inside.
(Thanks, Sujith Chandran and Neil Hiddink for pointing the way!!)
Here is my solution: After selecting the bottom constraint for the stack view that contained the transparent button overlay, I went to the size inspector and changed the "Second Item" to superview, opened second item again and selected bottom, and then set Constant to 0. Eventually I had to change the value of constant to -70 to get the desired position because I previously set the button images to a height of 70.
I am designing a prototype cell in Xcode to display events in my iOS app. At the moment I have the following design:
The cell is constructed like this:
Stack View
Label (99:99)
View (Orange bar)
Label (Event title)
I would like to have a top and bottom margin on the orange bar of 2 pixels (basically not have the orange bar occupy the full height of the cell). I tried to add a top and bottom constraint on the View which looks like it is working, however Xcode is complaining about this solution (see screenshot).
Can anybody help me on how I could best accomplish this?
It is because of you have just set top and bottom constrain. you also need to add other constrain. Just click on red round. and set add missing constraint.
set constrain as shown in below.
Image of the constrain
Edit:-
View Hierarchy:-
Set View (Orange bar) height less than 4 pixels.After that set top space and bottom space of orange bar view to superview 2 pixels.
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.
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.
I am trying to use auto layout in x code to correctly resize my view to switch between iphone 4 and 5.
I have a similar problem as the one presented in the picture. Let's consider the UILabel at the bottom is fixed.
I want the top UILabel to be at the middle of the space between the navigation bar and the bottom label. I don't know how to add a constraint that says "top space and bottom space must be equal". As a result, I can only fix one of the two constraints and I cannot get the expected result.
Thanks
The way I do this in IB, is to embed the top label in a UIView. Give that view a standard vertical spacing constraint to the top layout guide, and another to the bottom label. Also give it a fixed width. Give the label centerX and centerY constraints to this view, and it should keep it centered in different screen sizes.
How about adding a container view that fills up the space between the 1st label and the navigation bar, and then center the 2nd label inside the container view.