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):
- Create a
UIScrollView
, and set its constraints. - Add a
UIStackView
to theUIScrollView
- Set the constraints:
Leading
,Trailing
,Top
&Bottom
should be equal to the ones fromUIScrollView
- Set up an equal
Width
constraint between theUIStackView
andUIScrollView
. - Set Axis = Vertical, Alignment = Fill, Distribution = Equal Spacing, and Spacing = 0 on the
UIStackView
- Add a number of
UIViews
to theUIStackView
- 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:
- 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.
- (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.
- (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
Step 2:Add Constraints for a ScrollView
Step 3:Add a StackView into ScrollView, and resize it.
Step 4:Add Constraints for a StackView (Stask View -> Content Layout Guide -> "Leading, Top, Trailing, Bottom")
Step 4.1:Correct Constraints -> Constant (... -> Constant = 0)
Step 5:Add Constraints for a StackView (Stask View -> Frame Layout Guide -> "Equal Widths")
Step 6 Example:Add two UIView(s) with HeightConstraints and RUN
I hope it will be useful for you like