Paging UIScrollView seems to place content off centre

Question

I have a UIScrollView that I want to have paging functionality (think an initial splash screen). I want that content (a UILabel and a UIImageView) to be placed centrally in each paging view on the scrollView. My problem is is that it is always slightly off centre ().

Here is the complete code:

  var splashScreenObjects = [SplashScreenObject]()

  var imageViewArray = [UIImageView]()
  var subtitleViewArray = [UILabel]()

  @IBOutlet var scrollView: UIScrollView!
  @IBOutlet var pageControl: UIPageControl!

  override func viewDidLoad() {
    super.viewDidLoad()
    createSplashScreenObjects()
    configurePageControl()
    configureScrollView()
  }

  func createSplashScreenObjects() {
    let firstScreen: SplashScreenObject = SplashScreenObject(subtitle: "Medication reminders on your phone. Never miss your next dose", image: UIImage(named: "splashScreen1")!)
    let secondScreen: SplashScreenObject = SplashScreenObject(subtitle: "Track how good you have been with your medication", image: UIImage(named: "splashScreen2")!)
    let thirdScreen: SplashScreenObject = SplashScreenObject(subtitle: "The better you are with your medication, the more points you'll earn!", image: UIImage(named: "splashScreen3")!)
    splashScreenObjects.append(firstScreen)
    splashScreenObjects.append(secondScreen)
    splashScreenObjects.append(thirdScreen)

  }

  func configureScrollView() {
    self.scrollView.layoutIfNeeded()

    self.scrollView.showsHorizontalScrollIndicator = false
    self.scrollView.showsVerticalScrollIndicator = false

    self.scrollView.pagingEnabled = true
    self.scrollView.delegate = self

    let width = view.frame.size.width

    for index in 0..<splashScreenObjects.count {
      let subtitle = UILabel(frame: CGRectMake((width * CGFloat(index)) + 25, self.scrollView.frame.size.height-75, width-50, 75))
      subtitle.text = splashScreenObjects[index].subtitle
      subtitle.textAlignment = NSTextAlignment.Center
      subtitle.textColor = UIColor.whiteColor()
      subtitle.font = UIFont(name:"Ubuntu", size: 16)
      subtitle.numberOfLines = 2
      subtitle.backgroundColor = UIColor.clearColor()
      self.scrollView.addSubview(subtitle)
      self.subtitleViewArray.append(subtitle)
      subtitle.alpha = 0

      let mainImage = UIImageView(frame: CGRectMake((width * CGFloat(index)), 50, width, self.scrollView.frame.size.height-150))
      mainImage.image = splashScreenObjects[index].image
      mainImage.contentMode = UIViewContentMode.ScaleAspectFit
      self.scrollView.addSubview(mainImage)
      self.imageViewArray.append(mainImage)
      mainImage.alpha = 0
    }

    self.scrollView.contentSize = CGSizeMake(width * CGFloat(splashScreenObjects.count), self.scrollView.frame.size.height-50)
    animateViews(Int(0))

  }

  func configurePageControl() {
    self.pageControl.numberOfPages = splashScreenObjects.count
    self.pageControl.currentPage = 0
    self.view.addSubview(pageControl)
    pageControl.addTarget(self, action: #selector(SplashViewController.changePage(_:)), forControlEvents: UIControlEvents.ValueChanged)
  }

  func changePage(sender: AnyObject) -> () {
    let x = CGFloat(pageControl.currentPage) * self.view.frame.size.width
    scrollView.setContentOffset(CGPointMake(x, 0), animated: true)
  }

  func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    let pageNumber = round(scrollView.contentOffset.x / self.view.frame.size.width)
    pageControl.currentPage = Int(pageNumber)
    animateViews(Int(pageNumber))
  }

  func animateViews(pageNumber: Int) {
    UIView.animateWithDuration(0.5, animations: {
      self.imageViewArray[pageNumber].alpha = 1.0
      self.subtitleViewArray[pageNumber].alpha = 1.0
    })
  }

Here are my auto layout constraints for the UIScrollView:

Answer 1

Your leading and trailing spaces are both -20, which means that the scroll view is 40 points wider than its superview. Change these to 0.

Answer 2

You should replace

self.scrollView.layoutIfNeeded()

to

self.view.layoutIfNeeded()

because layoutIfNeeded layout caller subviews, not itself. So, scrollView, when you add subtitle and mainImage on it, has wrong frame.