Why do nested UIStackViews with UILabels require Y position and height constraints? - ios

I am trying to sort out a problem we have in a UITableViewCell. There are nested UIStackViews with subviews like UILabel having an intrinsic content size. I created this example for simplified explanation of my problem:
Results in these interface builder errors:
Top Stack
View Need constraints for: Y position, height
Middle Stack
View Need constraints for: Y position, height
Bottom Stack
View Need constraints for: Y position, height
To my (and my collegues) understanding, the stacks' and table view cell sizes should be determined by the UILabels and their intrinsic content size.
The "Outer Stack View" has four space constraints to its superview (the "Table View Cell") with 0 as constants because ultimately the table view cell and all stack view sizes should be based on the content views.
All UIStackView have Fill for Alignment and Distribution attributes.
I just dragged it together from the library as depicted, no fiddling in the inspector. It is simple to reproduce.
Adding 0-space top and bottom constraints to a label in relation to its parent stack view does not resolve the stack view allegedly lacking a height constraint.
The suggested constraints of the interface builder are nonsense.
What is missing? I created an example project hosted on GitHub.

You have to set the OutterStackView bottom constraint to be greater than or equal to the bottom of the cells content view.
See the issue is that you are asking the OutterStackView to be the same size as your cell in the StoryBoard but since your internal labels don't have their final intrinsic content size yet, you cannot fulfill all constraint requirements.

Related

How adjust the dynamically the height of a view based on height of stackview?

I have a problem with one of my VC. I need to resize a view depending on the height size of the stack view because the stack view have 2 textedit but in some cases one of them it's hidden.
Here is the view that contains the stackview this one needs to adjust the height depending on the height of the stackview
Here is the stackview contents, the stackview adjust perfectly depending if one of the textedit it's hidden or not but content view not, only leave the blank space under the stackview
These are the constraints of the container view.
Any suggestion to achieve the goal (?)
Please share the screenshot for constraints so I can guide you better?
What we do is we don't give any height constraint to the stack view. The views at the top and bottom then adjust themselves when the stack changes its height due to the subview hidden/show.

Layout errors when pinning UIView edges to UITableViewCell contentView

Got a problem here which is driving me crazy.
In a storyboard I have a table view in a layout and I'm trying to pin the leading, top, trailing and bottom constraints of a UIView to the prototype cell's content view. Straightforward enough.
Whenever I do this I get these layout errors for the UIView in Xcode:
"Need constraints for: X position, width"
"Need constraints for : Y position, height"
Constraints on that view (Superview is contentView):
In the storyboard I have the following set on the table view:
Row Height: automatic
Estimate (row height): 50
And on the table view cell:
Row Height: 50
I've seen a few SO posts and other walkthroughs that state that pinning the edges is what to do, and as I understand Auto Layout, I've provided the necessary constraints and info.
How can I fix this?
(BTW: I'm running Xcode 11.3.1.)
Update: The cells of this table view will be fixed height. I'm looking for the cell to provide the height for its content.
UIView by itself has no intrinsicSize - so you are telling the cell's contentView to pin to a frame of 0 x 0.
If you are going to add content to the UIView, set the constraints on the content to control the size of the view and the errors will go away.
In the meantime, give the view a height constraint and that will resolve the issue.
Edit
For fixed-height cells... try starting fresh.
Add a table view - give it desired constraints
Add a table view cell prototype
Add a UIView to that cell (give it a background color to make it easy to see)
Constrain the view at Zero on all 4 sides (constrain to margins)
Set the cell Row Height to 50 (un-check Automatic)
Here's how it looks for me:
It turns out I had the table view and cell constraints and settings configured properly; the problem was further up the view hierarchy.
The table view was placed in a vertical stack view, and that stack view's Alignment property was set to center (for the benefit of other views in the stack). This was causing issues for Auto Layout in calculating the width of the table view.
The solution here was to add an Equal Widths constraint from the table view to the stack view. Et voila! The errors on the UIView within the table view cell's content view disappeared.

Adjust height of xib containing UIStackView when elements are hidden

I have an xib containing a stackview with child stack views (following Ray Wenderlichs tutorial). I wish to hide one of the child stackviews so that the height of the xib adjusts to the visible child stackviews. However currently it remains at the original fixed height and the visible stackviews are spread across it.
Here are the settings for the top level stack view:
Can anyone advise on how to make the xib height adjust to fit the visible content size?
Edit 1:
After removing the heights of each of the child stack views and make the bottom constraint of the top level stack view >= 8 to the superview, the problem still happens but the layout has changed:
Edit 2:
After add a trailing constraint, the child stackviews no longer stretch across the xib, but the height of the xib does not compress:
Issue:
The issue is because you've fixed the bottom constraint of the StackView to the HeaderView's bottom as 8.
Now, the StackView won't be able to reduce its height according to its content.
Solution:
Make it as >= 8, i.e.
bottom >= StackView.bottom + 8
That way StackView will adjust its height as per its contents.
Edit:

UIStackViews inside UIStackView giving errors

I want to place 2 Horizontal UIStackViews inside another Vertical UIStackView. The main stack view is in the contentView of a UITableViewCell. Each of the nested stack views has 2 UIViews. The alignment is set to 'Fill' and distribution is 'Fill Equally'. For the main stack view both of them are set to 'Fill'. All of the UIViews has 2 elements, which are connected with constraints. When I place them in the storyboard I'm getting errors 'Need constraints for: Y position, height'. What am I doing here wrong?
EDIT: Also I'm hiding the UIViews depending if they have data from server or no. If both UIViews dont have data, then I hide the whole stackView.
You are missing vertical constraints for some of your views. Just because the stack view is set to "fill" does not mean the autoconstraints engine will know how tall to make each view. See if you can match the same constraints portrayed in the following screenshot and let me know if that solves your issue; these constraints make the views have equal height.
Need constraints for: Y position, height
this means that you place a view ( subviews of the inner stacks ) with no intrinsic content size so make sure to give it a height ( unlike label and button which already have ) and hook properly from top to bottom with their superviews

How to set an empty UIStackView inside a UIScrollView so that i can fill it on runtime?

I'm trying to set an empty vertical UIStackView inside a UIScrollView so that I can fill the UIStackView dynamically on runtime
I tried the solution given by apple here but when I do that, the Auto Layout tool tells me that there is a missing constraint which is either the Y position or the height of the UIStackView.
The only difference I have between my UIScrollView and the one from the example is that I don't add a button inside the UIStackView.
When I fill the UIStackView on runtime, the logs say it has to break some constraints and then the UIScrollView fills the screen all the way to the bottom, pushing other views I had there out of sight.
Is this the right way to accomplish what I want? Or is there any other solution?
EDIT:
This is what I have, the logo constraint is only aspect ratio relative to itself
Set up your constraints as you have them, but without the empty stack view in the scroll view.
Next:
add a UIStackView to the scroll view
constrain all 4 sides of the stack view to the scroll view
constrain the stack view width equal to the scroll view width
constrain the stack view height equal to the scroll view height
IB should show all constraints satisfied.
Then - and here's the key - edit the stack view's Height constraint and set it to be a Placeholder:
This Height constraint will now be removed at Build-Time. Any elements you add via code as arrangedSubviews will determine the height of the stack view, which will, in turn, define the vertical scrollable area (the .contentSize) --- all handled by auto-layout.

Resources