Trying to show UIScrollView programmatically with Swift and not showing at all

Question

Currently I'm building a preview view programmatically due to some needed dynamic variations on UI. I already built the UI elements referenced in the code below. However, as I'm showing in the code, I've tried many things and I can't make appear the UIScrollView and of course, not even the view I'm putting inside it. I put color red to the UIScrollView to detect it and color orange to the UIView when it appears:

// SPEC DETAILS SECTION
    nameLabel = UILabel();
    previewButton = UIButton();
    let aboutLabelCaption = UILabel();
    aboutLabel = UILabel();
    specsScrollView = UIScrollView();
    let specsView = UIView(frame: CGRectMake(0, 0, 400, 400));

    // ... Another code to setup the previews views ...

    view.addSubview(specsScrollView);

    var specsScrollViewConstY = NSLayoutConstraint(item: specsScrollView,
        attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal,
        toItem: coverImage, attribute: NSLayoutAttribute.Bottom, multiplier: 1,
        constant: 10);
    var specsScrollViewConstX = NSLayoutConstraint(item: specsScrollView,
        attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal,
        toItem: aboutLabel, attribute: NSLayoutAttribute.Trailing, multiplier: 1,
        constant: 10);
    var specsScrollViewConstWidth = NSLayoutConstraint(item: specsScrollView,
        attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.LessThanOrEqual,
        toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1,
        constant: 400);
    var specsScrollViewConstHeight = NSLayoutConstraint(item: specsScrollView,
            attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.LessThanOrEqual,
            toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1,
            constant: 400);

    view.addConstraint(specsScrollViewConstY);
    view.addConstraint(specsScrollViewConstX);
    view.addConstraint(specsScrollViewConstWidth);
    view.addConstraint(specsScrollViewConstHeight);

    let topLevelArray: NSArray = NSBundle.mainBundle().loadNibNamed("PreviewDetails", owner: self, options: nil);
    let viewFromXib = topLevelArray.objectAtIndex(0) as UIView;

    specsScrollView.backgroundColor = UIColor.redColor();
    specsView.backgroundColor = UIColor.orangeColor();
    specsScrollView.addSubview(specsView);
    //specsScrollView.addSubview(viewFromXib);

    specsScrollView.setTranslatesAutoresizingMaskIntoConstraints(false);
    //specsView.setTranslatesAutoresizingMaskIntoConstraints(false);
    specsScrollView.contentSize = CGSizeMake(400, 400);

    var specsViewConstTop = NSLayoutConstraint(item: specsView,
        attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal,
        toItem: specsScrollView, attribute: NSLayoutAttribute.Top, multiplier: 1,
        constant: 0);
    var specsViewConstLeading = NSLayoutConstraint(item: specsView,
        attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal,
        toItem: specsScrollView, attribute: NSLayoutAttribute.Leading, multiplier: 1,
        constant: 0);
    var specsViewConstTrailing = NSLayoutConstraint(item: specsView,
        attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal,
        toItem: specsScrollView, attribute: NSLayoutAttribute.Trailing, multiplier: 1,
        constant: 0);
    var specsViewConstBottom = NSLayoutConstraint(item: specsView,
        attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal,
        toItem: specsScrollView, attribute: NSLayoutAttribute.Bottom, multiplier: 1,
        constant: 0);
    var specsViewConstHeight = NSLayoutConstraint(item: specsView,
        attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal,
        toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1,
        constant: 400);
    var specsViewConstWidth = NSLayoutConstraint(item: specsView,
        attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal,
        toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1,
        constant: 400);

    specsScrollView.addConstraint(specsViewConstTop);
    specsScrollView.addConstraint(specsViewConstLeading);
    specsScrollView.addConstraint(specsViewConstTrailing);
    specsScrollView.addConstraint(specsViewConstBottom);
    specsScrollView.addConstraint(specsViewConstHeight);
    specsScrollView.addConstraint(specsViewConstWidth);

    let aLabel = UILabel();
    aLabel.text = "Hola mundo";
    specsView.addSubview(aLabel);
    // -- SPEC DETAILS SECTION

I'm not sure what am I doing badly. I expect you can help me. I want to make clear that it's not throwing any exception or error. It's just that the views I'm building programmatically are not appearing.

Answer 1

It would be helpful if you could post some information about the desired result (Maybe a screenshot).

Anyway, I can already see that there are some things missing in your implementation.

First of all, you need to call setTranslatesAutoresizingMaskIntoConstraints(false) on all the views you are creating programmatically, not just on the scrollView.

Secondly, when you are adding the horizontal constraints for the scrollView, you are connecting it to the aboutLabel , for which you don't add any constraints. This is the constraints I'm referring to:

var specsScrollViewConstX = NSLayoutConstraint(item: specsScrollView,
        attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal,
        toItem: aboutLabel, attribute: NSLayoutAttribute.Trailing, multiplier: 1,
        constant: 10);

For debugging, you could call view.layoutIfNeeded() after you added the constraints, add a breakpoint after the call and then print out the frames for all the views so you can see which one is wrong.

Let me know how it goes or if you need more help.

---

Update

Ok, I have found the problem after running your code. It seems the way you are adding the width and height constraints is wrong for all the views.

I have tried this (I will just post the code for the scrollView, but you'll need to change for all your views):

// SPEC DETAILS SECTION
    view.addSubview(specsScrollView);

    var specsScrollViewConstY = NSLayoutConstraint(item: specsScrollView,
        attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal,
        toItem: coverImage, attribute: NSLayoutAttribute.Bottom, multiplier: 1,
        constant: 10);
    var specsScrollViewConstX = NSLayoutConstraint(item: specsScrollView,
        attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal,
        toItem: aboutLabel, attribute: NSLayoutAttribute.Trailing, multiplier: 1,
        constant: 10);
    var specsScrollViewConstWidth = NSLayoutConstraint.constraintsWithVisualFormat("H:[scrollview(400)]", options: nil, metrics: nil, views: ["scrollview":specsScrollView]);
    var specsScrollViewConstHeight = NSLayoutConstraint.constraintsWithVisualFormat("V:[scrollview(400)]", options: nil, metrics: nil, views: ["scrollview":specsScrollView]);

    view.addConstraint(specsScrollViewConstY);
    view.addConstraint(specsScrollViewConstX);
    view.addConstraints(specsScrollViewConstWidth);
    view.addConstraints(specsScrollViewConstHeight);

This will make the scrollView show up. Once you will make these changes all your views will have the right frames, but I am not really sure that's the result you want but you can change the values to fit.

After you change all the constraints, you could delete all the statements where you set the frame for the views, it won't be necessary anymore.

Also, add an view.layoutIfNeeded() after you set all constraints, so you see the changes.

One more thing, because you're constraints were crashing when I ran the code, you need to add this for the button previewButton.setTranslatesAutoresizingMaskIntoConstraints(false)