Using Scroll View with Autolayout Swift

Question

I know this question has been asked many times but this is a problem I have been struggling with for a long time and I'm sure others are too, even with the current answers and tutorials out there.

When adding a Scroll View I go through the following steps:

Add a Scroll View as a subview of the original view in the view controller. Pin top, left, right, and bottom. Ensuring that "Constrain to margins" is unchecked.
Add a UIView as a subview of the Scroll View. Pin top, left, right, and bottom constraints.
Add an equal widths constraint between the content view and the view controllers view.

At this point of I run the app the content view does not appear and the scroll View takes up the entire screen.

Next I add elements to the Content View that just include 4 UIViews to test everything. I give each UIView top, left, and right constraints. And the last UIView a bottom constraint.

Not at this point when I run the app the Content View and Scroll View each take up about half of the screen and I can scroll the Content View around. See below photo.

I have followed every tutorial I can find and tried implementing all SO answers I have found but I can't seem to get it to work. If anybody has come across this or knows a solution your help would be very much appreciated!

The green is the Content View and the blue is the Scroll View

Scroll View and Subview constraints

could you add constraints screenshot in question?...also tell size of scrollview and its subview — Sanman, May 14 '16 at 07:10
Added Constraints screenshot. What do you mean by the size? I am using the all iPhones in portrait size class and filling up the view. — 01Riv, May 14 '16 at 07:16
i wasn't clear before...i wanted to know what value you had set for bottom constraint.Set it to zero.By size i meant x,y and height,width.Make sure height of contentview is larger than scrollview.for trial just create scroll with height 100 and contentview with height 400 with some button at end.The constraints you added are correct just set the bottom one to zero.Hope it helps :) — Sanman, May 14 '16 at 07:27
Thanks for the feedback! What do you mean by the bottom one? Which bottom constraint? I set the size to freeform to test so I can add extra content. — 01Riv, May 14 '16 at 07:28
bottom contraint of contentview to scrollview.what does this does is,considering your content is larger than scroll it allows you to scroll to bottom. — Sanman, May 14 '16 at 07:36
I follow you but unless I am looking at the wrong constraint, the content view to scroll view is set to 0. — 01Riv, May 14 '16 at 07:42

score 78 · Accepted Answer · answered May 17 '16 at 06:27

78

I figured this out with the help of the other answers but I had to make some adjustments to get it work the way I wanted. Here are the steps I took:

Add a Scroll View as a Sub View of the Main View.
Select the Scroll View and uncheck "Constrain to margins" and pin top, left, right, bottom, constraints
Add a UIView as a subview of the Scroll View. Name this view "Content View"
Select the Content View and pin top, left, right, and bottom constraints. Then add a center horizontally constraint.
Next from the Content View to the Main View add equal width and equal height constraints.
Add whatever elements you need inside the Content View. Pin top, left, right, and height constraints to the elements that were just added.
On the bottom most item inside the Content View pin a bottom constraint. Select this constraint and change to "Greater Than or Equal". Change the constant to 20.

The constraints added to the items inside the Content View are very important, especially the bottom constraint added to the last item. They help to determine the content size of the scroll view. Adding the bottom constrain as I described will enable the view to scroll if the content is too large to fit in the screen, and disable scrolling if the content does fit in the screen.

answered May 17 '16 at 06:27

01Riv

1,444
1
13
28

4

golden. The importance of bottom item's constraint wasn't discussed in any of tutorials I found. All of them suggested specifying the contentSize of the scrollView. But most of the time we need a autoresizing scrollView depending on content in it! Thank you. – Mr_Vlasov Jan 27 '17 at 01:58
1

