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".
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 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)
Im very new to xcode so bear with me. I added a vertical Stackview and want to add a bunch of textviews and buttons starting from the top. I managed to use constrains to stretch the Stackview to the screen on all sides.
Now when I add 3 textviews this happens, and its all wrong: first the textviews stick to the bottom for some reason, second one stretches out the remaining space which is obviously wrong. What can I do to make it correct, i.e. all textviews should be at top right under each other with correct width and height (width fills the screen, height is whatever the default height is)
A UIStackView will arrange its subviews.
If you set a Height - either explicitly or by constraints on the Top and Bottom, the stack view will arrange the subviews to fit into that height - when set to Fill or Fill Equally, it will "spread out and resize" the subviews.
If you don't constrain its Height, it will still arrange its subviews, but it will expand its own height based on the heights of the subviews.
So, for your case of 3 text fields, constraining all 4 sides results in the subviews being arranged to fit the height of the stack view.
If you constrain the stack view only to Top, Left and Right, you get this (main view is blue, stack view has spacing set to 8):
The idea is to resize height of the cell automatically based on few controls heights. As you can see on image above I have Top Label and Bottom Label. These two labels can have different height based on text length.
Few words about setup in storyboard.
I set number of lines to 0 for 2 described labels to allow grow their height dynamically based on given text.
For the Top Label I have next constraints:
For the Bottom Label I have next constraints:
So I we say about vertical spacing between 1000 green label and bottom label it's every time the same:
But without this spacing cell won't stretch height. How can I reduce this vertical spacing? Because there is to much spacing between "1000 green label" and bottom label in case if top label have big height because of text.
In -viewDidLoad method I set:
[self.theTableView setEstimatedRowHeight:145];
[self.theTableView setRowHeight:UITableViewAutomaticDimension];
Seems it works pretty cool sometimes with a bug described here but I don't know how to restrict that vertical spacing:
http://www.appcoda.com/self-sizing-cells/
Set the bottom label's top constraint to be >= 11.5 (or whatever its minimum spacing should be).
This will let the cell adjust that vertical spacing, depending on the other content in the cell.
Update:
In iOS 9, this would much more simply be handled by UIStackView.
A horizontal stack view would constrain (and determine the cell height based on the) two inner vertical stack views. The left vertical stack would handle the image, banner, and label layout, and the right vertical stack would handle the top label, 10000, and bottom label layout. You'd only need with 4 constraints (for the horizontal stackView to constrain it to the contentView).
My problem is slightly different from other's 'Swift UIScrollView' problems when using auto layout:
Problem:
Unlike others, when I run my app, it scrolls. My problem is that the scroll cuts off the bottom 20-30% of the content. I can pull to see the buttons did build and are down there, but when I let it go the scroll snaps back to a false bottom which cuts off my content!!! I've been trying, for days, to fix it to scroll the entire height but it continues to cut off!!
Description of app:
I used auto layout to layout 6 buttons and labels. Each button a rectangular image, with a label directly beneath it. (sorry, the site won't let me post pictures!)
I have my views arranged like this:
MainView > ScrollView > ContentView > Buttons & Labels
I have my contentView pinned to my ScrollView and my ScrollView pinned to my MainView. My buttons and labels all have constraints that are building correctly, to create a list that looks like:
Rectangular button
Label beneath it
Spacing
Rectangular button
Label beneath it
Spacing
Etc.
Can anyone tell me why I can't scroll the full length of the view?
Your description of how your items are constrained is vague, so I'm going to list all of the constraints you need to make this work. Then you can compare what you have to what you need and adjust accordingly.
Your ScrollView should be pinned on all 4 sides to the MainView. (This isn't absolutely necessary. You can constrain your ScrollView however you want, but make sure it can grow as the device and/or orientation changes).
Your ContentView should be pinned on all 4 sides to the ScrollView with offsets of 0.
Since you want your ScrollView to scroll vertically only, constrain the width of the ContentView to the width of the ScrollView using an Equal Widths constraint. To do this, in the Document Outline view, Control-drag from your ContentView to your ScrollView and select Equal Widths from the pop up.
The height of ContentView will be set by the sum total height of everything in it. In order for this to work, your topmost button needs to be pinned to the top of the ContentView, all of your buttons and labels should be pinned to their nearest neighbors, and the bottommost label should be pinned to the bottom of the ContentView. In addition, all of your buttons and labels should have constraints for their widths and heights. I would suggest setting an explicit width constraint and explicit height constraint for your buttons and centering them horizontally in the ContentView. For your labels, set an explicit height constraint and pin the left and right edges to the ContentView.
If you have these constraints and no other ones, your ContentView will be properly sized.
Using contentView, like you said, usually fixes the issue. So chances are you need to take a second look at your contraints. Maybe try this solution in a clean/new project to see that it works. (it does work). My guess would be that some of your constraints conflict each other.
Otherwise I think it would be a good idea to setContentSize of your scrollView in your viewDidLoad.
Another hack would be to place 2 UI objects with their alphas set to zero on the right top corner and left bottom corner. This would hint scrollView to set its contentSize.