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

问题

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.

回答1:

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

回答2:

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.

回答3:

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

}

回答4:

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

回答5:

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.

来源：https://stackoverflow.com/questions/4745333/whats-the-best-way-of-handling-a-uipagecontrol-that-has-so-many-dots-they-dont

标签

iphone

ios

uipagecontrol