CODEWITHSUNDEEP
iosxcodeuiscrollviewuistackview
pairon
pairon

Reputation: 437

Problems when embed an UIStackView in an UIScrollView

I'm setting up an iOS app interface from the Interface Builder. I've several horizontal stack views, all embedded in a single vertical stackview. Up to here, the layout seems to be ok and the constraints are well done.

When I embed the vertical stack view in a UIScrollView, the layout turns very bad. There's probably something wrong with my layout constraints, but I do not really know what. Here are two images that represent the layout before and after the embed in the UIScrollView:

Before UIScrollView

After UIScrollView

Does anyone have an idea of ​​why this happens? Thanks in advance guys.

Update

After installing this constraint:

VerticalStackView.width == ScrollView.width

The result is the following:

VerticalStackView.width == ScrollView.width img

Update 2

After the addition of the basic constraints

Upvotes: 4

Views: 2203

Answers (1)

André Slotta
André Slotta

Reputation: 14030

Set up the following view hierarchy (screenshot) and constraints and you should be good to go:

  • ScrollView.top == View.top
  • ScrollView.leading == View.leading
  • ScrollView.bottom == View.bottom
  • ScrollView.trailing == View.trailing
  • ContentView.top == ScrollView.top
  • ContentView.leading == ScrollView.leading
  • ContentView.bottom == ScrollView.bottom
  • ContentView.trailing == ScrollView.trailing
  • ContentView.width == ScrollView.width
  • VerticalStackView.top == ContentView.top + 16
  • VerticalStackView.leading == ContentView.leading + 16
  • VerticalStackView.bottom == ContentView.bottom - 16
  • VerticalStackView.trailing == ContentView.trailing - 16

Instead of the View within the first four constraints you can also use the SafeAreaLayoutGuide (depending on your needs).

setup

Upvotes: 3

Related Questions