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:
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
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 :))
For
UIScrollView
to work perfectly, what you need to do is make sure the content view inside theUIScrollView
can infer its height always. I shall be referring to child view of theUIScrollView
as the content view. That being said, what you need to do is:UIScrollView
add a leading, trailing, top and bottom. And to your content view add a leading, top, trailing and bottom to theUIScrollView
. 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 theUIViewController
and provide a priority of lets say 250 to the equal height constraint.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.
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
Keys for getting a ScrollView to work
UIScrollView
should only use one subview. This is aUIView
that serves as content view to hold everything you wish to scroll.My full answer with an example is here.
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.