Is it possible for UIStackView to scroll? Is it possible for UIStackView to scroll? ios ios

Is it possible for UIStackView to scroll?


In case anyone is looking for a solution without code, I created an example to do this completely in the storyboard, using Auto Layout.

You can get it from github.

Basically, to recreate the example (for vertical scrolling):

  1. Create a UIScrollView, and set its constraints.
  2. Add a UIStackView to the UIScrollView
  3. Set the constraints: Leading, Trailing, Top & Bottom should be equal to the ones from UIScrollView
  4. Set up an equal Width constraint between the UIStackView and UIScrollView.
  5. Set Axis = Vertical, Alignment = Fill, Distribution = Equal Spacing, and Spacing = 0 on the UIStackView
  6. Add a number of UIViews to the UIStackView
  7. Run

Exchange Width for Height in step 4, and set Axis = Horizontal in step 5, to get a horizontal UIStackView.


Apple's Auto Layout Guide includes an entire section on Working with Scroll Views. Some relevant snippets:

  1. Pin the content view’s top, bottom, leading, and trailing edges to the scroll view’s corresponding edges. The content view now defines the scroll view’s content area.
  2. (Optional) To disable horizontal scrolling, set the content view’s width equal to the scroll view’s width. The content view now fills the scroll view horizontally.
  3. (Optional) To disable vertical scrolling, set the content view’s height equal to the scroll view’s height. The content view now fills the scroll view horizontally.

Furthermore:

Your layout must fully define the size of the content view (except where defined in steps 5 and 6). … When the content view is taller than the scroll view, the scroll view enables vertical scrolling. When the content view is wider than the scroll view, the scroll view enables horizontal scrolling.

To summarize, the scroll view's content view (in this case, a stack view) must be pinned to its edges and have its width and/or height otherwise constrained. That means that the contents of the stack view must be constrained (directly or indirectly) in the direction(s) in which scrolling is desired, which might mean adding a height constraint to each view inside a vertically scrolling stack view, for example. The following is an example of how to allow for vertical scrolling of a scroll view containing a stack view:

// Pin the edges of the stack view to the edges of the scroll view that contains itstackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = truestackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = truestackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = truestackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true// Set the width of the stack view to the width of the scroll view for vertical scrollingstackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true


I present you the right solution

For Xcode 11+

Step 1:Add a ScrollView and resize it

enter image description hereenter image description here

Step 2:Add Constraints for a ScrollView

enter image description here

Step 3:Add a StackView into ScrollView, and resize it.

enter image description here

Step 4:Add Constraints for a StackView (Stask View -> Content Layout Guide -> "Leading, Top, Trailing, Bottom")

enter image description hereenter image description here

Step 4.1:Correct Constraints -> Constant (... -> Constant = 0)

enter image description hereenter image description here

Step 5:Add Constraints for a StackView (Stask View -> Frame Layout Guide -> "Equal Widths")

enter image description hereenter image description here

Step 6 Example:Add two UIView(s) with HeightConstraints and RUNenter image description hereenter image description here

I hope it will be useful for you like