How do I add a UIView to a UIScrollView In Swift programmatically?

Question

I am trying to add a view to a UIScrollView just using code, but the view doesn't appear in the UIScrollView and I'm not sure why. When I added a button or label, they show up.

import UIKit

class profileViewController: UIViewController, UIScrollViewDelegate {

    var label : UILabel = {
        let label = UILabel()
        label.text = "Profile"
        label.textColor = UIColor.init(white: 0.80, alpha: 1)
        label.font = UIFont.systemFont(ofSize: 40)
        label.translatesAutoresizingMaskIntoConstraints = false

        return label
    }()
    var scrollview : UIScrollView = {
        let scrollview = UIScrollView()
        scrollview.translatesAutoresizingMaskIntoConstraints = false
        scrollview.backgroundColor = .clear

        return scrollview
    }()
    var greyview : UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints =  false
        view.backgroundColor = UIColor.init(white: 0.70, alpha: 1)
        view.backgroundColor = UIColor.gray

        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white
        view.addSubview(label)

        label.centerYAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerYAnchor).isActive = true
        label.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor).isActive = true

        scrollview.delegate = self

        view.addSubview(scrollview)
        scrollview.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
        scrollview.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        scrollview.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        scrollview.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        scrollview.contentSize = CGSize.init(width: view.frame.size.width, height: view.frame.size.height + 500)


        scrollview.addSubview(greyview)
        greyview.topAnchor.constraint(equalTo: scrollview.topAnchor).isActive = true
        greyview.trailingAnchor.constraint(equalTo: scrollview.trailingAnchor).isActive = true
        greyview.leadingAnchor.constraint(equalTo: scrollview.leadingAnchor).isActive = true
        greyview.heightAnchor.constraint(equalToConstant: 100).isActive = true
    }

}

Answer 1

This is probably because your greyview doesnt have its bottomAnchor . It needs the top and bottom anchors in order to work properly inside the scrollView:

scrollview.addSubview(greyview)
    greyview.topAnchor.constraint(equalTo: scrollview.topAnchor).isActive = true
    greyview.centerXAnchor.constraint(equalTo: scrollview.centerXAnchor).isActive = true
    greyview.heightAnchor.constraint(equalToConstant: 100).isActive = true
    greyview.widthAnchor.constraint(equalToConstant: 100).isActive = true

Add a widthAnchor, here I centered it in the scroll view but it is up to you to place it how you want it. Also if you add more items just make sure the bottom-most item has a bottomAnchor attached to the scrollView bottomAnchor or it will not scroll.

Update:

I don't know how you want your greyview to look, but if you make the height taller than the contentSize of the scrollView it will scroll, and make sure you have the bottomAnchor :

 scrollview.contentSize = CGSize.init(width: view.frame.size.width, height: view.frame.size.height)

    scrollview.addSubview(greyview)
    greyview.topAnchor.constraint(equalTo: scrollview.topAnchor).isActive = true
    greyview.bottomAnchor.constraint(equalTo: scrollview.bottomAnchor).isActive = true
    greyview.heightAnchor.constraint(equalTo: scrollview.heightAnchor, constant: 500).isActive = true
    greyview.widthAnchor.constraint(equalTo: scrollview.widthAnchor).isActive = true

This makes the greyview width equal to scrollview width, and height equal to scrollview height + 500 so that it scrolls.

Answer 2

this is one way:

 self.scrollView = UIScrollView.init()

    if let scrollView = self.scrollView {
        scrollView.showsVerticalScrollIndicator = true
        self.view.add(scrollView)

        scrollView.translatesAutoresizingMaskIntoConstraints = false
        self.addConstraint(UtilConstraint.addTopConstraint(from: scrollView, to: self, value: 0))
        self.addConstraint(UtilConstraint.addBottomConstraint(from: scrollView, to: self, value: 0))
        self.addConstraint(UtilConstraint.addLeftLeftConstraint(from: scrollView, to: self, value: 0))
        self.addConstraint(UtilConstraint.addRightRightConstraint(from: scrollView, to: self, value: 0))

        NSLayoutConstraint.activate(self.constraints)

        greyview.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(greyview)

        greyview.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        greyview.leftAnchor.constraint(equalTo: scrollView.leftAnchor).isActive = true
        greyview.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
        greyview.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
    }

Remember, your greyview should have hight defined either statically or via. components inside.

though , what you were missing was defining a width. I have done it using widthAnchor. (assuming you need a vertical scroll)