I have two controls in vertical stack views and below is my problem
I want my controls to display like this
Instead it displays like this
How can I set my button title fit so that the button's width do not increase
Also the button title is dynamic so, I dont have control to set it as constant value
Please advice
There are several ways to do this. While a UIStackView is not needed, it can save a few steps in setting up constraints.
So, here is one approach:
I've constrained my stack view 20-pts to Top, Leading and Trailing (safe-area), but no bottom or height constraints.
Stack view is set to Alignment: Center Distribution: Fill Spacing: 2
The buttons have Content Insets of 40 for Left and Right, and 4 for Top and Bottom. That will allow them to stretch / contract horizontally based on the Dynamic Titles.
I gave the labels a Height constraint of 28.5 (so, just a little vertical padding), and gave them Equal-Width constraints to the stack view.
The text field also has an Equal-Width constraint to the stack view.
So, the buttons stay centered and adjust their widths to the titles, and the labels and text field stretch to fit the width of the stack view.
I would suggest using set content hugging priority method. If you are doing your view programmatically it should look somewhat like this:
myButton.setContentHuggingPriority(.required, for: .horizontal)
Related
I have a UIStackView in which I programmatically add buttons based on the available actions for some content. I'd like the stackview to grow horizontally as each button is added and each button to be only the width needed to contain the text.
Where I'm at now, all buttons are sized to their text in the stackview and the first button takes the remainder of the stackview width as layed out.
What I'd like to do is have the stackview size in width dynamically based on the buttons added and how wide each button is.
This is what I have now:
Horizontal stackview with three buttons
Give your stack view these properties:
Constrain the Top of the stack view, and constrain it Centered Horizontally:
As you add buttons, its width will expand to fit the buttons, and it will remain horizontally centered:
Edit
And, if you want the stack view to expand left-to-right, constrain the stack view's Leading instead of centered:
I've been trying to center some buttons in an horizontal UIStackView
But doesn't matter what I do, the only not broken layout that I can get is basically:
I added constraints to fix the button width programmatically, as the amount of buttons is variable, but can't find a way to fix the spacing between them.
These are the stack view settings:
I tried all the distribution options!
The layout in the top image can be achieved as follows:
Add a stack view with default properties (horizontal axis, fill distribution). Add optional spacing as you want.
Constrain the stack view vertically to its superview.
Either don't constrain it horizontally to its superview, or if you want, constrain it using inequality (left >= superview.left, right <= superview.right).
Center your stack view horizontally within its superview.
Add your subviews. Make sure they know how to size themselves (either based on their own contents, or with a fixed width).
The key is the constraints on the UIStackView in 3 & 4. You're horizontally pinning it to its superview, so it needs to figure out how to fill out all the space. Instead, center it horizontally, and allow the stack view only to take up as much space as it needs.
I have a custom table view cell with two buttons. The accompanying text has a varying number of lines which affects the height of the cell. This height variations causes the height of the buttons vary. I have tried a lot different things to fix this with no luck. Currently the two buttons are in a stack view and that is in another stack view with the UILabel. I'd like the buttons with a fixed height vertically centered in the cell. What's the best way to do that?
Use only one stack view - for the buttons.
Constrain your UIStackView to the trailing edge of the cell's content view, and constrain it centered Vertically.
Constrain your UILabel to the leading edge of the cell's content view, and constrain it centered Vertically.
Also constrain your UILabel horizontal-spacing to the UIStackView, and edit it to be >= 8.
And, the key part, also constrain your UILabel Top and Bottom to >= 4.
Now, when your label wraps to multiple rows, it will "push the top and bottom", and your stack view holding your buttons will remain vertically centered, but will not "grow in height".
I have a cell in which I place four buttons and four labels. Each button gets assigned a picture with width 50 and height 50. Furthermore, all buttons have a corresponding label describing what they're intended for.
My objective is to have the buttons and labels resize to keep the buttons' and labels' aspect ration intact while the screen dimension changes on different devices. I have been playing with auto layout changing the hugging and compression to achieve this but haven't been successful yet. Any help would be much appreciated...
I think you should take a look at a UIStackView, because this seems exactly as a use case for stack. Just put each pair button/label in a stack, and then all four pairs into a horizontal stack, which you constraint to the cell itself. You should be able to handle all you need just by configuring the stack’s properties (axis, distribution, alignment, spacing).
Embed your button and label into a view. Set the width of this view equal widths to content view and change the multiplier value to 1:4. This will adjust the widths of the views according to superview. Also, set the top and bottom constraint to 0 for this view.
Provide center align y-axis constraint to button after setting the width and height constraint to 50. Set its top constraint to a value you deem fit.
Set labels's leading and trailing constraint to a value like 8. Choose center alignment for text. Also, provide top constraint to buttona nd bottom to its superview.
Copy the view and paste to create the three views and provide them equal widths constraint to the first view. Also, provide their leading, trailing, top and bottom constraints.
Here are a fast tutorial in how to achieve that:
1-
2- completion of the first Gif:
Note you can achieve the same output using a UIStackView
I am trying to have a UIImageView next to a UILabel with dynamic content. Both within a StackView.
Currently I'm using the Fill Alignment and Distribution. Changing it to one of the other options, changes the size of the ImageView (fixed Constraints to 30x30).The StackView has left and right leading Constraints of 0.
This is my current:
The is what I want:
How do I need to set up the StackView to archive my goals? Help is very appreciated.
You can try using a vertical stack view with an embedded horizontal stack view.
The first stack view has a vertical axis. Its alignment is centre and the distribution is fill (the default). This stack view has the following constraints: Trailing to superview, leading to superview and top space to top layout guide.
The second stack view contains the image view and label. Its axis is horizontal. The fill alignment and distributions are set to their default values. The spacing is set to 10 (can be changed to suit your needs). This stack view has no constraints.
The image view has a height and width constraints of 30 respectively.
The label has no constraints.
Both the image view and label have default content hugging and compression values.
If the label has longer text then then it will appear like this:
Have you tried manipulating content hugging and content compression resistance priority ? I believe these property will let you manage the length distance between both the image view and textView, and the stack view won't let you dynamically expend the textView as you enter more and more data so I think manipulating the hugging and resistance properties can give you a solution close to the required.
This can be achieved by creating a container view for the image view and the text label and then centering the container view in the original parent view.