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

Question

I have a UIPageControl in my application that looks great with about 10 pages (dots), however many different kinds can be added to the user, so the number of dots can be 30.

When this happens, the dots simply disappear from the edge of the screen, and you cannot always see the current selected page, doing all this horribly.

Is there a way to make a multi-line pagecontrol or move it left or right at the moment when the currently displayed page disappears on the screen.

Answer 1

I created an eBook application that used a UIScrollView containing a UIWebView. There were more than 100 pages in the book, so UIPageControl was unable to handle this because of the problem you indicated. I ended up creating a custom “slider” view that worked similarly to UIPageControl but could handle a large number of pages. This is pretty much what you will need to do. UIPage management cannot handle as many pages as you want ...

Answer 2

Calculate the page / dot ratio and save it as a floating point value. Then calculate the current number of points as the current page / pagesPerDot. You may need to advance a few pages before you see the movement of a point, but it is very scalable and works well.

Answer 3

I had to implement UIPageControl in my horizontal collection view, which had 30 elements. So what I did was to reduce the number of points by setting the number of points and scrolling them only at those points. 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 } 

Answer 4

My solution is to set the maximum number of points and show the point before the last until the user reaches the end. If the number of the current page is greater than the maximum number of points, we show the number before the last, 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 5

I set the maximum number of pages to 20 (the maximum that fits on iPhone 5S / SE in portrait mode) .. and if I'm on the page for more than 20, I will save the dot in the same place, but make the dot red. I think that people understand what this means, I often also have a numerical page number on the screen, as well as the First and Last buttons, and I feel that people are more interested in the dot moving on the initial pages .