Storyboard constraints using ScrollView aren't respected

Question

I'm quite new to iOS, specially to complex views using Storyboards. I've started to develop the following screen trying to use AutoLayout so I don't need to worry about different iDevices screen sizes.

I'm using ScrollView to move the content to visible space while need to input some info with the keyboard. The thing is I re-created all the constraints a lot of times trying to make the fields respect the width of the ScrollView. Actually, when running, all the fields are being displayed larger than the ScrollView width (it's like overflowing the screen width to the right). The curious thing is that the button respects its width. When I change the orientation to landscape on iPhone 6s Plus those fields has smaller width than the screen width as if I had defined a specific size and the button continue to respect the size according to it constraints. Any thoughts?

Hierarchy:

View Controller
  View A
    Scroll View
      View B
        Logo / App name / UITextFields / Switch / Button / Link

Basically the Scroll is constrained with View A. View B is constrained by equal width with to View A and to Scroll margins.

Current Xcode version: 7.2 (7C68)

You might have added bottom constraint to superview . That might be the reason why height of object is too bigger in height — AskIOS, Jan 22 '16 at 12:24
Hi Bharath, thanks for your answer. I've edited my question to be clearer. When I said size I was referring to the width. Sorry... — mxmlc, Jan 22 '16 at 12:32

score 3 · Answer 1 · answered Jan 22 '16 at 12:45

Please find the constraints added to scrollview i.e top,left,right,bottom constraints. At the same way set constraints for individual elements inside scrollview i.e textfield and button. For these elements , set left,right,top and height constraints. I have added in my code to achieve your functionality see screenshot below.

score 1 · Answer 2 · answered Jan 22 '16 at 12:37

1

Scroll view constraint - top,bottom,leading,trailing , View B constraint - top,bottom,leading,trailing and must height-width constraint set , Other element - leading, centrally vertical and must height-width ratio

please try, this will help to solve your issue.

answered Jan 22 '16 at 12:37

Dhaval Patel

95
12

Hi Dhaval, thanks for your answer. Could you be clearer to whom exactly I need to constraint? ScrollView should be constrained with View A? And View B should be constrained with ScrollView? – mxmlc Jan 22 '16 at 12:47
Yes, Correct. Scrollview to view A and then View B to Scrollview. – Dhaval Patel Jan 22 '16 at 12:51

score 1 · Accepted Answer · edited May 23 '17 at 11:50

First I would like to thanks Bharath and Dhaval for their answers, they were really helpful.

Although the answers helped me to have a better behavior in this view, it turned out that my problem weren't related to the ScrollView but with a mask I'm applying to those fields and the moment where those mask were applied.

I was applying these mask to get a customized round corner so I had the corners exactly like the post image:

    // Change webservice's text field style
CAShapeLayer *shape = [[CAShapeLayer alloc] initWithLayer:self.url.layer.mask];
UIBezierPath *shadow = [UIBezierPath bezierPathWithRoundedRect:self.url.bounds byRoundingCorners:(UIRectCornerAllCorners) cornerRadii:CGSizeMake(5, 5)];
shape.path = shadow.CGPath;
self.url.layer.mask = shape;

But this mask were applied in viewDidLoad. Changing to viewDidLayoutSubviews solved my problem and I get the right design and behavior in portrait or landscape: round corners where they should be round and respecting the constraints.

Two other sources from stackoverflow I didn't found before and may be useful for people having problem with ScrollView:

https://stackoverflow.com/questions/31015026/autolayout-and-uiscrollview-storyboard-constraints-are-not-respected
UIScrollView Scrollable Content Size Ambiguity

Storyboard constraints using ScrollView aren't respected

3 Answers3