4

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

Zonily Jame
  • 5,053
  • 3
  • 30
  • 56
pairon
  • 427
  • 1
  • 7
  • 18

1 Answers1

3

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

André Slotta
  • 13,774
  • 2
  • 22
  • 34
  • Unfortunately didn't work. See the result in my question's update. – pairon Jun 09 '18 at 15:36
  • I thought you had already set up basic constraints. Updated my answer with all the constraints that are needed. – André Slotta Jun 09 '18 at 15:39
  • This is the right way, but i can't set trailing + 16 margin from the UIScrollView. See my update – pairon Jun 09 '18 at 15:53
  • You can use an additional content view (regular `UIView`) as the scrollview's subview and put your vertical stackview within that content view with the margins you like. See my updated answer. – André Slotta Jun 09 '18 at 16:07
  • Ok thanks, now I try. Would you be able to explain to me why anyway there are these problems on the constraints? – pairon Jun 09 '18 at 16:10
  • Done! Thank you! Maybe the problem is that i've setted OuterStackView.width == ScrollView.width – pairon Jun 09 '18 at 16:14
  • When you set your vertical stackview's width to be equal to the scrollview's width (which is the device's width) everything is fine (e.g. 320 == 320). but setting equal widths and also a leading and trailing margin of 16 results in "conflicting constraints" because the views' widths can't be equal when there is a margin around the stackview. to fix this you could set the stackview's width to be equal to the scrollview's width - 32. – André Slotta Jun 09 '18 at 16:15