UIScrollview does not show all subviews and is not scrollable

Question

I have some problems with scrollview. I added a ScrollView to my ViewController with simple UIViews. But the ScrollView does not scroll and it does not show all my subviews.

I followed this example IOS swift scrollview programmatically but somehow my code does not work. Here is my example

import UIKit
class StatisticsViewController: UIViewController{ 

    let scrollView: UIScrollView = {
        let view = UIScrollView()
        view.backgroundColor = UIColor.lightGray.adjust(by: 28)
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    let topstatsView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .red
        return view
    }()

    let resultsView: UIView = {
         let view = UIView()
         view.translatesAutoresizingMaskIntoConstraints = false
         view.backgroundColor = .systemPink
         return view
     }()

    let blue: UIView = {
        let view = UIView()
        view.backgroundColor = .blue 
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    let yellow: UIView = {
        let view = UIView()
        view.backgroundColor = .yellow
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
    self.view.addSubview(scrollView)

    // constraints of scroll view
    scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true


    scrollView.addSubview(topstatsView)
    scrollView.addSubview(resultsView)
    scrollView.addSubview(blue)
    scrollView.addSubview(yellow)

    NSLayoutConstraint.activate([
        topstatsView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 40),
        topstatsView.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: 30),
        topstatsView.heightAnchor.constraint(equalToConstant: 250),
        topstatsView.rightAnchor.constraint(equalTo: scrollView.rightAnchor)
    ])

    NSLayoutConstraint.activate([
        resultsView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 330),
        resultsView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 30),
        resultsView.heightAnchor.constraint(equalToConstant: 400),
        resultsView.widthAnchor.constraint(equalToConstant: 450)
    ])

    NSLayoutConstraint.activate([
        blue.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 330),
        blue.leftAnchor.constraint(equalTo: resultsView.rightAnchor, constant: 20),
        blue.heightAnchor.constraint(equalToConstant: 400),
        blue.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: -30)
    ])


     NSLayoutConstraint.activate([
         yellow.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 800),
         yellow.leadingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20),
         yellow.heightAnchor.constraint(equalToConstant: 400),
         yellow.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -30)
     ]) 
}

Here is a screenshot of my example.

As you can see the red view (topstatsView) does not confirm the right anchor and you cannot see the yellow and blue ones. And it is not scrollable. I am not able to see my mistakes. Thanks in advance!

Answer 1

Here you define wrong constraint.

1) Always add constraints related to each views top, bottom, leading and trailing, instead of define top constraint of all views to a scrollview.

2) Its not a good practise to add both leading and trailing anchor when you already define a width anchor.

3) Add bottom constraint related to a scrollview bottom to make it scrollable.

4) Add leading and trailing constraint related to outerView instead of adding it related to a scrollview.

Here is the updated code:-

class StatisticsViewController: UIViewController{

let scrollView: UIScrollView = {
    let view = UIScrollView()
    view.backgroundColor = UIColor.lightGray
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

let topstatsView: UIView = {
    let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.backgroundColor = .red
    return view
}()

let resultsView: UIView = {
    let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.backgroundColor = .systemPink
    return view
}()

let blue: UIView = {
    let view = UIView()
    view.backgroundColor = .blue
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

let yellow: UIView = {
    let view = UIView()
    view.backgroundColor = .yellow
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

override func viewDidLoad() {
    super.viewDidLoad()
    self.view.addSubview(scrollView)

    // constraints of scroll view
    scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true


    scrollView.addSubview(topstatsView)
    scrollView.addSubview(resultsView)
    scrollView.addSubview(blue)
    scrollView.addSubview(yellow)

    NSLayoutConstraint.activate([
        topstatsView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 40),
        topstatsView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 30),
        topstatsView.heightAnchor.constraint(equalToConstant: 250),
        topstatsView.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -30)
    ])

    NSLayoutConstraint.activate([
        resultsView.topAnchor.constraint(equalTo: topstatsView.bottomAnchor, constant: 30),
        resultsView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 30),
        resultsView.heightAnchor.constraint(equalToConstant: 400),
        resultsView.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -30)
    ])

    NSLayoutConstraint.activate([
        blue.topAnchor.constraint(equalTo: resultsView.bottomAnchor, constant: 30),
        blue.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 20),
        blue.heightAnchor.constraint(equalToConstant: 400),
        blue.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -30)
    ])


    NSLayoutConstraint.activate([
        yellow.topAnchor.constraint(equalTo: blue.bottomAnchor, constant: 30),
        yellow.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 20),
        yellow.heightAnchor.constraint(equalToConstant: 400),
        yellow.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -30),
        yellow.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor, constant: -20)
    ])
}

}