CODEWITHSUNDEEP
iosswift
Andoni Da Silva
Andoni Da Silva

Reputation: 1341

Horizontal UIScrollView is not centering the current page

I would like to have a horizontal scroll layout which displays images. It works fine if setup 0, 0, 0 and 0 the constraints of the UIScrollView. The problem is exactly when I change the constraints to make margins surrounded the UIScrollView. This is what happens:

First image First image in the UIScrollView Second image Second image in the UIScrollView Third image Third image in the UIScrollView

As you can see, each time you scroll, more off-center the current page is.

I have tried to subtract trailing and leading constrains constants to the width of the scrollLayout, play with frames and bouds but without success.

If I run this example in a smaller display like iphone 5S, the problem is more pointed.

class ViewController: UIViewController, UIScrollViewDelegate {

    @IBOutlet weak var pageController: UIPageControl!
    @IBOutlet weak var scrollView: UIScrollView!
    let imagesArray = ["b_1", "b_2", "b_3", "b_4", "b_5"]
    override func viewDidLoad() {
        super.viewDidLoad()
        self.scrollView.isPagingEnabled = true
        self.pageController.numberOfPages = imagesArray.count
        self.pageController.pageIndicatorTintColor = UIColor.blue
        self.pageController.currentPageIndicatorTintColor = UIColor.gray
        for i in 0...imagesArray.count - 1{
            let imageView = UIImageView()
            imageView.contentMode = .scaleToFill
            imageView.image = UIImage(named: self.imagesArray[i])
            let xPos = CGFloat(i)*self.view.bounds.size.width
            imageView.frame = CGRect(x: xPos, y: 0, width: view.frame.size.width, height: self.scrollView.frame.size.height )
            self.scrollView.contentSize.width = view.frame.size.width*CGFloat(i+1)
            self.scrollView.addSubview(imageView)
        }
    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let page = scrollView.contentOffset.x/scrollView.frame.width
       self.pageController.currentPage = Int(page)
    }


}

So, I would like to know how to always obtain the current image centered.

Thank you

EDITED with Rajesh results and view debug:

REsult 1 REsult 2 REsult 3

Upvotes: 0

Views: 185

Answers (1)

ethoooo
ethoooo

Reputation: 555

I would recommend using a UICollectionView in place of a UIScrollView - otherwise you will be building a lot of the basics from scratch. You can use a collection view that centers the images, make sure paging is enabled and you should get the interface you're looking for. Make sure to adopt / conform to the UICollectionViewDelegate & UICollectionViewDelegateFlowLayout protocols with your view controller & set those delegates on your collection view. Hope that helps! Best of luck.

Upvotes: 1

Related Questions