Search code examples
iosobjective-cuipageviewcontrolleruipagecontroluibackgroundcolor

UIPageViewController and UIPageControl transparent background color - iOS


I'm making a tutorial when app launches for the first time and using UIPageViewController for that. Everything is working fine but the background color of UIPageViewController is not getting transparent. It's always black, as shown below:

enter image description here enter image description here

Here's how I'm adding the UIPageViewController (in a tabbar controller)

.h file:

@interface CHMainTabViewController : UITabBarController <UIPageViewControllerDataSource>

@property (strong, nonatomic) UIPageViewController *pageViewController;
@end

.m file (in viewDidLoad):

// Create page view controller
self.pageViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"PageViewController"];
self.pageViewController.dataSource = self;
self.pageViewController.view.backgroundColor = [UIColor clearColor];
TutorialViewController *startingViewController = [self viewControllerAtIndex:0];

                NSArray *viewControllers = @[startingViewController];

                [self.pageViewController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];
[self presentViewController:_pageViewController animated:YES completion:nil];

in my AppDelegate.m, I've also set UIPageControl's background color to clear:

UIPageControl *pageControl = [UIPageControl appearance];
pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
pageControl.currentPageIndicatorTintColor = [UIColor blackColor];
pageControl.backgroundColor = [UIColor clearColor];
[pageControl setOpaque:NO];
self.window.backgroundColor = [UIColor clearColor];

I know that the issue is with the UIPageViewController's background color. Is it not possible to set a Controller's background to be transparent?

Please help!

Thanks.


Solution

  • Okay I've found the solution:

    1. Set a background image on the UIPageViewController.

    UIView *view = [[UIView alloc] init]; view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height); UIImageView *imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"login_backgroung"]]; imageView1.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height); [view addSubview:imageView1];

    // Create page view controller
    self.pageViewController = [self.storyboard 
    
    instantiateViewControllerWithIdentifier:@"PageViewController"];
    self.pageViewController.dataSource = self;
    self.pageViewController.view.backgroundColor = [UIColor clearColor];                  
    [self.pageViewController.view insertSubview:view atIndex:0];
    
    1. For your PageViewController viewControllers , choose a PNG Image with graphics or whatever you want, but make sure the background is transparent.
    2. Set your UIPageControl's background as transparent in appDelegate.m

      UIPageControl *pageControl = [UIPageControl appearance]; pageControl.pageIndicatorTintColor = [UIColor whisperWhite]; pageControl.currentPageIndicatorTintColor = [UIColor whisperDarkGray]; pageControl.backgroundColor = [UIColor clearColor];

    Now run and your UIPageViewController will look like this, (notice the background static and only the text is moving, as we swipe from right to left): enter image description here