How do you use auto layout in a scroll view?

Question

So I'm using a UIScrollView in a view controller in the latest Xcode. I have buttons inside the scroll view. When I run the application, the scroll view disappears. Can anyone tell me what is causing this and how the auto layout tools work?

Answer 1

Follow these steps,

1. Take scroll view and set constraints (leading, trailing, top, bottom) with respect to the parent view. And set some background color to it so that it will visible at run time.

2. Take UIButton and place it over scrollview, and then set constraints for your button (leading, trailing, top) with respect to the scroll view, and also set the width and height constraints for button ,and also some background color to button so that it will visible at runtime.

Note: The hirearchy of your contents should be like this- -parentView -ScrollView -button

please let me know if anything is not clear.

Thanks.

Answer 2

Here's a recipe for setting up a scroll view with Auto Layout.

1. Drag out a scrollView and add it to your ViewController. Pin its edges to the edges of its superView.

2. Drag out a new UIView and drop it into your scrollView. This will serve as the contentView for the scrollView and it is the only top level view in the scrollView. Pin all four of its edges to the edges of the scrollView. Note: this will not set the content size of the scrollView.

3. If you want the scrollView to scroll vertically only, set the width of the contentView to the width of the scrollView. To do this, go to the Document Outline View and control -drag from the contentView to the scrollView and select Equal Widths from the pop up.

4. To set the height of the content view, you can set a height constraint and then change its height to the value you want. The value needs to be larger than the height of the scrollView if you want it to scroll. The other way to do it is to make sure that all of the items in your contentView all have height constraints and are all pinned to each other, and the topmost one is pinned to the top of the contentView and the bottom one is pinned to the bottom of the contentView. If you do this, then Auto Layout will be able to compute the height of the contentView for you. If this total height is greater than the height of the scrollView, then your contentView will scroll.

5. Finally, add in your button. You can now center the button horizontally in the contentView since you established the width of the contentView in step 3.

Answer 3

Hope this will help others as well

1. When you working scrollView with autoLayout, the view hierarchy should be like

A view( View1 ) which contain the scrollView and a view( View2 ) which contain inside the scrollView.

Now put the Constraint for View1

yes, pinned it from all the side.

Do the same step for scrollView as well as View2 , Now it will be giving warning like scrollable content size Ambiguity

Now,the most important step is to press CTRL and drag from the View2 to View1 , scroll down the popover and select equal width

Now it will give you the warning for ambitious scrollView height but when you give proper constraints to the inner element(inside the View1 ) it will also go away.