What's the best way of handling a UIPageControl that has so many dots they don't all fit on the screen

Question

I have a UIPageControl in my application that looks perfectly fine with around 10 pages (dots), it\'s possible however for the user to add many different views, and so the numbe

Answer 1

Calculate the pages/dot ratio and store as float value. Then calculate current dot number as current page/pagesPerDot. You may need to advance a few pages before seeing the dot move, but it's very scalable and works well.

Answer 2

I set the maximum number of pages to 20 (the most that will fit on the iPhone 5S/SE in Portrait Mode).. and if I am on a page over 20, I keep the dot in the same place, but make the dot red. I think people realise what it means, I often have a numeric page number on screen too, and First and Last buttons too, and I feel people are more interested in seeing the dot move on the initial pages.

Answer 3

My solution is setting the maximum number of dots and showing the dot before the last one until the user reaches the end. If the current page number is bigger than maximum dot count we show the one before the last one until the user reaches the end.

var maxDotCount = 8   //Global constant.

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let pageWidth = collectionView.frame.size.width
        let currentPage = collectionView.contentOffset.x / pageWidth
        let pageControlsNumberOfPages = pageControl.numberOfPages - 1
        let dataSourceCount = CGFloat(dataSourceArr.count - 1)
        let maxDotCountReduced = CGFloat(maxDotCount - 1)

        if (dataSourceCount > maxDotCountReduced) {
            if (currentPage >= maxDotCountReduced) {
                if (currentPage == dataSourceCount) {
                    pageControl.currentPage = pageControlsNumberOfPages
                } else {
                    pageControl.currentPage = pageControlsNumberOfPages - 1
                }
                return
            }
        }
        pageControl.currentPage = Int(currentPage)
    }

Answer 4

I created an eBook application that used UIScrollView that contained a UIWebView. The book had over 100 pages so UIPageControl could not handle it because of the problem you pointed out. I ended up creating a custom "slider" type view that acted similar to UIPageControl but could handle the large number of pages. That's pretty much what you will need to do. UIPage control cannot handle as many pages as you want...

Answer 5

I had to implement UIPageControl under my horizontal collection view which had 30 items. So what i did to reduce the number of dots by fixing the number of dots and scroll in those dots only. Follow the code:

@IBOutlet var pageControl: UIPageControl!
var collectionDataList = [String]
let dotsCount = 5

override func viewDidAppear(_ animated: Bool) {
    if collectionDataList.count < dotsCount {
        self.pageControl.numberOfPages = collectionDataList.count
    } else {
        self.pageControl.numberOfPages = dotsCount
    } 
}

func scrollViewDidScroll(_ scrollView: UIScrollView)
{
   let pageWidth = scrollView.frame.width
   self.currentPage = Int((scrollView.contentOffset.x + pageWidth / 2) / pageWidth)
   self.pageControl.currentPage = self.currentPage % dotsCount

}