1

I am a little stuck with the ScrollView in Swift and Xcode 11.

My goal is a simple ScrollView with Labels and Textfields. Each label describes what the textfields are used for. For example there is a Label "Name", so you have to enter your name in the textfield under the label. For this I need a ScrollView because the App I am coding requires a few more information. When I am trying to put this in a ScrollView I am constantly getting the following error: "Scrollable content size is ambiguous to ScrollView".

In order to find help I searched the internet and for example found this question: UIScrollView Scrollable Content Size Ambiguity. Unfortunatly it didn't solve my problem. So I decided to create a small test project with the following: - I created a project as a Single View Application - I added a ScrollView to the ViewController - I clicked on the constrains-Button at the canvas - I selected 0,0,0,0 for leading/top/trailing/bottom. - I clicked on "add 4 Constrains - Now the warning appeared. Also the ScrollView was not resized to the ViewController... I don't know why. - I added a UIView inside the ScrollView and set the same constrains, this time according to the ScrollView. - The UIView (Content view) got an extra constrain: Equal width with the root view - Now I added two Buttons, one with the text "Hello" and the other one with "world" on it. - The "hello"-Button received the following constrains: 16 to leading, trailing and top, as well as a fixed height of 30. - The "world"-Button got the following constrains: 16 to bottom, leading, trailing and over a 1000 so you can scroll through the ScrollView.

After all these steps the error is still there and if I run the app the "hello"-Button is at the top of the screen and the "world"-Button is at the bottom and I can't scroll.

Can maybe anyone help me fixing this issue. I am looking forward to every answer! Thank you for your help in advance!

DSpengler99
  • 41
  • 1
  • 5
  • It seems that this issue is caused by the new layout guides. I got it working in the mini-project now. I will report if this really was the answer to this question after a few more experiments! – DSpengler99 Feb 13 '20 at 21:53

3 Answers3

3

Here is the trick that worked for me:

  1. Add a ScrollView to your wished ViewController.

  2. Select it in the Outline and open its size inspector.

  3. Uncheck there the option "Content Layout Guides".

  4. Now set leading/top/trailing and bottom constrains to 0 of the ScrollView.

  5. Add in a UIView and constrain its leading/top/trailing and bottom also to 0.

  6. Add an equal width constrain to the UIView. (The width needs to be equal the width of the view from the ViewController, with this way you are disabeling horizontal scrolling).

  7. The warning will disappear if every element inside the UIView is chained vertically. This means, that the top element has a constrain to the top of the view and to the element under it and so on. The last element needs a constrain to the bottom of the view.

If you followed this steps you should be fine with ScrollViews. This way you also can add as many content as you want to the bottom and the ScrollView will extend dynamically.

I hope I explained it well enough.

DSpengler99
  • 41
  • 1
  • 5
  • Wow, been working with scrollviews for 6 years. When did unchecking the option "Content Layout Guides"" become a things. I'm moving to Flutter. Fed up with this insane waste of time. – c.lamont.dev Mar 04 '20 at 12:04
2

It sounds like you're on the right track, and really close.

The first part is absolutely right - you add your ScrollView and pin it to zero for the top, trailing, bottom, and leading constraints. That makes it take up your whole screen.

Then you drop a plain old UIView into the ScrollView, and pin its top, trailing, bottom, and leading constraints to the ScrollView (all as zero again). Then you set the UIView to have an equal width to the ScrollView. The last thing is to set the UIView's height as equal to the ScrollView's height, but you change one thing: you set the priority of this constraint to be low (250). That's basically what allows the UIView to exceed the size of the ScrollView, so you can then scroll.

All you do then is add your buttons, etc inside the UIView, so you place them in relation to it rather than the ScrollView, and pin or align them as you wish.

developingbassist
  • 116
  • 6
  • But I still need to disable the auto layout guides and frame guides of the scroll view, right? – DSpengler99 Feb 14 '20 at 17:09
  • Nope, I've never had to disable anything to work with ScrollViews, it's pretty straightforward. Once you have the UIView set up inside the ScrollView, all you do is add any buttons, labels, etc inside of it, and pin in relation to it as normal. – developingbassist Feb 14 '20 at 17:25
  • But do I have I to set the equal width equals to the ScrollView or the View of the ViewController? As far as I understand I need to set equal width to the View of the ViewController... If I than set equal heights to ScrollView, the warning is still shown at the left side. If I first uncheck the layout guides of the ScrollView there is no warning shown at the left side... Did you try creating a Scroll View in Xcode 11? Maybe Apple has changed there something? – DSpengler99 Feb 14 '20 at 17:34
  • Another thing with setting equal heights is that the ScrollView looses the dynamic it has, so you just have a defined space for your content. This could cause problems, when you try to put an label at the bottom of the scroll view and the label is filled dynamically with text. If the text gets to long, the ScrollView is not able to dynamically extend so the text would fit. – DSpengler99 Feb 14 '20 at 17:59
  • Just place the ScrollView in your ViewController, then pin it in place. Drop the UIView into your ScrollView, and pin the UIView to the Scrollview. Then give the UIView an equal width to the ScrollView, and an equal height to the ScrollView. This height constraint is the one you want to set to low priority (250). That's what allows it to have a dynamic height, because the low priority allows the constraint to get broken before any others. I hope that explains it a bit better. – developingbassist Feb 14 '20 at 19:07
  • If you do it the way I explained it also works. But your answer seems to work too – DSpengler99 Feb 17 '20 at 09:37
0

Add a total of 9 constraints

1 - 4: ScrollView to Superview (leading, top, trailing & bottom)

5 - 8: Content view to Content Layout guide (leading, top, trailing & bottom)

9: Content view Width equals width to Frame Layout Guide.

But when you do this (right-click drag and drop) 7 & 8 constrains (trailing & bottom constrains to Content Layout guide) will have constant values. (check image below). Just make them zero. Now it worked.

enter image description here

RJE
  • 781
  • 6
  • 14