trouble creating a scrollable UIView (swift + Interface Builder)

Question

Please do not immediately discredit this a duplicate, I have been on stackoverflow for like 2 days now trying any and every way to do this, read a lot of blog articles (which might have been slightly dated) and still no luck.

Basically, I have a custom UIView which is meant to draw a lot of circles (it's just the starting point) and I cannot get the view to scroll down to the ones apart from the visible circles on initial load. I made the for loop for about 200 of them to be sure there is something to scroll to.

here is my view code:

import UIKit

class Draw2D: UIView {

     required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder);

    }

    override func drawRect(rect: CGRect) {

        let context = UIGraphicsGetCurrentContext();

        CGContextSetLineWidth(context, 2.0);

        let colorSpace = CGColorSpaceCreateDeviceRGB();
        let components: [CGFloat] = [0.0, 0.0, 1.0, 1.0];
        let color = CGColorCreate(colorSpace, components);

        CGContextSetStrokeColorWithColor(context, color);

        var ctr = 0;
        var ctr2 = 0;
        for(var i:Int = 1; i<200; i++){

            var ii: CGFloat=CGFloat(10+ctr);
            var iii: CGFloat = CGFloat(30+ctr2);
       CGContextStrokeEllipseInRect(context, CGRectMake(ii, iii, 33, 33));

            if(ctr<200)
            {
            ctr+=160;
            }else{
                ctr=0;
                ctr2+=50;
            }
        }

        CGContextStrokePath(context);

    }
}

In interface builder, I set the view class to Draw2D and the controller to my custom ViewController class. The view controller class is currently a standard one with no additional options added.

I tried dragging a Scroll View on the screen, I tried deleting the standard view, adding the scroll view and then putting my Draw2D view on top of that and it didn't work. I tried changing the size of the scroll view to make it smaller than my content (draw2d) view and nothing. I tried unchecking auto-layout and also changing simulated size to freeform as per certain tutorials I found online.

I also at one point tried creating a scroll view programmatically in the UIView and adding it as a subview which didn't help, maybe I did it wrong, I don't know but I'm really running out of options and sources to generate ideas from.

Answer 1

First, you can inherit from UIScrollView directly:

class Draw2D: UIScrollView {

Next, you need to set the content size of the UIScrollView to the height of the elements you inserted. For instance, let's say you have 4 circles:

let radius: CGFloat = 200
var contentHeight: CGFloat = 0

for i in 0...4 {
    // initialize circle here
    var circle = UIView()

    // customize the view
    circle.layer.cornerRadius = radius/2
    circle.backgroundColor = UIColor.redColor()

    // set the frame of the circle    
    circle.frame = CGRect(x: 0, y: CGFloat(i)*radius, width: radius, height: radius)

    // add to scroll view
    self.addSubview(circle)

    // keep track of the height of the content
    contentHeight += radius
}

At this point you have 4 circles one after the other, summing up to 800 px in height. Thus, you would set the content size of the scroll view as follows:

self.contentSize = CGSize(width: self.frame.width, height: contentHeight)

As far as contentHeight > device screen height then your view will scroll.

Full working code below:

import UIKit
import Foundation

class Draw2D: UIScrollView {

    override init(frame: CGRect) {
        super.init(frame: frame)

        let radius: CGFloat = 200
        var contentHeight: CGFloat = 0

        for i in 0...4 {
            // initialize circle here
            var circle = UIView()

            // customize the view
            circle.layer.cornerRadius = radius/2
            circle.backgroundColor = UIColor.redColor()

            // set the frame of the circle
            circle.frame = CGRect(x: 0, y: CGFloat(i)*radius, width: radius, height: radius)

            // add to scroll view
            self.addSubview(circle)

            // keep track of the height of the content
            contentHeight += radius
        }

        self.contentSize = CGSize(width: self.frame.width, height: contentHeight)
    }

    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}