1

I've been having such a hard time with this issue for the past 2 days. The structure I'm looking for is as follows:

  1. I want to have a scroll view take up the entire screen so that it's scrollable vertically.
  2. I want the image view to be added at the top of the scroll view and a vertical stack view to be added to below.

The key point is for the vertical stack view to increase in its height dynamically depending on the content.

First, I just tried adding the stack view without the image view just to test out the dynamic scrollable height. Followed the SO answer from here:

  1. Added the scroll view with 0, 0, 0, 0 constraints.
  2. Added the stack view to the scroll view. Set the constraints to the Content Layout Guide, 0, 0, 0, 0 constraints.
  3. Set the width of the stack view to be equal the scroll view.

enter image description here

This gave me a constraint error saying I need to set a fixed height for the scroll view. Adding the constraint doesn't let me scroll. I tried pinning the stack view to the scroll view directly, and not to the Content Layout Guide, but still doesn't work.

I followed Apple's documentation on the scroll view and added a content view within the scroll view before pinning the stack view to the content view:

enter image description here

This doesn't scroll either.

The stack view's distribution was either set at equal spacing or fill.

Please help.

Kevvv
  • 3,655
  • 10
  • 44
  • 90
  • Have you tried setting fixed height constraints to all the views inside stackview? For eg, set height of 300 to all views and check if the scroll view is scrolling with that setup. – Jithin Aug 16 '20 at 18:27
  • I've tried that yes – Kevvv Aug 16 '20 at 19:15
  • Your contentView trailing constraint should be equal to the content layout guide trailing with a 0 constant. Why did you add a constant of 414? – rs7 Aug 16 '20 at 19:19
  • That was automatically added. But that just pertains to the width and wouldn't effect the vertical scrolling, right? – Kevvv Aug 16 '20 at 19:26
  • Actually... you need to remove contentView.bottom = frame layout guide.bottom. That's most likely the problem here. – rs7 Aug 16 '20 at 21:19

1 Answers1

4

This answer did work for me.

Add the scroll view and pin four edges to safe area. Make sure value of constraints is 0.

Add the stackview inside scrollview and pin four edges to scrollview with constraint value 0.

Set stack view's width equal to scroll view's width.

Add as many views inside stackview.

To test if scrolling works, set fixed height for views inside stackview to make sure that scrollview has scrollable height. Then with the stackview selected, drag with two fingers inside the viewcontroller. The stackview should scroll within the scrollview.

This is how the constraints are set:

enter image description here

Jithin
  • 913
  • 5
  • 6