UIPageControl dot for a search page

Question

Is there any way to add a magnification glass icon instead of the dot for my first page, that allows to perform some search, using the UIPageControl for my native application on the iPhone?

I've tried to google, but haven't find similar questions at all, but it looks like a wide-spread feature in Apple applications.

Can anybody help me with an advice?

Miguel Ángel Friginal · Accepted Answer · 2010-01-05T16:45:45.890

6

Basically UIPageControl has an _indicators array that contains UIViews for each of the dots. This array is a private property, so you should not mess with it. If you need custom icons, you will have to do your own page indicator implementation.

Edit: After some more research, it seems you can replace the UIPageControl subviews to customize the dot images. Check http://www.onidev.com/2009/12/02/customisable-uipagecontrol/ for details. Still not sure how Apple reviewers are going to feel about doing such thing though.

edited Jan 05 '10 at 16:45

answered Nov 21 '09 at 23:10

Miguel Ángel Friginal

126
6

Thanks for your answer! I hoped to the last it won't be in this way :-/ – Denis Nov 24 '09 at 08:10
I've achieved my goal by adding a sub-view to the UIPageControl, above the search icon (had to spend some time to find out it's placement algorithm). It works just as needed. Whatever, I have to sent a small blame to the Apple's side for not allowing of this customization out of the box. – Denis Feb 01 '10 at 16:47
1

We have submitted apps using the technique described in the link you gave without any problems. – hennes Apr 12 '11 at 15:48
That link is dead. You can find its old content on archive.org: https://web.archive.org/web/20120408220415/http://www.onidev.com/2009/12/02/customisable-uipagecontrol/ – Bill Mar 12 '15 at 18:04

score 1 · Answer 2 · answered Dec 31 '13 at 15:25

I created an UIPageControl subclass to achieve this easily and legally (without private APIs). Basically, I overwritten setNumberOfPages: insert a UIImageView with he icon inside of the last circle. Then on the setCurrentPage: method I detect if the last page gets highlighted or not, to modify the UIImageView's state and also, clear the background color of the circle since this will be updated automatically by UIPageControl private APIs.

This is the result: enter image description here

This is the code:

@interface EPCPageControl : UIPageControl
@property (nonatomic) UIImage *lastPageImage;
@end

@implementation EPCPageControl

- (void)setNumberOfPages:(NSInteger)pages
{
    [super setNumberOfPages:pages];

    if (pages > 0) {

        UIView *indicator = [self.subviews lastObject];
        indicator.backgroundColor = [UIColor clearColor];

        if (indicator.subviews.count == 0) {

            UIImageView *icon = [[UIImageView alloc] initWithImage:self.lastPageImage];
            icon.alpha = 0.5;
            icon.tag = 99;

            [indicator addSubview:icon];
        }
    }
}

- (void)setCurrentPage:(NSInteger)page
{
    [super setCurrentPage:page];

    if (self.numberOfPages > 1 && self.lastPageImage) {

        UIView *indicator = [self.subviews lastObject];
        indicator.backgroundColor = [UIColor clearColor];

        UIImageView *icon = (UIImageView *)[indicator viewWithTag:99];
        icon.alpha = (page > 1 && page == self.numberOfPages-1) ? 1.0 : 0.5;
    }
}

Thank you. This helped me a lot. I found it a lot cleaner than the other approach! — kekub, Aug 04 '14 at 10:47

UIPageControl dot for a search page

2 Answers2