Steps 1 - 4 I have been following for some time now however I have had better luck replacing steps 5 & 7 with the following: Add a center vertically in container constraint on the content view in addition to the center horizontally constraint. In the properties section for the center vertically in container constraint put a checkmark under "Remove at build time" With both of these centering constraints, interface builder will let you position your objects inside your content view as it should. – Padawan Apr 13 '17 at 03:29
Still running into a "Need constraint for Y position or height" of the scrollView. – Meshach Apr 20 '17 at 23:18
works fine. but if I need to hide some view using: http://stackoverflow.com/questions/19707229/how-to-change-label-constraints-during-runtime/19707579#19707579 how can I change content size to fit the hidden view? – Ali Hassan Apr 24 '17 at 12:07
Thanks! but what happened when you need horizontal scrollview? Instead of set a bottom constraint, you need to set a trailing constraint, right? – A. Trejo Jul 05 '17 at 19:50
For __Step 5__: _"Next from the Content View to the Main View add equal width and equal height constraints."_ , in my case, need to set height (width) constraint's __priority__ to low if want to scroll vertically (horizontally). – Kjuly Jul 31 '17 at 13:00
Thank's for clarify the importance of last item constraint. – Manee.O.H Dec 07 '17 at 19:34

score 24 · Answer 2 · answered May 24 '20 at 22:56

Xcode 11 Swift 5

More info here

In order for scrollview to work in Auto Layout, scrollview must know its scrollable content (scrollview content) width and height , and also the frame (X, Y , Width, Height) of itself, ie. where should the superview place scrollview and what size.

With Xcode 11 two new things Content Layout guide and Frame Layout guide were introduced in Interface Builder.

Now for making work scrollView from storyboard you should:

Put a scroll view into the view controller and set constraints (leading, top, trailing, bottom - all 0)
Put a view(contentView) inside the scroll view and set constraints (leading, top, trailing, bottom - all 0)
In views hierarchy, do ctrl drag from new View(contentView) to Content Layout guide of scrollView and in the appeared context menu choose all constraints (leading, top, trailing, bottom - all 0)
If we want to make the scrollview scroll only vertically, create an equal width constraint between the view and the scrollview's Frame Layout guide (for horizontally create equal height constraint)
Place all your content view elements inside it and create all vertical constraints in the way that the top and the bottom of the contentView must be connected by constraints inside it.

That's it

This finally solved my problem, thank you. Please review the constraints created this way carefully and change any multipliers not equal to 1 and any constants not equal to 0. Interface builder is being a little bit too "helpful" sometimes. — Martin Gunnarsson, Oct 26 '20 at 07:18

score 5 · Answer 3 · answered May 14 '16 at 08:57

I have made a simple view in code that should be self explanatory and might help you. It outlines all the steps you need to take to make the scroll view working.

If something is not clear, feel free to drop a comment.

import UIKit

class TutorialView: UIView {

    lazy var sv: UIScrollView = {
        let object = UIScrollView()

        object.backgroundColor = UIColor.whiteColor()
        object.translatesAutoresizingMaskIntoConstraints = false
        return object
    }()

    lazy var tutorialPageOne: UIView = {
        let object = UIView(frame: UIScreen.mainScreen().bounds)
        object.translatesAutoresizingMaskIntoConstraints = false
        object.backgroundColor = UIColor.cyanColor()

        return object
    }()

    lazy var tutorialPageTwo: UIView = {
        let object = UIView(frame: UIScreen.mainScreen().bounds)
        object.translatesAutoresizingMaskIntoConstraints = false
        object.backgroundColor = UIColor.lightGrayColor()

        return object
    }()

