Page control with image array

Question

I am trying to make a page control associated with an image array. I had it setup correctly just changing the background color and load in the initial image, but when I scroll nothing further is shown. Here is my code:

var images: [UIImage] = [
    UIImage(named: "slide1.png")!,
    UIImage(named: "loginButton.png")!,
    UIImage(named: "slide1.png")!,
    UIImage(named: "slide1.png")!
]

func setPageViewinScroll() {

    for index in 0..<4 {

        frame.origin.x = self.scrollView.frame.size.width * CGFloat(index)
        frame.size = self.scrollView.frame.size
        self.scrollView.pagingEnabled = true
        self.imageView.image = images[index]
        let subview = UIView(frame: frame)
        self.scrollView.addSubview(subview)
    }

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

    pageControl.addTarget(self, action: Selector("changePage:"), forControlEvents: UIControlEvents.ValueChanged)



}

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

Does anyone know where I am going wrong here?

Answer 1

How about adding your UIImageview to UIScrollview instead of UIView like this code?

var imageOne:UIImageView!
var imageTwo:UIImageView!
var imageThree:UIImageView!
var imageFour:UIImageView!

func functionCalledFromViewDidLoad() {

    scrollView.frame = CGRectMake(0, 0, self.view.frame.width,self.view.frame.height)

    let scrollViewWidth = scrollView.frame.width
    let scrollViewHeight = scrollView.frame.height

    imageOne = UIImageView(frame: CGRectMake(0, 0,scrollViewWidth, scrollViewHeight))
    imageTwo = UIImageView(frame: CGRectMake(scrollViewWidth*1, 0,scrollViewWidth, scrollViewHeight))
    imageThree = UIImageView(frame: CGRectMake(scrollViewWidth*2, 0,scrollViewWidth, scrollViewHeight))
    imageFour = UIImageView(frame: CGRectMake(scrollViewWidth*3, 0,scrollViewWidth, scrollViewHeight))

    scrollView.addSubview(imageOne)
    scrollView.addSubview(imageTwo)
    scrollView.addSubview(imageThree)
    scrollView.addSubview(imageFour)

}

override func viewDidLayoutSubviews() {


    scrollView.contentSize = CGSizeMake(scrollView.frame.width * 4, scrollView.frame.height)
    imageOne.frame.size.height = scrollView.frame.height
    imageTwo.frame.size.height = scrollView.frame.height
    imageThree.frame.size.height = scrollView.frame.height
    imageFour.frame.size.height = scrollView.frame.height
}

You also seem to need to add this code.

 func scrollViewDidEndDecelerating(scrollView: UIScrollView) {

    // Test the offset and calculate the current page after scrolling ends
    let pageWidth:CGFloat = CGRectGetWidth(scrollView.frame)

    let currentPage = Int(floor((scrollView.contentOffset.x-pageWidth/2)/pageWidth)+1)

     // Change the page indicator
     self.pageControl.currentPage = Int(currentPage)
 }

There is a very good tutorial related to this topic, here

Answer 2

You are setting the image on the imageView and not on the subView. Iow You are adding the subview to each page, but not setting the image on it.

Change the subview code to the following

let subview = UIImageView(frame: frame)
subview.image = images[index]
self.scrollView.addSubview(subview)