I use a stackview (horizontal) with this setup:
Inside it, I have just 3 buttons (without text, only icon). The height/width button are set by constraints:
And the result is:
BUT I don't understand why my second button has a huge width... even if it width is fixed at 44.
Have you got some explanations guys please?
Thank you very much!
Your settings are just conflicting, that's the answer. It must fill stackview width with 3 buttons 44pt each + 6pt spacing between them, and this can't be resolved, because stackview width is bigger than 44*3 + 6*(3-1).
If you want all buttons be on the left with 6 point spacing, then remove trailing constraint for stackview;
if you want buttons to fill the full width -- then remove spacing = 6 and set distribution = equal spacing
Try to put the distribution to equal spacing on the stack view. That means that the spacing will be equal between every button. If you do not have any constrains on the stack view that affects the width then that should work.
Otherwise you need to increment the spacing value in order for the buttons to have equal widths.
Thanks for the question!
Related
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"
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 working on a Swift project with Storyboards where I want text to wrap in a label. In the old Objective-C version where I did not use a Storyboard I used the following settings and things worked perfectly.
Here are the settings for Swift
I have been reading about the potential auto layout issues with preferred width settings. I currently have them set to auto layout and the label itself is set to a width of 560. I've added a constraint to keep the label 20 pixels from the trailing superview and while I thought this would work I still cannot get the text to wrap. The dimension settings are below.
Can someone explain how to get the text to wrap?
First, the good news: You have set the label to 2 lines and Word Wrap. So it can wrap. Excellent.
Now you must make sure the label is tall enough. Either give it no height constraint, or give it a big enough height constraint that it can accommodate two lines.
Finally, you must limit its width. This is what causes the text to wrap. If you don't limit the label's width, it will just keep growing rightward, potentially continuing off the screen. The limit on the label's width stops this rightward growth and causes the text to wrap (and the label to grow downward instead).
You can limit width in several ways. You can have an actual width constraints. Or you can have a leading constraint and a trailing constraint, to something relatively immovable, such as the superview. And there is a third way: on the Size inspector (which you do also show, at the bottom right of your question), set the Preferred Width (it is shown at the top of the Size inspector): this is the width at which, all other things being equal, the label will stop growing to the right and wrap and grow down instead.
Declare your UILabel programmatically and give
yourUILabel.contentMode = .scaleToFill
yourUILabel.numberOfLines = 0
yourUILabel.leadingMargin(pixel: 10)
yourUILabel.trailingMargin(pixel: 10)
This worked for me.
Your text will wrap if you have provided lines number more than 1. However you may not be able to see it wrap if the label height is not enough to show the content. I suggest you to remove the height constraint or increase its value.
In case this helps anybody: I had followed the advice given here to fix my label not wrapping to two lines but nothing worked. What worked for me was I first deleted some of the relevant constraints in storyboard (I'm using auto layout) and saw that the label wrapped properly. I slowly added back the constraints I needed and everything still seems to work fine. So deleting and remaking your constraints may help.
What fixed this problem was changing the label type to "Placeholder" under Intrinsic Size in IB. When I changed this the text wrapped and the warnings went away.
As I see you interface builder. There are two problems. First one is with your constraints, and another one is with the property.
You gave it a fixed height which is wrong while line wrap. You need to make the auto-resizing label, i.e. remove height and add the bottom constraint or simple remove height depend on your situation. Your text is moving to the next line, but due to fixed constraint, you can't see it.
You enable the option to clip subviews which is wrong as it cuts your view and you are unable to view wrap word.
Add a new case:
DO NOT add constraints to your label with a TEXTVIEW, or the label will expand to right without limitation.
In my case i set my parent stackview alignment from center to fill and set UILabel to
label.textAlignment = NSTextAlignment.right
I am doing a sample project with size class and autolayout in swift.I have four buttons on top of the screen.How to set same width for all buttons with one pixel gap between them and make them fit for all screen size.
thanks in advance
The trick here is to make the button widths variable, but the same for all buttons. This can be accomplished like this:
Place the four buttons
Set the left margin constraint from the leftmost button
Set the right margin constraint from the rightmost button
Set horziontal distance constraints between the buttons to 1
Set the width constraints for all buttons to >= 10 (or any other
value, this makes the width variable)
Set equal width constraints on all buttons (ctrl-drag from one button to the next and choose equal width. Repeat that for all buttons)
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.