Reduce dot size or padding to fit all page indicators on screen with UIPageControl

Question

I have a UIPageControl that has 22 pages, therefore 22 page indicator dots. In landscape on iPhone they're all visible with plenty of space on the left and right, but in portrait there's not enough horizontal space to display all of the dots (at least on iPhone 4 and 5), so two aren't visible and the outer two are cut in half.

I am looking for a way to reduce the size of the dots or reduce the amount of padding between the dots to ensure all dots fit on screen in portrait. How can that be accomplished?

enter image description here

score 53 · Accepted Answer · answered Nov 09 '14 at 21:24

53

If you have that many dots, I would seriously consider a different control. But if you want to stick to UIPageControl, I would just scale it down to fit on screen, with something like:

pageControl.transform = CGAffineTransformMakeScale(0.7, 0.7);

This scales it down to 70% of its initial size - I leave it to you to determine the best scale for your screen size/number of pages.

answered Nov 09 '14 at 21:24

pbasdf

21,386
4
43
75

1

can you please suggest another control? – H Raval Jun 20 '17 at 11:50
1

@HRaval Personally I would try customising UISegmentedControl with three segments displaying a left arrow, "Page X of Y", and a right arrow. – pbasdf Jun 20 '17 at 12:05
thnx for your help...actually i need scrolling functionality with paging as i have large number of pages fetching from server, for that i am using horizontal collectionview. Is it right choice? – H Raval Jun 20 '17 at 12:23
@HRaval Sure, ... or `UIPageViewController`[see here](https://developer.apple.com/documentation/uikit/uipageviewcontroller). – pbasdf Jun 20 '17 at 12:51
what about not using dots at all? you could just display an arrow to indicate that there are more elements – Alex Salom Nov 27 '18 at 11:28
Update it for swift3 `pageControl.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)` – Aadil Apr 02 '19 at 07:01

score 6 · Answer 2 · answered Mar 16 '17 at 17:43

6

Swift 3 version code: based on pbasdf answer.

pageControl.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)

answered Mar 16 '17 at 17:43

mriaz0011

1,887
23
11

score 2 · Answer 3 · answered Oct 26 '16 at 12:56

You should really not use a UIPageControl for something that has 22 pages. How about trying something like a label that returns a number instead. Will make you app look a lot cleaner.

Although if you REALLY want to use the pageControl, pbasdf's answer is spot on. pageControl.transform = CGAffineTransformMakeScale(0.8, 0.8) should do the trick.

Reduce dot size or padding to fit all page indicators on screen with UIPageControl

3 Answers3

Linked