    lazy var tutorialPageThree: UIView = {
        let object = UIView(frame: UIScreen.mainScreen().bounds)
        object.translatesAutoresizingMaskIntoConstraints = false
        object.backgroundColor = UIColor.redColor()

        return object
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.addSubview(self.sv)
        self.sv.addSubview(self.tutorialPageOne)
        self.sv.addSubview(self.tutorialPageTwo)
        self.sv.addSubview(self.tutorialPageThree)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let vc = nextResponder() as? UIViewController
        let mainSreenWidth = UIScreen.mainScreen().bounds.size.width
        let mainScreenHeight = UIScreen.mainScreen().bounds.size.height

        NSLayoutConstraint.activateConstraints([
            self.sv.topAnchor.constraintEqualToAnchor(vc?.topLayoutGuide.bottomAnchor),
            self.sv.leadingAnchor.constraintEqualToAnchor(self.leadingAnchor),
            self.sv.bottomAnchor.constraintEqualToAnchor(vc?.bottomLayoutGuide.topAnchor),
            self.sv.trailingAnchor.constraintEqualToAnchor(self.trailingAnchor)
        ])

        NSLayoutConstraint.activateConstraints([
            self.tutorialPageOne.widthAnchor.constraintEqualToConstant(mainSreenWidth),
            self.tutorialPageOne.heightAnchor.constraintEqualToConstant(mainScreenHeight),
            self.tutorialPageOne.topAnchor.constraintEqualToAnchor(self.sv.topAnchor),
            self.tutorialPageOne.leadingAnchor.constraintEqualToAnchor(self.sv.leadingAnchor),
            self.tutorialPageOne.bottomAnchor.constraintEqualToAnchor(self.sv.bottomAnchor)
        ])


        NSLayoutConstraint.activateConstraints([
            self.tutorialPageTwo.widthAnchor.constraintEqualToConstant(mainSreenWidth),
            self.tutorialPageTwo.heightAnchor.constraintEqualToConstant(mainScreenHeight),
            self.tutorialPageTwo.topAnchor.constraintEqualToAnchor(self.sv.topAnchor),
            self.tutorialPageTwo.leadingAnchor.constraintEqualToAnchor(self.tutorialPageOne.trailingAnchor),
            self.tutorialPageTwo.bottomAnchor.constraintEqualToAnchor(self.sv.bottomAnchor)
        ])

        NSLayoutConstraint.activateConstraints([
            self.tutorialPageThree.widthAnchor.constraintEqualToConstant(mainSreenWidth),
            self.tutorialPageThree.heightAnchor.constraintEqualToConstant(mainScreenHeight),
            self.tutorialPageThree.topAnchor.constraintEqualToAnchor(self.sv.topAnchor),
            self.tutorialPageThree.leadingAnchor.constraintEqualToAnchor(self.tutorialPageTwo.trailingAnchor),
            self.tutorialPageThree.bottomAnchor.constraintEqualToAnchor(self.sv.bottomAnchor),
            self.tutorialPageThree.trailingAnchor.constraintEqualToAnchor(self.sv.trailingAnchor)
        ])

    }
}

Tom, your code is certainly self explanatory, especially in Swift 3. Assuming Tutorial.swift needs to be a `SubView` of `ViewController`, this could potentially become the accepted answer for another post where my code could be improved with `autolayout`. If you’re interested here’s the post http://stackoverflow.com/questions/40996685/in-uiscrollview-uiview-displays-successive-frame-information-correctly-while-uil/41006889#41006889 — Greg, Dec 07 '16 at 20:35

Fahad Azeem · Answer 4 · 2017-07-07T16:09:33.557

3

I have spend alot of time to figure this out and its pretty simple. Here is the solution. Follow these steps

Add ScrollView as subview of the main view
Pin top, left, right, bottom, horizontally in the container, Vertically in the container.
Add container view as subview of scroll view
Pin top, left, right, bottom, horizontally in the container, Vertically in the container.
Add your subviews in container view with desired constraints.
Set the content size of the scroll view accordingly.

Keep scrolling :)

edited Jul 07 '17 at 16:09

answered May 14 '16 at 08:25

Fahad Azeem

541
7
14

did you set the content size of your scrollview? – Fahad Azeem May 15 '16 at 07:45
I just followed the set of steps you laid out. How should I be setting it? – 01Riv May 15 '16 at 07:48
add a view like textfield in container view and pin it to the top, right and fix the width height. Now set the content size of scrollview more than the height of your view. e.g. CGSizeMake(320,700) for iPhone 5 and run the code. you will be able to scroll the view then. – Fahad Azeem May 15 '16 at 07:52

score 3 · Answer 5 · answered Jun 13 '18 at 07:11

Follow this steps:

