Search code examples
iosswiftuiscrollviewuipagecontrol

UIPageControl and UIScrollView not scrolling


I'm having a relatively simple UIViewController with a UIScrollView that's taking relatively half the screen and a UIImageView placed inside the UIScrollView that's the exact same size as the UIScrollView.

On top of the UIImageView there's a UIPageControl. The point is have a horizontal scrolling and present an image like a slider based on the amount of images in an array. The problem is that the scroll view is not scrolling and I don't know why.

 @IBOutlet weak var scrollView: UIScrollView!
@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var pageControl: UIPageControl!

let imagelist = ["3.jpg", "1.jpg", "2.png", "4.png", "5.png"]

override func viewDidLoad() {
    super.viewDidLoad()
    scrollView.delegate = self
    configurePageControl()

    for  i in stride(from: 0, to: imagelist.count, by: 1) {
        var frame = CGRect.zero
        frame.origin.x = self.scrollView.frame.size.width * CGFloat(i)
        frame.origin.y = 0
        frame.size = self.scrollView.frame.size
        scrollView.isPagingEnabled = true
        scrollView.isScrollEnabled = true

        let myImage:UIImage = UIImage(named: imagelist[i])!
        let bgColorFromImage = myImage.averageColor
        imageView.image = myImage
        imageView.contentMode = UIViewContentMode.scaleAspectFit
        imageView.frame = frame


        scrollView.backgroundColor = bgColorFromImage
        scrollView.addSubview(imageView)
    }

    self.scrollView.contentSize = CGSize(width: self.scrollView.frame.size.width * CGFloat(imagelist.count), height: self.scrollView.frame.size.height)
    pageControl.addTarget(self, action: #selector(changePage), for: UIControlEvents.valueChanged)

}

func configurePageControl() {
    self.pageControl.numberOfPages = imagelist.count
    self.pageControl.currentPage = 0
    self.pageControl.tintColor = UIColor.red
    self.pageControl.pageIndicatorTintColor = UIColor.black
    self.pageControl.currentPageIndicatorTintColor = UIColor.green
    self.imageView.addSubview(pageControl)
}

@objc func changePage() {
    let x = CGFloat(pageControl.currentPage) * scrollView.frame.size.width
    scrollView.setContentOffset(CGPoint(x: x,y :0), animated: true)
}

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

This is what the UIStoryboard looks like:

enter image description here


Solution

  • Inside the for loop you use the same object of imageView , you only set the frame and the image

    imageView.frame = frame
    imageView.image = myImage
    

    but you have to create a new instance of the UIImageView

    //

    Suppose you have a scrollView in IB with top , leading and trailing constraints to the superView , and a height of say 200 , you can add imageViews dynamically like this

    class ViewController: UIViewController {
    
        @IBOutlet weak var scrollView: UIScrollView!
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
    
            for i in 0..<10 {
    
                let f = CGRect(x: CGFloat(i) * scrollView.frame.width, y: 0, width: scrollView.frame.width, height: scrollView.frame.height)
    
                let imgV = UIImageView(frame: f)
    
                imgV.image = UIImage(named: "re-fuel.png")
    
                scrollView.addSubview(imgV)
    
    
            }
    
            scrollView.contentSize = CGSize(width: CGFloat(10) * scrollView.frame.width, height: scrollView.frame.height)
        }
    }
    

    Result

    enter image description here