1

I have an UIStackView which is inside a scrollview. the content of the stackView is dynamic, depending of how much views created and added with the methode "addArrangedSubview". if I have a few subviews, there is so much spacing between them, and if I have too much views, they become compressed.

I have:

_viewController

|__ view

|____scrollView

|______stackView (dynamic content)

I set the stackview to:

  • Alignement: fill
  • Distribution: equal spacing
  • Spacing: 5 and of course the constrains top/bottom/leading/trailing

I want to increase the size of the UIStackview every time a view is added, and keep the size of my added subviews. Maybe something is missing or I have a bad understanding.. someone can explain to me how to do it ?

I'm working with objective-c

Walid
  • 700
  • 2
  • 10
  • 29
  • Your scroll view has a content view which indicates the window that's visible into the scroll view. The stack view, I assume, is constrained to the scroll view's bounds, so those need to be adjusted. If the scroll view height is only the size of the content view, then the stack view will try to squeeze into that space. – Owen Hartnett May 24 '18 at 14:14
  • Sorry I didn't get your answer.. the case I want to reach is when a subview added to the stackview, the size of the stack increase dynamically, and so the scrollview and the view.. – Walid May 24 '18 at 14:37
  • Well. How did you setup the scrollview and the stack view? From storyboard or everything from code? – nayem May 24 '18 at 15:32
  • from storyboard – Walid May 24 '18 at 15:47
  • Well. Great. I've a detailed post about this topic. It's better to know whether your scrolling should be _horizontally_ or _vertically_. I'll add an answer here as well with the link from that post that should suit your need. – nayem May 24 '18 at 16:01
  • My stackiew is horizontal, and so the scrollview. the scrollview works if I increase too much the width of the stackview.. because the size don't increasy automatically when a subview is added. – Walid May 24 '18 at 16:05
  • Yup. That wasn't actually my question. So you want your scrollview to be scrollable horizontally (i.e. from left-right or vice-versa), right? But not scrollable vertically at the same time, am I right too? You should be able to scroll left-right but not up-down. Is everything right? – nayem May 24 '18 at 16:08
  • yes, I can scroll horizontally, my main problem is with the stackview.. it has dynamic content – Walid May 24 '18 at 16:13
  • I've added my answer, take a look. – nayem May 24 '18 at 16:41

1 Answers1

2

I've a detailed Medium post on this topic. You can take a look there for a step-by-step guide. But I'm also adding a brief explanation here as well:

You should have all of the necessary constraints set-up for the scroll view to it's super view. Then comes your stack view that is the sub-view of this scroll view. You might have pinned all the four edges of this stack view to the scroll view as well. But here comes the actual concern.

UIScrollView doesn't work as like other views. It has a contentView. This content view is responsible for scrolling behavior. If there are more content that don't fit in the frame of the scroll view than the scroll is enabled.

So for setting up the content view correctly, the scroll view must know the size of the content view so it knows when to stop scrolling. Here size means the actual width and height. But this size can't be determined from the constraint's setup because they are calculated dynamically by the auto layout engine.

In your case, the stack view acts as the content view of the scroll view. You might have pinned all the edges of the stack view to it's superview - UIScrollView. But that isn't enough for the scroll view to calculate the content size. You must also provide the:

  • width & height - if your scroll view is scrollable on both axes
  • width - if you want to scroll vertically and restrict scrolling horizontally
  • height - if you want to scroll horizontally and restrict scrolling vertically

As you need horizontal scrolling, you must restrict the vertical scrolling by providing the height of the stack view equal to the scroll view (it doesn't always need to be the same height as the scroll view, but should cover the whole height of the scroll view by other means). And you will also need a placeholder x-axis constraint to make the Interface Builder happy. The actual width of the content view will be covered by the sub views that will be added to the stack view.

Important: You should add a Horizontally in Container constraint to the stack view and make this a place holder that will be removed at build time. You can do this by selecting the constraint in the document outline and opening size inspector where you will get a Remove at build time check box. You check that box, you are ready to go.

making a constraint to be placeholder

nayem
  • 7,285
  • 1
  • 33
  • 51