How to make UIPageViewController background translucent?

Question

I search on the web and found similar answers like this( How do I make the bottom bar with dots of a UIPageViewController translucent?) but it doesn't solve my problem.

Here is my code

    // PageControl Layout
UIPageControl *pageControl = [UIPageControl appearance];
pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
pageControl.currentPageIndicatorTintColor = [UIColor blackColor];
pageControl.backgroundColor = [UIColor clearColor];
//    pageControl.frame = CGRectMake(5,5,305,400);
pageControl = [UIPageControl appearanceWhenContainedIn:[self class], nil];

indexCurrentPage = 0;
pageController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];
[pageController.view setFrame:[[UIScreen mainScreen] bounds]];
NSLog(@"page controller.fram  is %@", [NSValue valueWithCGRect:[[pageController view] frame]]);
pageController.dataSource = self;

GuidedTourPage *initialViewController = [self viewControllerAtIndex:0];
[[self.pageController view] setFrame:[[initialViewController view] bounds]];
NSLog(@"bound is %@", [NSValue valueWithCGRect:[[initialViewController view] bounds]]);
NSArray *viewControllers = [NSArray arrayWithObject:initialViewController];
[pageController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];
[self addChildViewController:self.pageController];
[self.view addSubview:[pageController view]];
[pageController didMoveToParentViewController:self];

The scrolling function and everything else work fine. Except there is a portion of the image is missing. I did self.window.backgroundColor = [UIColor whiteColor]; in my "AppDelegate.m" so it's understandable that pageControl.backgroundColor = [UIColor clearColor]; will make the background to be white.

But I want something like this (http://www.appcoda.com/wp-content/uploads/2013/06/UIPageViewController-Tutorial-Screen.jpg), in which the pageControl has a transparent background.

I know the problem lies in the layer. But I don't know how to fix it. Is there a way to NSLog the layer hierarchy to check it? Or is there any tester software that can help me test the layer problem. I don't think this will be a very hard problem as long as I can find a way to debug the layers like the 3D-Inspect element function in Firefox.

Thanks in advance

Answer 1

Try this:

UIPageControl *pageControl = [UIPageControl appearance];
pageControl.backgroundColor = [UIColor clearColor];

You can play with Alpha too:

[[UIColor alloc] initWithRed:0.0f green:0.0f blue:0.0f alpha:0.7];

So, the statement would become:

pageControl.backgroundColor = [[UIColor alloc] initWithRed:0.0f green:0.0f blue:0.0f alpha:0.7];

Answer 2

Something like this should work fine:

[self.pageCont setBackgroundColor:[[UIColor whiteColor] colorWithAlphaComponent:0.5]];

Answer 3

I have verified this solution, please subclass UIPageViewController and add this method in implementation.

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    for (UIView *view in self.view.subviews) {
        if ([view isKindOfClass:[NSClassFromString(@"_UIQueuingScrollView") class]]) {
            CGRect frame = view.frame;
            frame.size.height = view.superview.frame.size.height;
            view.frame = frame;
            [self.view sendSubviewToBack:view];
        }
    }
}

This will resolve the issue. Thanks