Scrollview ContentSize

Question

I am trying to make a scrollview with 3 pictures on a sign up/join page for a small app I trying to make. I was using this code below:

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {

    var signInButton: UIButton!
    var joinButton: UIButton!
    var pageControl: UIPageControl!
    @IBOutlet weak var scrollView: UIScrollView!
    var colors:[UIColor] = [UIColor.redColor(), UIColor.blueColor(), UIColor.greenColor(), UIColor.yellowColor()]
    var frame = CGRectMake(0, 0, 0, 0)

    override func viewDidLoad() {
        super.viewDidLoad()

        signInButton = UIButton(frame: CGRectMake(1/3.0 * self.view.bounds.size.width, 5/6.0 * self.view.bounds.size.height, 23, 60))

        joinButton = UIButton(frame: CGRectMake(2/3.0 * self.view.bounds.size.width, 5/6.0 * self.view.bounds.size.height, 23, 60))

        pageControl = UIPageControl(frame: CGRectMake(1/2.0 * self.view.bounds.size.width, 70/100.0 * self.view.bounds.size.height, 23, 60))

        self.view.addSubview(signInButton)
        self.view.addSubview(joinButton)
        self.view.addSubview(pageControl)

        signInButton.addTarget(self, action: "signInButtonClicked:", forControlEvents: .TouchUpInside)
        joinButton.addTarget(self, action: "joinButtonClicked:", forControlEvents: .TouchUpInside)
        pageControl.addTarget(self, action: Selector("changePage:"), forControlEvents: UIControlEvents.ValueChanged)

        configurePageControl()
        scrollView.delegate = self

        for index in 0...3 {
            frame.size = scrollView.frame.size
            frame.origin.x = scrollView.frame.size.width * CGFloat(index)
            scrollView.pagingEnabled = true

            let view: UIView = UIView(frame: frame)
            view.backgroundColor = colors[index]
            scrollView.addSubview(view)
        }

        self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * 4, self.scrollView.frame.size.height)
    }

    func configurePageControl() {
        self.pageControl.numberOfPages = colors.count
        self.pageControl.currentPage = 0
        self.pageControl.tintColor = UIColor.redColor()
        self.pageControl.pageIndicatorTintColor = UIColor.blackColor()
        self.pageControl.currentPageIndicatorTintColor = UIColor.greenColor()
    }

I put a scrollview on my view controller (using the size class width: Any and height: Any ) and pinned all four sides of the scrollview to the view controller. For some reason each of the views I add to the scrollview are not exactly the same width as the iPhone.

For example when, I tried running it on an iPhone 6 the first view extends past the width of the iPhone. And that happens to the second and third view. I want the first view to be the exact width of the iPhone and the second view to be exactly to the right of the first view and so on. There seems to be some overlapping with the first view going past the width of the iPhone.

Could this be because I am using the size class (width: any and height: any) and I should disable size classes and add a scrollview for each iPhone width?

Can someone help me identify the problem here.

Answer 1

Add:

scrollView.setNeedsLayout()
scrollView.layoutIfNeeded()

at the beginning of the viewDidLoad() method.

Always call these two methods before accessing a view's frame when using Auto Layout, otherwise you'll probably get an incorrect size.

The problem is that when viewDidLoad() is called, your view still has a width of 600 (due to your storyboard view controller size of 600x600 ). Your constraints dictate that the scroll view should be the same width as the device, but these constraints are only applied after viewDidLoad() finishes, when Auto Layout's next scheduled pass is calculated. Adding the code above forces Auto Layout to perform a pass, thus giving you the correct frame sizes for subsequent use in your size calculations.

Answer 2

Put your scroll view in , set your constraint. Then grab a UIView, put it IN the scroll view, set it as equal width, equal height, and center it (use CTRL + drag to the scroll view, you'll get a small pop up menu)

Then put your content in the UIView you just created... Bam ! also I personally rename my UIView to ContentView, just for sake

Here's a screen to help :

Now I myself am still having issue with the height, I usually simply use a fixed height for the content view because if I don't it doesn't scroll....