Add a Scroll View as a Sub View of the Main View.
Select the Scroll View and uncheck "Constrain to margins" and pin top, left, right, bottom, constraints
Add a UIView as a subview of the Scroll View. Name this view "Content View"
Set “Content View” constraint (top, bottom, leading and trailing) as (0,0,0,0).
Now you can see hierarchy like this view -> scroll view -> view(content view)
Our “Content view” must have equal width and equal height with parent view.
Select height constraint of content view and set priority with low(250).
Now you can design your view with any height.
Add whatever elements you need inside the Content View. Pin top, left, right, and height constraints to the elements that were just added.
Congrats you are done with scroll view with autolayout.

score 2 · Answer 6 · answered Oct 05 '17 at 01:57

To those who are looking for an example UIScrollView and AutoLayout. I am using SnapKit, it is working for Xcode 9, Swift 3

    let scrollView = UIScrollView()
    view.addSubview(scrollView)
    scrollView.snp.makeConstraints { (make) in
        make.edges.equalTo(view).inset(UIEdgeInsetsMake(0, 0, 0, 0))
        make.top.left.right.equalTo(view)
    }

    let view1 = UIView()
    view1.backgroundColor = UIColor.red
    scrollView.addSubview(view1)
    view1.snp.makeConstraints { (make) in
        make.top.equalTo(scrollView.snp.top).offset(0)
        make.left.equalTo(scrollView.snp.left).offset(0)
        make.width.equalTo(scrollView.snp.width)
        make.height.equalTo(300)
    }

    let view2 = UIView()
    view2.backgroundColor = UIColor.blue
    scrollView.addSubview(view2)
    view2.snp.makeConstraints { (make) in
        make.top.equalTo(view1.snp.bottom)
        make.left.equalTo(scrollView)
        make.width.equalTo(scrollView)
        make.height.equalTo(300)
    }

    let view3 = UIView()
    view3.backgroundColor = UIColor.green
    scrollView.addSubview(view3)
    view3.snp.makeConstraints { (make) in
        make.top.equalTo(view2.snp.bottom)
        make.left.equalTo(scrollView)
        make.width.equalTo(scrollView)
        make.height.equalTo(100)
        make.bottom.equalTo(scrollView.snp.bottom).offset(-20)
    }

Gurjinder Singh · Answer 7 · 2018-10-18T13:54:39.993

Just want to show visually. If you want to create a view which is larger than the size of ViewController then you can increase the height of ViewController form size inspector. Choose Simulated Size to Freeform and set required height as shown in image and now your viewController has the mentioned height.

Drag Scrollview into your ViewController and apply four constraints (Leading, Trailing, Top and Bottom)
Now drag one view having same width and height as of ScrollView inside ScrollView and set 6 constraints (Leading, Trailing, Top, Bottom, FixHeight, =WidthToScrollView). In my case I have 15 L and T space and other margins accordingly. You view may have different margin but constraints should be same.

.

Now you can drag your views accordingly and set constraints. I am having two view inside the view.

For 1st view I set Leading, Top, Trailing and want to have fix height. For 2nd I set Leading, bottom, trailing and want to have fix height.

.

Congratulation!. You have all set now run your app.

score 1 · Answer 8 · answered May 08 '20 at 13:22

Use this ScrollView, and use contentView similar to that of UITableViewCell's/UICollectionViewCell's content view

class ScrollView: UIScrollView {

lazy var contentView : UIView = {
    let contentView = UIView(frame: .zero)
    contentView.translatesAutoresizingMaskIntoConstraints = false
    contentView.backgroundColor = .orange
    return contentView
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    viewSetup()
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

private func viewSetup() {
    addSubview(contentView)
    setupConstraints()
}

private func setupConstraints() {

    NSLayoutConstraint.activate([
        contentView.leadingAnchor.constraint(equalTo: leadingAnchor),
        contentView.trailingAnchor.constraint(equalTo: trailingAnchor),
        contentView.topAnchor.constraint(equalTo: topAnchor),
        contentView.bottomAnchor.constraint(equalTo: bottomAnchor),
        contentView.widthAnchor.constraint(equalTo: widthAnchor)
    ])

    let contraint = contentView.heightAnchor.constraint(equalTo: heightAnchor)
    contraint.priority = .defaultLow
    contraint.isActive = true
}

}

Marc · Answer 9 · 2020-09-03T16:00:50.537

How to do it programmatically?

Remember : (your main view) -> (your scroll view) -> (your content view) -> all your stuff

As of Swift4

