UIScrollView not scrolling despite adding Auto Layout constraints

Question

I'm working on a project where I've added multiple UITextFields to a UIView, which is acting as a container view. I then add this container view to a UIScrollView, which in turn, I add to the main view of my screen. The problem is, my container view appears on the screen, but does not scroll, despite being attached to a UIScrollView, and I can't tell why. All of the code, and constraints are in Swift.

Below is the relevant code I have thus far:

private func setupViews() {
        view.backgroundColor = .nzRedColor()

        registerView.frame = CGRect(x: 0.0, y: 0.0, width: self.view.frame.width, height: self.view.frame.height)
        registerView.backgroundColor = UIColor.green

        registerScrollView.frame = CGRect(x: 0.0, y: 0.0, width: self.view.frame.width, height: 300.0)
        registerScrollView.backgroundColor = UIColor.blue


        let addViewsClosure = { (superview: UIView, views: UIView...)->() in
            for view in views {
                view.translatesAutoresizingMaskIntoConstraints = false
                if ((view as? UIImageView) != nil) {
                    superview.addSubview(view)
                } else if ((view as? UITextField) != nil) {
                    self.registerView.addSubview(view)
                    self.registerScrollView.addSubview(self.registerView)
                    superview.addSubview(self.registerScrollView)
                } else {
                    superview.addSubview(view)
                }
            }
        }

        let customizeTextFields = { (textfields: UITextField...) in
            for textfield in textfields {
                textfield.backgroundColor = UIColor(white: 1.0, alpha: 0.3)
                textfield.font = UIFont.systemFont(ofSize: 14, weight: UIFontWeightRegular)
                textfield.layer.cornerRadius = 2.0
            }
        }

        customizeTextFields(firstNameTextField, lastNameTextField, cityTextField, countryTextField, emailTextField, passwordTextField, passwordConfirmationTextField)


        addViewsClosure(view, logoImageView, firstNameTextField, lastNameTextField, cityTextField, countryTextField, emailTextField, passwordTextField, passwordConfirmationTextField, registerButton, skipButton)


        logoImageView.constrainTop(at: 50, after: topLayoutGuide.anchorableRepresentation)
        logoImageView.constrainCenterHorizontally()
        logoImageWidthConstraint = logoImageView.constrainWidth(at: 0)
        logoImageHeightConstraint = logoImageView.constrainHeight(at: 0)
        updateLogoImageSize()


        firstNameTextField.constrainTop(at: 10, after: logoImageView)
        firstNameTextField.constrainHeight(at: 50)
        firstNameTextField.constrainLeading(alignedWith: view, offset: 10)
        firstNameTextField.constrainTrailing(alignedWith: view, offset: -10)

        lastNameTextField.constrainTop(at: 10, after: firstNameTextField)
        lastNameTextField.constrainHeight(at: 50)
        lastNameTextField.constrainLeading(alignedWith: firstNameTextField)
        lastNameTextField.constrainTrailing(alignedWith: firstNameTextField)

        cityTextField.constrainTop(at: 10, after: lastNameTextField)
        cityTextField.constrainHeight(at: 50)
        cityTextField.constrainLeading(alignedWith: firstNameTextField)
        cityTextField.constrainTrailing(alignedWith: firstNameTextField)

        countryTextField.constrainTop(at: 10, after: cityTextField)
        countryTextField.constrainHeight(at: 50)
        countryTextField.constrainLeading(alignedWith: firstNameTextField)
        countryTextField.constrainTrailing(alignedWith: firstNameTextField)

        emailTextField.constrainTop(at: 10, after: countryTextField)
        emailTextField.constrainHeight(at: 50)
        emailTextField.constrainLeading(alignedWith: firstNameTextField)
        emailTextField.constrainTrailing(alignedWith: firstNameTextField)

        passwordTextField.constrainTop(at: 10, after: emailTextField)
        passwordTextField.constrainHeight(at: 50)
        passwordTextField.constrainLeading(alignedWith: firstNameTextField)
        passwordTextField.constrainTrailing(alignedWith: firstNameTextField)

        passwordConfirmationTextField.constrainTop(at: 10, after: passwordTextField)
        passwordConfirmationTextField.constrainHeight(at: 50)
        passwordConfirmationTextField.constrainLeading(alignedWith: firstNameTextField)
        passwordConfirmationTextField.constrainTrailing(alignedWith: firstNameTextField)

        registerView.constrainTop(at: 0)
        registerView.constrainHeight(at: self.view.frame.height)
        registerView.constrainLeading(at: 0)
        registerView.constrainTrailing(at: 0)

        registerScrollView.constrainTop(at: 50, after: logoImageView)
        registerScrollView.constrainHeight(at: 300.0)
        registerScrollView.constrainLeading(at: 0)
        registerScrollView.constrainTrailing(at: 0)

        registerButton.constrainTop(at: 30, after: passwordConfirmationTextField)
        registerButton.constrainHeight(at: 50)
        registerButton.constrainLeading(alignedWith: firstNameTextField)
        registerButton.constrainTrailing(alignedWith: firstNameTextField)

        skipButton <- { $0.top >= registerButton.anchors.bottom + 12 }
        skipButton.constrainBottom(at: 12)
        skipButton.constrainCenterHorizontally()
    }

Two things I wish to note here:

1. Despite me making the registerView's background colour to be "Green", I don't the view appearing.

2. For some reason, all of the UITextFields appear directly on the UIScrollView (because its colour is blue), and the UIScrollView is visible, but unfortunately not scrollable. Can anyone see what it is I'm doing wrong?

Answer 1

When using auto-layout with scroll views, the content of the scroll view defines the .contentSize . That means your registerView must have all its constraints set properly.

You set the registerView background to Green, but you don't see the view? I bet if you set its .clipsToBounds to true you won't see the text fields anymore either.

    registerView.constrainTop(at: 0)
    registerView.constrainHeight(at: self.view.frame.height)
    registerView.constrainLeading(at: 0)
    registerView.constrainTrailing(at: 0)

You've set Top, Leading, Trailing and Height constraints - but looks like you're missing Width and Bottom.

The Bottom constraint should probably be set to 0 - like Top, Leading and Trailing.

I'm guessing you want registerView Height constraint to be determined by the last text field - passwordConfirmationTextField - but if that's the case, you're still missing that one.