Getting ScrollView to Work with Autolayout and Sto

问题:

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:

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

I am getting the following warning:

回答1:

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

回答2:

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

回答3:

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.

回答4:

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 :))

回答5:

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.

回答6:

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.