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
    }

}

https://stackoverflow.com/a/48219419/9086770 – trndjc Mar 15 '19 at 01:59 — trndjc, Mar 15 '19 at 01:59

Peter Ruppert · Answer 1 · 2019-03-14T23:59:38.467

0

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.

edited Mar 14 '19 at 23:59

answered Mar 14 '19 at 23:21

Peter Ruppert

1,067
9
24

i don't add the bottom anchor because i have a height anchor – OualidHamidi Mar 14 '19 at 23:23
try it, it still needs the bottom anchor – Peter Ruppert Mar 14 '19 at 23:24
because it is a scrollView it needs to have a bottom anchor otherwise it wont scroll or the content wont display properly – Peter Ruppert Mar 14 '19 at 23:24
you tried with the top anchor and the bottom together right? – Peter Ruppert Mar 14 '19 at 23:30
yeah i use them all but nothing change – OualidHamidi Mar 14 '19 at 23:31
@OualidHamidi it will appear if you give it a `widthAnchor` – Peter Ruppert Mar 14 '19 at 23:38
yeah it appear but when you try to scroll down the scroll doesn't work. – OualidHamidi Mar 14 '19 at 23:48
@OualidHamidi that is because it needs to be attached to the bottom anchor of the scrollView, and also the height would need to be taller than the scrollView. – Peter Ruppert Mar 14 '19 at 23:49
as the Scrollview wont scroll if the content inside is smaller than its contentSize, as it does not need to – Peter Ruppert Mar 14 '19 at 23:49
@OualidHamidi remove the `+ 500` on your `scrollview.contentSize` and make the height of the gray view `1000` and you will see it will scroll because its height is taller than the contentSize of the scrollVIew – Peter Ruppert Mar 14 '19 at 23:53
thank you bro for your support. i find the probleme of why doesn't scroll the issue is when i added the widthAnchor. should i delete trailingAnchor and LeadingAnchor . – OualidHamidi Mar 14 '19 at 23:57
yes delete trailing and leading anchor and replace with widthAnchor – Peter Ruppert Mar 14 '19 at 23:57
I did one more update, do it like I did in the update of my answer at the bottom, I think that is how you want it. – Peter Ruppert Mar 15 '19 at 00:00

AppleCiderGuy · Answer 2 · 2019-03-14T23:40:44.820

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)

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

2 Answers2