CODEWITHSUNDEEP
iosswiftxcodeuiscrollviewuistackview
j_dev
j_dev

Reputation: 301

Is there a way to embed a UIScrollView within a UIStackView?

Xcode Storyboard: UIViewController Structure Xcode Storyboard: Inner UIScrollView Error Message

I am working on a ViewController that has the following structure:

-ViewController
 -UIScrollView
  -UIVerticalStackView
    -UIImageView (414:367 aspect ratio)
    -UILabel
    -UIScrollView
     -UIHorizontalStackView
      -Dynamically added UIButtons
    -UILabel
    -UITextView
    -UIButton

There are more elements on the ViewController than can fit on the screen which is why I want to be able to vertically scroll through the elements. However, one of those elements will contain dynamically generated/added UIButtons. Because the number of UIButtons may exceed the width of the screen, I want those UIButtons to be embedded within a UIScrollView that enables a user to horizontally scroll through them if needed, hence the use of the inner UIScrollView. For formatting purposes, I add the UIButtons to a UIHorizontalStackView which is nested inside the inner UIScrollView.

However, I am getting an error (as seen in the second attached image).

-

Upvotes: 0

Views: 97

Answers (1)

DonMag
DonMag

Reputation: 77433

You haven't provided any constraints for the "inner stack view" contained in the "inner scroll view".

What you most likely want is for the "inner stack view" to have the same height as "inner scroll view" but no width constraint, allowing your dynamically added buttons to fill from left to right, and then scroll horizontally when there are too many to fit.

So:

enter image description here

You can see in this image that "inner stack view" is constrained on all 4 sides to "inner scroll view" and is also constrained to the width and height: 

Inner Stack View.height = height
Inner Stack View.width = width

(the height = 100 is the height constraint on "inner scroll view")

What cannot be seen here is that you don't really want the width constraint - you want the stack view to "fill with buttons" and extend horizontally past the right edge when needed.

To do that, select the Inner Stack View.width = width constraint, and set it as a Placeholder / Remove at build time:

enter image description here

This will keep IB / Storyboard happy (all necessary constraints are satisfied), but will give you the layout flexibility you want at run-time.

Upvotes: 1

Related Questions