scrollView images not centered - ios

Question

i'm trying to create a scrollView with a UIPageControl. This works fine, but the problem is the images wont center in each page of the scrollView. it is aligned to the right. How can i center the images always?
image illustration:
http://i.stack.imgur.com/In6t7.png
code:
viewDidLoad
self.pageControl = UIPageControl()
self.pageControl?.frame = CGRectZero
self.pageControl?.currentPage = 0
self.pageControl?.numberOfPages = self.imageArray!.count
self.pageControl?.tintColor = UIColor.whiteColor()
self.pageControl?.userInteractionEnabled = false
self.navigationItem.titleView = self.pageControl?
for var i = 0; i<self.imageArray?.count; i++ {
self.pageViews.append(nil)
}
let pagesScrollViewSize = self.scrollView.frame.size
self.scrollView.contentSize = CGSizeMake(pagesScrollViewSize.width * CGFloat(self.imageArray!.count), pagesScrollViewSize.height)
self.loadVisiblePages()
rest of the methods
func loadPage(page: Int) {
if page < 0 || page >= self.imageArray!.count {
// If it's outside the range of what you have to display, then do nothing
return
}
// 1
if let pageView = pageViews[page] {
// Do nothing. The view is already loaded.
} else {
// 2
let newPageView = UIImageView(image: self.imageArray![page] as UIImage)
var frame = scrollView.bounds
frame.origin.x = (frame.size.width * CGFloat(page))
frame.origin.y = 0.0
// 3
newPageView.contentMode = .ScaleAspectFit
newPageView.frame = frame
scrollView.addSubview(newPageView)
newPageView.backgroundColor = UIColor.blackColor()
// 4
pageViews[page] = newPageView
}
}
func purgePage(page: Int) {
if page < 0 || page >= self.imageArray!.count {
// If it's outside the range of what you have to display, then do nothing
return
}
// Remove a page from the scroll view and reset the container array
if let pageView = pageViews[page] {
pageView.removeFromSuperview()
pageViews[page] = nil
}
}
func loadVisiblePages() {
// First, determine which page is currently visible
let pageWidth = scrollView.frame.size.width
let page = Int(floor((scrollView.contentOffset.x * 2.0 + pageWidth) / (pageWidth * 2.0)))
// Update the page control
pageControl?.currentPage = page
// Work out which pages you want to load
let firstPage = page - 1
let lastPage = page + 1
// Purge anything before the first page
for var index = 0; index < firstPage; ++index {
purgePage(index)
}
// Load pages in our range
for var index = firstPage; index <= lastPage; ++index {
loadPage(index)
}
// Purge anything after the last page
for var index = lastPage+1; index < self.imageArray!.count; ++index {
purgePage(index)
}
}
func scrollViewDidScroll(scrollView: UIScrollView!) {
// Load the pages that are now on screen
loadVisiblePages()
}

Answer 1

I found here you use let to declare a constant UIImageView, I think you should use var.
let newPageView = UIImageView(image: self.imageArray![page] as UIImage)
Actually, I can find any problem besides this, I think the reason you can't set your image to the center because that all the operation after this declaration didn't work, so you can't set the right frame, the right contentMode to the UIImageView.

Answer 2

Perhaps it would be easier if you use the center.x instead of origin.x when positioning your scrollView's image views.
The formula I would use in this case:
centerX = pageNumber * 320 + 160
So something like:
myImageView.center = CGPointMake(pageNumber * 320 + 160, 0);
Running through my formula, I get these result:
page 0: 0 * 320 + 160 = 160
page 1: 1 * 320 + 160 = 480
page 2: 2 * 320 + 160 = 800
page 3: 3 * 320 + 160 = 1120
You can see each page has an offset of 320 (assuming iPhone screen dimension here). You would obviously use this instead:
self.view.bounds.size.width
The 320 here is for illustration purpose.
Your Method
OK, so lets run through your code:
var frame = scrollView.bounds
frame.origin.x = (frame.size.width * CGFloat(page))
frame.origin.y = 0.0
First time, origin.x would be 0 if page starts from 0, scrollView's width remains 320.
Second time, origin.x would be 320 * 1 (page == 1 here), scrollView's width will become 640 since you have 2 imageViews that are 320 wide I assume.
Third time, origin.x would be 640 * 2 = 1280, scrollView's width is now 1600 (origin.x = 1280 + 320 imageView width)
You see how the numbers keeps getting a lot bigger instead of a constant 320?