I have a Vertical Stack View on my screen (Alignment = Fill, Distribution = Fill).
In it there are from top to bottom:
Label (no constraints)
Vertical Stack View (height=21)
Horizontal Slider (height=21)
Label (no constraints)
I was expecting that both my labels (elements 1 &4) will be of equal size and will occupy the majority of the screen and 2nd & 4th elements therefore would be in the center of the screen. But in reality my bottom Label's height is sufficient only to fill it's text while my top Label takes the majority of the space.
I tried to change the Distribution of my Stack View to Fill Proportionally, but in that case my top label becomes smaller than the bottom one.
Why is it happening? How can I make my Labels to become of equal height?
PS I noticed a warning about Content Priority Ambiguity but I can't figure out what should I do about it
To make both labels equal in height I had to select both of them and add a constraint Equal Heights.
Warning about Content Priority Ambiguity was not about them, it was about horizontal labels. To remove warning while keeping their placement I changed Distribution of the horizontal Stack View to Equal Centering.
Related
I have a view controller with six buttons.
I want to show them in 3 rows and 2 columns.
I decided to put each column of buttons (3 buttons) in a stack view and put 2 vertical stack views in 1 horizontal stack view.
I want my buttons to look square shaped.
I applied following constraints for the horizontal (main) stack view:
Align Center X to Safe Area
Align Center Y to Safe Area
Align leading to Safe Area Equals:50
Aspect Width:Aspect Height = 2:3
For some reason aspect ratio is not working and the width is still
larger than the height and more importantly the buttons are not square shaped.
I tried to update frames, to apply all possible alignment and distribution properties, however, it didn't solve the problem. Please check images below for your reference.
View Controller
Constraints
Thanks in advance!
I'm new to Swift and trying to repeat the calculator app as part of the learning, but got stuck at the autolayout.
Here's what I did:
Set each row as a Horizontal stack view, and all rows together as a Vertical stack view.
Set the vertical stack view Distribution as Fill Equally.
Set constraints for each Horizontal stack view as theTopView.bottom = theBottomView.top, and vice versa.
Set constraints of each element inside each Horizontal stack view as element.Top = stakcView.Top, element.Bottom = stakcView.Bottom.
Gap with distance set at 0:
However, there are always gaps between the Horizontal stack views, despite showing the distance between them being 0.
Can someone tell me what I did wrong? Why are there gaps despite showing 0 as the distance between these two? Your help is really appreciated!
constraints:
A UIStackView arranges its subviews. Don't try to add positioning constraints between the arranged subviews - that counters what you've told the stack view to do.
You need to decide how you really want your buttons to look.
In this case:
The 0 label is not contained in any stack view.
I gave the % button an aspect ratio of 1:0.75.
The "outer" Vertical stack view and the Horizontal stack views are all set to Fill Equally.
Here are the constraints - the only difference between the 3 layouts is:
1-> Left image has the "outer" stack view centered vertically - no Top or Bottom constraint.
2-> Center image has the "outer" stack view Bottom constrained to the view Bottom (of safe area).
3-> Right image has the "outer" stack view TOP constrained to the Bottom of the "0" label.
If you want the buttons to fill the screen:
Remove the Aspect Ratio constraint from the % button.
Outer stack view has Top constrained to label Bottom, and Bottom constrained to view Bottom (safe area)
Thanks for your answers!
While they are all informative, fundamentally, my problem lies somewhere else: there are always mysterious gaps between stack views regardless what the constraint constant is set to.
For example, it was set to 0
Space between stackviews when set to 0
Then it was set to 20000
Space between stackviews when set to 20000
Then I discover that it was the space setting was accidentally set to larger than 1. When I set it to 1 the mysterious gap went away.
enter image description here
Problem solved. Thanks again for your help!
Try "Fill" instead of "Fill Equally"
Pic. 1
Pic. 2
Pic.1 - it is a structure of my ViewController. Label1 and Label2 have changing size (content comes from backend) for different users. If content of labels is small, I need to set Top Space constraint for TableView (vertical spacing) to Button (pic.1), but if content of labels is big, set Top Space constraint for TableView (vertical spacing) to Stack (pic.2). How to set constraints for TableView?
Embed your image,button two labels and stack in a view.
Then add following constraints
Top, leading and trailing to new container view
vertical space b/w container and table.
Required constraints for your image,button two labels and stack
Don't add bottom constraint for button.
Add bottom spacing to stack to its superview(embedded container) with a >=.
Height to container view with minimum height and set priority to low(250)
I have 4 labels on my storyboard, aligned at baseline and with fixed distance between them.
Each label can have different values at runtime, and I would like that the group of these 4 labels is horizontally centered.
Didn't succeed to fix it !
I tried to put them in a view and center the view, but it doesn't work either.
Tried also to play with priorities, but didn't't succeed either...
Is it possible to achieve that in the storyboard ?
You can do this by putting your 4 labels inside of another view. Add the following constraints:
Set fixed distance constraints between the labels (3 constraints).
Set constraints to align the baselines of the labels (3 constraints).
Set a leading constraint from the leftmost label to the containing view. Set the constant to 0.
Set a trailing constraint from the rightmost label to the containing view. Set the constant to 0.
Set a constraint for the height of the view.
Set a constraint from the top of the left label to the top of its containing view.
Set a constraint to center the view horizontally.
Set a constraint to position the view vertically.
The width of the view will be determined by the intrinsic sizes of the labels plus the sizes of the distances in #1. This width will change as the contents of the labels changes, and the view will keep the group centered.
You can use a Stack View for this:
In the 'Attribute Inspector' you can set for example that each text field has an equal width and a spacing of 5 points between them:
You can then use your Stack View to center horizontally like your normally would do.
I am trying to set a UIImageView has no fixed size and width in the storyboard. I set the leading space to container to greater than or equal to 20, top space to the container to greater than or equal to 20 and trailing space to container to greater than or equal to 20 and vertical spacing to a UICollectionView, the UICollectionView satisfy the constraints. But the UIImageView don't work, it's telling me it's Position and size are ambiguous. How can I make it work? My Idea is no matter how large the image view, it will always keep 20 space to leading, top, trailing and bottom.
I have set the height and width to be greater than or equal to some value and their priority to 999, it's lower than the leading, top and trailing priority. and I have set the imageview to center horizontally. but i get height and vertical position are ambiguous for “Image view”.
Can you see what happens when you add height and width constraints to the UIImageView, but set their priorities to some low value, e.g. 1? It should help, but now UIImageView won't be centered. You can fix it by enclosing UIImageView in another view (empty UIView) and centering it in it both horizontally and vertically.
When you get this error:
Position and size are ambiguous for “view”
Probably following constraints are missing/incorrectly set:
Width constraint (size issue)
Height constraint (size issue)
Alignment constraints (position issue)
If you are using Stack Views, make sure the Photo Image View is inside the Stack View! (As in the Apple Tutorial)
If you want to give margin kind of thing into button through coding than please try these if it'll work
[button_Name setTitleEdgeInsets:UIEdgeInsetsMake(0.0, 12.0, 0.0, 0.0)];
I hope this will work..!!!
In cases where the height/width are not ambiguous at runtime, but ambiguous at storyboard time, e.g., setting an image dynamically, having a container view, etc, I try to add constraints with the placeholder checkmark checked to silence xcode.