4

I am trying to make a really simple layout for an app I want to build - but I seem to be struggling with ScrollView and getting it to work via Storyboard. Basically I am trying to build below:

template

I have done the constraints using several tutorials - but it either doesn't scroll or it looks wrong. Any suggestions?

enter image description here

I am getting the following warning:

Warnings

Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393
UKDataGeek
  • 6,338
  • 9
  • 46
  • 63
  • Possible duplicate of [UIScrollView with iOS Auto Layout Constraints: Wrong size for subviews](http://stackoverflow.com/questions/16441808/uiscrollview-with-ios-auto-layout-constraints-wrong-size-for-subviews) – dmorrow Apr 25 '17 at 15:04
  • @riadhluke but if I provide a height for it - wouldn't that prevent it scrolling - wouldn't the internal views for the content views provide the height for the scrollview ? – UKDataGeek Apr 25 '17 at 15:06
  • You have to provide the contentSize for a UIScrollView when laying it out using constraints. For example: You can set the width of View to be equal to the scrollView as this will provide the width of the scrollview's content. Then, to provide content height, layout red and yellow views vertically and use them to provide the height of View. This means you'll have to provide initial height for yellow view, or you can use a view that provides an intrinsicContentSize to determine the yellow view height so you don't have to manually change it. – riadhluke Apr 25 '17 at 15:06
  • 1
    If you provide a content height taller than the scrollview frame, it will scroll. You are right, the internal views should provide the content size, but right now that has no value, as View (scrollview's only content) does not have a determinate size. – riadhluke Apr 25 '17 at 15:10
  • I don't think I follow you - I just pulled in the project into a gh repo - https://github.com/grantkemp/scrollview ... so should I jus pull a size in for the ContentView? – UKDataGeek Apr 25 '17 at 15:11
  • @dmorrow that other question doesn't seem to use storyboard at all and there doens'nt seem to be a similar question to above on SO – UKDataGeek Apr 25 '17 at 15:12
  • I can also see there is a constraint setting red view top equal to top layout guide, which I think is probably a mistake. Or did you want this to mean the red view should have a permanent position even when the scrollview scrolls? – riadhluke Apr 25 '17 at 15:13
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142635/discussion-between-riadhluke-and-mobile-bloke). – riadhluke Apr 25 '17 at 15:15

6 Answers6

3

You have to provide the contentSize for a UIScrollView when laying it out using constraints.

For example:

You can set the width of View to be equal to the scrollView as this will provide the width of the scrollview's content. Then, to provide content height, layout red and yellow views vertically and use them to provide the height of View. This means you'll have to provide initial height for yellow view, or you can use a view that provides an intrinsicContentSize to determine the yellow view height so you don't have to manually change it.

Also I think you have to remove redview top == layout guide top, and add redview top == View top and yellowview bottom == View bottom

riadhluke
  • 880
  • 6
  • 18
1

Set the Width and Height constraint of View which is inside the scroll view.

If a width is fixed then add constraints make View width equal to Scrollview.

If height is variable then set current height and change its priority to 750.

For example, in below image, I have set width and height of a View.

Note if height is variable then View must know it's height, based on view content height

enter image description here

Manish Chaurasia
  • 28
  • 5
  • HI - I followed that instruction - but it seems to just prevent scrolling.. ( unless I am doing somthing wrong... https://github.com/grantkemp/scrollview/tree/addingHeightWidth – UKDataGeek Apr 25 '17 at 15:25
1

For UIScrollView to work perfectly, what you need to do is make sure the content view inside the UIScrollView can infer its height always. I shall be referring to child view of the UIScrollView as the content view. That being said, what you need to do is:

  • To your UIScrollView add a leading, trailing, top and bottom. And to your content view add a leading, top, trailing and bottom to the UIScrollView. Now Xcode ought to complain about missing constraints. What you need to do now is add an equal height and width constraint to the main view of the UIViewController and provide a priority of lets say 250 to the equal height constraint.
  • Now add a leading, top and trailing and fixed height constraint to your red view
  • Now add a leading, trailing, top and bottom to the yellow view. Now you can either programmatically set the height of the yellow view or add content into it thus allowing the yellow view to infer its height which in turn will let the content view know its height.

What the low priority equal height constraint will do is provide enough constraints for the content view so that Xcode doesn't complain and since priority is low, it'll break if the size of the content inside is too large to be completely displayed on the screen.

Note: Keep your view heirarchy the same as what it is.

Rikh
  • 4,078
  • 3
  • 15
  • 35
0

Keep in mind that the View in ScrollView must have explicit size (layout it with scrollview dont make its size explicit). Normally, you can layout View's width with root View or fixed value. View's Height you also fixed value or layout with views inside it(views inside it must have explicit height → View's height can caculated ). This is my experience, hope that it can help you :))

NhatQuang
  • 31
  • 1
  • 2
  • Hi NhatQuang - thanks for input. but I am not really clear what you mean. Can you clarify? – UKDataGeek Apr 25 '17 at 15:36
  • Ok, you can try: + Scrollview layout with root view (top = 0, left = 0, bottom = 0 , right = 0 ) + View in Scrollview layout (top = 0, left = 0, right = 0) with scrollview + View's width = rootView + View's height = 500 + Now you can layout all views in View normally If you dont wan expicit View's height then all views inside it must have explicit height – NhatQuang Apr 25 '17 at 15:48
0

set the height and width of view which are inside the scrollView. if the view height is fixed then set the constraints and for the view with variable height set the height of that view and connect it with viewController as NSLayoutConstrains and change programmatically and also update the height of scrollView with

scrollView.contenSize.height = fixedViewHeight + variableViewHeight

to change the height of scrollview too.

Ayush sharma
  • 169
  • 7
0

Keys for getting a ScrollView to work

  • The UIScrollView should only use one subview. This is a UIView that serves as content view to hold everything you wish to scroll.
  • Make the content view and the scroll view's parent have equal widths for vertical scrolling (or equal heights for horizontal scrolling). If the ScrollView is inside a complex layout, sometimes it is easier to put the ScrollView inside its own parent content view. This makes it easier to match the child width (or height) to the parent.
  • Make sure that all of the scrollable content has a set width and is pinned on all sides.

My full answer with an example is here.

Community
  • 1
  • 1
Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393