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:

1. 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.

2. Add a UIView as a subview of the Scroll View. Pin top, left, right, and bottom constraints.

3. 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.

4. 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

Solution 1

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:

1. Add a Scroll View as a Sub View of the Main View.

2. Select the Scroll View and uncheck "Constrain to margins" and pin top, left, right, bottom, constraints

3. Add a UIView as a subview of the Scroll View. Name this view "Content View"

4. Select the Content View and pin top, left, right, and bottom constraints. Then add a center horizontally constraint.

5. Next from the Content View to the Main View add equal width and equal height constraints.

6. Add whatever elements you need inside the Content View. Pin top, left, right, and height constraints to the elements that were just added.

7. 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.

Solution 2

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

Solution 3

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

    }
}

Solution 4

Follow this steps:

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


Solution 5

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.

1. Drag Scrollview into your ViewController and apply four constraints (Leading, Trailing, Top and Bottom)

2. 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.

.

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

4. 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.

.

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

View more solutions