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 number of dots could become say 30.

When this happens the dots just disappear off the edge of the screen, and you can't always see the currently selected page, making it all look terrible.

Is there any way to make the pagecontrol multi-line, or to shift it left or right at the moment the currently visible page disappears of the screen.

As per my knowledge,if you are having so many pages,its better to use any method other than UIPageControl. — Yama, Jan 20 '11 at 09:56
It's not a typical situation, 99% of the time there will only be 5-6 pages and the page view is useful and the right choice. The problem is that it is possible to add as many as you like, and when this happens (not often) I'd like it to not look terrible. — BinaryGuy, Jan 20 '11 at 10:17
I've seen it implemented in such way that if the number of pages exceeded the available space the edge two dots would transform to arrows (rotated triangles) indicating that there's more. — Andrej, Dec 17 '15 at 11:19

score 3 · Answer 1 · answered Aug 22 '12 at 13:51

3

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.

answered Aug 22 '12 at 13:51

UserNYC

113
5

score 3 · Accepted Answer · answered Jan 20 '11 at 15:58

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...

Akshay Kumar Both · Answer 3 · 2017-09-18T09:26:09.613

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

}

score 1 · Answer 4 · answered Dec 13 '18 at 10:46

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)
    }

score 1 · Answer 5 · answered Jul 01 '19 at 12:31

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.

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

5 Answers5

Linked