UITableView inside UIStackView layout margins

Question

I currently have a UITableView embedded inside a UIStackView. I've currently set the StackView to have its own padding like so:

stackView.layoutMargins = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 8)
stackView.isLayoutMarginsRelativeArrangement = true

I've also set the stackview to be set on its edges, and it's also under a scrollview.

However, applying those settings, I'm getting errors on the UITableView constraints, telling me that the layout margins constraints are the issue.

(
    "<NSLayoutConstraint:0x600000645f90 UIStackView:0x7fa9bbc32260.width == UIScrollView:0x7fa9bc019800.width   (active)>",
    "<NSLayoutConstraint:0x6000006441e0 H:|-(0)-[UIScrollView:0x7fa9bc019800](LTR)   (active, names: '|':COVID_19_Compliance_Coach.DashboardView:0x7fa9bbc11340 )>",
    "<NSLayoutConstraint:0x600000644320 UIScrollView:0x7fa9bc019800.right == COVID_19_Compliance_Coach.DashboardView:0x7fa9bbc11340.right   (active)>",
    "<NSLayoutConstraint:0x600000646f30 '_UITemporaryLayoutWidth' COVID_19_Compliance_Coach.DashboardView:0x7fa9bbc11340.width == 0   (active)>",
    "<NSLayoutConstraint:0x600000647250 'UISV-canvas-connection' UILayoutGuide:0x600001c76a00'UIViewLayoutMarginsGuide'.leading == UITableView:0x7fa9bc0a2e00.leading   (active)>",
    "<NSLayoutConstraint:0x6000006472f0 'UISV-canvas-connection' UILayoutGuide:0x600001c76a00'UIViewLayoutMarginsGuide'.trailing == UITableView:0x7fa9bc0a2e00.trailing   (active)>",
    "<NSLayoutConstraint:0x6000006470c0 'UIView-leftMargin-guide-constraint' H:|-(8)-[UILayoutGuide:0x600001c76a00'UIViewLayoutMarginsGuide'](LTR)   (active, names: '|':UIStackView:0x7fa9bbc32260 )>",
    "<NSLayoutConstraint:0x600000647160 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x600001c76a00'UIViewLayoutMarginsGuide']-(8)-|(LTR)   (active, names: '|':UIStackView:0x7fa9bbc32260 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x6000006472f0 'UISV-canvas-connection' UILayoutGuide:0x600001c76a00'UIViewLayoutMarginsGuide'.trailing == UITableView:0x7fa9bc0a2e00.trailing   (active)>

I can't seem to figure out what the error is. If someone can point me to the right direction, that'd be extremely helpful, or if there's a different approach, that'd be helpful too.

Here's also a guideline of what the view hierarchy looks like:

UIScrollView
 -> UIStackView
     -> UITableView

UITableview is subclass from UIScrollview, why use tableview inside scrollview? it will make scrolling problem and you can achieve the same layout use only tableview — aiwiguna, Jun 23 '20 at 02:50
I currently have 3-4 other views attached alongside the stack view. I initially didn’t think it warranted separate cells. Is that the preferred method instead? — Johnny, Jun 23 '20 at 03:16

egmoll7 · Answer 1 · 2020-06-23T03:43:27.050

1

I would strongly suggest that you don't add a table view inside a scroll view since that table view already has a scroll view.

That being said I would add the constraints this way

ScrollView:
- Pin it to all corners of the superview
Stack View:
- Pin it to the four corners of the the scroll view
- Create a height constraint that is equal to the scroll view height
- Create a width constraint that is equal to the scroll view width
Table View
- Add the table view to the stack view

If you need to add a height constraint to the the table view you need to remove the height constraint of the stack view

If you add additional views to the stack view you will need to add a height constraint to them as well

edited Jun 23 '20 at 03:43

answered Jun 23 '20 at 03:11

egmoll7

119
3

I currently have 2-3 additional views inside the stack view. I was originally going to use those views as custom cells but i thought it wasn’t warranted. The table view I have now was for loading in a list of items from an API call. Should I opt for a custom table view design instead? – Johnny Jun 23 '20 at 03:18
1

You could still keep the scrollview, stack view, tableview approach but I would explore the possibility of building everything with a just a table view with multiple sections – egmoll7 Jun 23 '20 at 03:46

score 0 · Accepted Answer · answered Jun 23 '20 at 14:04

I realized that I was overthinking on how the designs should be implemented. I've removed the UIStackView, and replaced it with a UITableView as the root instead.

So now the Hierarchy is more:

UITableView
 -> SectionHeaderView 
 -> CustomCells (dequeuedReusable)

I decided to put those extra views onto the section header view at the top, and then used the cells instead. Thank you guys for the suggestion and clearer approach. Much appreciated.

UITableView inside UIStackView layout margins

2 Answers2