UIPageControl - How to make the background transparent?

Question

I am using UIPageControl and trying to make the background transparent.

UIPageControl *pageControl = [UIPageControl appearance];
pageControl.pageInd         


        

Answer 1

It could work if you set the background color of the UIPageControl to a background image that looks the same as your VC's background color:

[UIPageControl appearance].backgroundColor  = [UIColor colorWithPatternImage:[UIImage imageNamed:@"pageControllerBackground"]];

Answer 2

As of Xcode 6.1.1 and iOS 8.1.1, I know that setting the background color of a UIPageControl object to the clear color worked for me.

[[self pageControl] setBackgroundColor:[UIColor clearColor]];

Answer 3

I finally found a working solution for this problem in Swift. You can find the original code and answer in this link.

It requires you to override the viewDidLayoutSubviews() function to bring the page control to the front of the view.

override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        let subViews: NSArray = view.subviews
        var scrollView: UIScrollView? = nil
        var pageControl: UIPageControl? = nil

        for view in subViews {
            if view.isKindOfClass(UIScrollView) {
                scrollView = view as? UIScrollView
            }
            else if view.isKindOfClass(UIPageControl) {
                pageControl = view as? UIPageControl
            }
        }

        if (scrollView != nil && pageControl != nil) {
            scrollView?.frame = view.bounds
            view.bringSubviewToFront(pageControl!)
        }
    }

Answer 4

pageControl.backgroundColor = [UIColor clearColor];

is working but!! than you have to set the backgroundColor of the UIPageViewController also on [UIColor clearColor] and than! you will see the backgroundcolor of the container view.

- (void)initPageViewController
{
    _pageController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll
                                                      navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal
                                                                    options:nil];

    UIImageView *imgView= [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    imgView.image = [UIImage imageNamed:@"NiceBGImage"];
    [self.view addSubview:imgView];

    self.view.backgroundColor = [UIColor clearColor];

    _pageController.view.frame = ({
        CGRect frame = [[UIScreen mainScreen] bounds];
        frame;
    });

    _pageController.delegate = self;
    _pageController.dataSource = self;
    _pageController.view.backgroundColor = [UIColor clearColor];

    NSArray *controllers = @[_controllers[0]];

    [self.pageController setViewControllers:controllers
                                  direction:UIPageViewControllerNavigationDirectionForward
                                   animated:NO
                                 completion:nil];

    UIPageControl *pageControl = [UIPageControl appearance];
    pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
    pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];
    pageControl.backgroundColor = [UIColor clearColor];
    pageControl = [UIPageControl appearanceWhenContainedIn:[_pageController class], nil];

    [self addChildViewController:_pageController];
    [[self view] addSubview:_pageController.view];
    [self.pageController didMoveToParentViewController:self];
}

Answer 5

Page control is transparent by default.

Check with this sample code:

UIPageControl *pageControl = [[UIPageControl alloc] init];
pageControl.frame = CGRectMake(10,10,100,100);
pageControl.numberOfPages = 8;
pageControl.currentPage = 0;
[self.view addSubview:pageControl];
[self.view bringSubviewToFront:pageControl];
[self.view setBackgroundColor:[UIColor blackColor]];

Please find the more customization possibilities below

Appearance of Page Controls

You can customize the appearance of a page control by setting the properties depicted below.

To customize the appearance of all page controls in your app, use the appearance proxy (for example, [UIPageControl appearance]). For more information about appearance proxies, see Appearance Proxies.

Tint Color

The only way to customize the appearance of a page control is by setting custom tints for the dots representing each page. The Current Page (currentPageIndicatorTintColor) field affects the color of the dot representing the currently displayed page, and the Tint Color (pageIndicatorTintColor) field affects the color of the dots representing every other page. The default color is white for the current page dot, and translucent gray for the other page dots.

If you want your custom colors to be translucent, you must specify a color with an alpha value of less than 1.0. This must be done programmatically, as in the following example:

self.myPageControl.currentPageIndicatorTintColor = [UIColor colorWithRed:0.0 green:0.0 blue:1.0 alpha:0.5];
self.myPageControl.pageIndicatorTintColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.5];

Check more details in UIPageControl - Developer.Apple documentation

Answer 6

Okay, as mentioned by @powerj1984 and @daniellarsson UIPageControl seems to be not alterable with respect to position and background color.

So I decided to move this to UIViewController and created a UIPageControl and

@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

And then bring this to top of my UIPageViewController as in viewDidLoad

self.pageControl.numberOfPages = self.pageTitles.count;    
[self.view addSubview:_pageControl.viewForBaselineLayout]; 

Then I updated the index of UIPageControl in viewControllerBeforeViewController and viewControllerAfterViewController

NSUInteger index = ((HomePageContentViewController*) viewController).pageIndex; 
self.pageControl.currentPage = index;