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

score 4 · Accepted Answer · edited Jan 08 '16 at 19:29

4

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];

edited Jan 08 '16 at 19:29

Coeffect

8,772
2
27
42

answered Mar 26 '14 at 04:35

Chandu

630
2
8
18

score 1 · Answer 2 · answered Mar 26 '14 at 04:42

1

Something like this should work fine:

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

answered Mar 26 '14 at 04:42

MrHaze

3,786
3
26
47

1

This works, but the problem is that you can't make it fully transparent because the view above the pageControl does not extend past the page'Control's end. I.E. you have to expand the content view into the background of the pageControl. – TheJeff Aug 30 '16 at 00:24

score 1 · Answer 3 · answered May 02 '16 at 14:31

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

The only problem I have with this is that my view "jumps" positions of the subview elements by approximately the height of the bottom nav bar thing as soon as I tap on the page to scroll to the next one. I've tried making it layout the subviews again, but it doesn't seem to work very well. — TheJeff, Aug 30 '16 at 01:04

How to make UIPageViewController background translucent?

3 Answers3

Linked