Dynamic scrollView contentSize autoLayoutConstraints swift

Question

I created a scrollview and added a contentView inside it that has all the page elements. My issue is that I want my containerScrollView.contentSize to change based on the height of the subviews in contentView so that it can scroll down. The problem is that I am not sure how to do that with constraints. Any help is appreciated

Thanks.

 var containerScrollView: UIScrollView = {
     let scrollView = UIScrollView()
     scrollView.backgroundColor = .green
     return scrollView
 }()

 var contentView: UIView = {
    let view = UIView()
    return view
 }()

 let galleryView: GalleryView = {
     let view = GalleryView()
     view.backgroundColor = .clear
     view.scrollRate = 4.5
     view.layer.cornerRadius = 4
     view.layer.masksToBounds = true
     return view
  }()

 override func viewDidLoad() {
     super.viewDidLoad()

     view.addSubview(containerScrollView)
     containerScrollView.anchor(top: view.safeAreaLayoutGuide.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, leftConstant: 10, rightConstant: 10)

    containerScrollView.layoutIfNeeded()
    containerScrollView.addSubview(contentView)

    contentView.frame.origin = CGPoint.zero
    contentView.frame.size = containerScrollView.frame.size        

    // ADDING SUBVIEWS TO CONTENTVIEW

    contentView.addSubview(galleryView)
    galleryView.anchor(top: headerView.bottomAnchor, left: containerScrollView.leftAnchor, right: containerScrollView.rightAnchor, topConstant: 18, heightConstant: view.frame.width / 1.5)
 }

Answer 1

See here a full example

class ViewController: UIViewController {


    var containerScrollView: UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints  = false
        scrollView.backgroundColor = .green
        return scrollView
    }()

    var contentView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints  = false
        view.backgroundColor = UIColor.red
        return view
    }()

    let galleryView1: UIView  = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints  = false
        view.layer.cornerRadius = 4
        view.layer.masksToBounds = true
        view.backgroundColor = UIColor.orange

        return view
    }()


    let galleryView2: UIView  = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints  = false
        view.layer.cornerRadius = 4
        view.layer.masksToBounds = true
        view.backgroundColor = UIColor.yellow

        return view
    }()

    let galleryView3: UIView  = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints  = false
        view.layer.cornerRadius = 4
        view.layer.masksToBounds = true
        view.backgroundColor = UIColor.blue

        return view
    }()



    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(containerScrollView)
        containerScrollView.addSubview(contentView)
        contentView.addSubview(galleryView1)
        contentView.addSubview(galleryView2)
        contentView.addSubview(galleryView3)

        // add scrollView constraints

        containerScrollView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true

        containerScrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 0)
        .isActive = true
        containerScrollView.trailingAnchor.constraint(equalTo:self.view.trailingAnchor, constant: 0).isActive = true

        containerScrollView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor, constant: 0).isActive = true


        // add contentView constraints


        contentView.topAnchor.constraint(equalTo: self.containerScrollView.topAnchor, constant: 0).isActive = true

        contentView.leadingAnchor.constraint(equalTo: self.containerScrollView.leadingAnchor, constant: 0).isActive = true

        contentView.trailingAnchor.constraint(equalTo:self.containerScrollView.trailingAnchor, constant: 0).isActive = true

        contentView.bottomAnchor.constraint(equalTo: self.containerScrollView.bottomAnchor, constant: 0).isActive = true


        contentView.widthAnchor.constraint(equalTo:self.view.widthAnchor, constant: 0).isActive = true


        // add galleryView1 constraints


        galleryView1.topAnchor.constraint(equalTo: self.contentView.topAnchor, constant: 0).isActive = true

        galleryView1.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 0).isActive = true

        galleryView1.trailingAnchor.constraint(equalTo:self.contentView.trailingAnchor, constant: 0).isActive = true


        galleryView1.heightAnchor.constraint(equalToConstant: 300).isActive = true


        // add galleryView2 constraints


        galleryView2.topAnchor.constraint(equalTo: self.galleryView1.bottomAnchor, constant: 30).isActive = true

        galleryView2.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 0).isActive = true

        galleryView2.trailingAnchor.constraint(equalTo:self.contentView.trailingAnchor, constant: 0).isActive = true

        galleryView2.heightAnchor.constraint(equalToConstant: 500).isActive = true

      // add galleryView3 constraints


        galleryView3.topAnchor.constraint(equalTo: self.galleryView2.bottomAnchor, constant: 30).isActive = true

        galleryView3.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 0).isActive = true

        galleryView3.trailingAnchor.constraint(equalTo:self.contentView.trailingAnchor, constant: 0).isActive = true

        galleryView3.heightAnchor.constraint(equalToConstant: 500).isActive = true

        galleryView3.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor, constant: -30).isActive = true


    }

}