    let scrollView = UIScrollView()
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    addSubview(scrollView)
    
    NSLayoutConstraint.activate([scrollView.topAnchor.constraint(equalTo: topAnchor),
                                 scrollView.leadingAnchor.constraint(equalTo: leadingAnchor),
                                 scrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
                                 scrollView.bottomAnchor.constraint(equalTo: bottomAnchor)])
    
    let contentView = UIView()
    contentView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(contentView)
    
    NSLayoutConstraint.activate([contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
                                 contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
                                 contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
                                 contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
                                 contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)])

Then you can add other subviews in ContentView

Troubleshooting:

Make sure every constraint is connecting from contentView.TopAnchor to contentView.BottomAnchor so you will have your contentSize dynamically

score 1 · Answer 10 · answered Feb 14 '22 at 11:09

Simple way to add ScrollView:

add Scrollview in view contrller
add left,right,top and bottom constraint of scrollview to its superview
add UIView inside scrollview
add left,right,top and bottom constraint of UIView to content layout guide
add equal width constraint of UIview to Frame layout Guide
add your sub component now (if you just want to check scrollview is working or not just give fix height and check)

score 0 · Answer 11 · answered May 14 '16 at 07:36

The UIScrollView class scrolls its content by changing the origin of its bounds. To make this work with Auto Layout, the top, left, bottom, and right edges within a scroll view now mean the edges of its content view.

The constraints on the subviews of the scroll view must result in a size to fill, which is then interpreted as the content size of the scroll view. (This should not be confused with the intrinsicContentSize method used for Auto Layout.) To size the scroll view’s frame with Auto Layout, constraints must either be explicit regarding the width and height of the scroll view, or the edges of the scroll view must be tied to views outside of its subtree.

See also a Technote Apple wrote about this issue: https://developer.apple.com/library/ios/technotes/tn2154/_index.html

score 0 · Answer 12 · answered May 14 '16 at 14:48

The best way I know how to create an UI inside a scrollView without code is:

Add your scrollView to the uiviewcontroller with proper constraints between it and its parent view.
Add a “brace view” to the scrollview.
“Brace view” should be hidden since it’s not apart of your final UI.
Make left, top, right contains between “brace view” and the UIScrollView. Make height constraint. (Height constraint can be any number). Make align center x to UIScrollView constraints.
Add your final UI beneath the “brace view”.
Add top constraint between the first final UI view and the “brace view”.
Link all your final UIs view together with top or bottom constraints.
Add proper final UI constraints.
Add bottom constraints between the last final UI view and the scroll view. ( This constraint.constant is important because it’s apart of your final UI).

Here's a quick github project example.

score 0 · Answer 13 · answered Mar 28 '17 at 07:19

As per @m1234, however you need to release the equal heights otherwise the scroll does not work - my method would be as thus :

Add a Scroll View as a Sub View of the Main View.
Select the Scroll View and uncheck "Constrain to margins" and pin top, left, right, bottom, constraints
Add a UIView as a subview of the Scroll View. Name this view "Content View"
Select the Content View and pin top, left, right, and bottom constraints. Then add a center horizontally constraint.
Next from the Content View to the Main View add an equal width constraint.
Add whatever elements you need inside the Content View. Pin top, left, right, and height constraints to the elements that were just added.
On the bottom most item inside the Content View pin a bottom constraint. Select this constraint and change to "Greater Than or Equal". Change the constant to 20.

Using Scroll View with Autolayout Swift

13 Answers13

Linked