UIPageViewController Creating a Border at the Bottom of my UIImage and how to get rid of it

Question

I am relatively new to UIPageViewControllers and have just implemented it for the "walkthrough" of my app.

The problem is, each image I am displaying has a border at the bottom and sides with the pageViewIndicators and because of that, the image isn't displayed as full screen and looks bundled up.

I'm attaching some images here for reference of this:

I am simply looking to get rid of this border and just have the pageIndicators overlay the full screen image in the background. Also, when swiping to the next screen, I don't want the black borders between the images (as per the second screenshot).

Here's some code. I have an WalkthroughViewController file which contains a reference to the image being created:

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    [self.view setBackgroundColor:[UIColor clearColor]];
    CGRect insetFrame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
    _imageView = [[UIImageView alloc] initWithFrame:insetFrame];
    _imageView.backgroundColor = [UIColor clearColor];
    [_imageView setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];
    [_imageView setImage:[UIImage imageNamed:_model.imageName]];
    [[self view] addSubview:_imageView];
}

In my PageViewController's viewDidLoad, I have:

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    [[self view] setBackgroundColor:[UIColor blackColor]];

    _modelArray = [NSMutableArray arrayWithObjects:[[ImageModel alloc] initWithImageName:@"TimelineTut.png"],
                  [[ImageModel alloc] initWithImageName:@"Tut 1.png"],
                [[ImageModel alloc] initWithImageName:@"Tut 2.png"],
                   [[ImageModel alloc] initWithImageName:@"newtut3.png"],
                   [[ImageModel alloc] initWithImageName:@"tut 4.png"],
                   nil];

    _pageViewController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll
                                                          navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal
                                                                        options:[NSDictionary dictionaryWithObject:[NSNumber numberWithFloat:50.0f] forKey:UIPageViewControllerOptionInterPageSpacingKey]];
    
    _pageViewController.delegate = self;
    _pageViewController.dataSource = self;
    
    WalkthroughViewController *imageViewController = [[WalkthroughViewController alloc] init];
    imageViewController.model = [_modelArray objectAtIndex:0];
    NSArray *viewControllers = [NSArray arrayWithObject:imageViewController];
    
    [self.pageViewController setViewControllers:viewControllers
                                      direction:UIPageViewControllerNavigationDirectionForward
                                       animated:NO
                                     completion:nil];
    
    [self addChildViewController:_pageViewController];
    [self.view addSubview:_pageViewController.view];
    
    [_pageViewController didMoveToParentViewController:self];
    

    //CGRect pageViewRect = self.view.bounds;
    
   // pageViewRect = CGRectInset(pageViewRect, 0.0, 0.0);
    //self.pageViewController.view.frame = pageViewRect;

}

The last three lines above are commented out, but if I uncomment them and leave the values, it stays the same. However if I change the 0.0 to something like 40.0, it then understandably looks elongated.

I have tried setting the ImageRatio to AspectFill, Fit, ScaleToFill, etc in the WalkthroughViewController but that did not get rid of the borders.

The view controller is created entirely in code and not in storyboard and it almost looks like this question (Putting a bar on the bottom of the UIPageViewController) but I DON'T want the borders and I don't think I'm embedding in a container?

UPDATE:

By changing the value here in this line of code:

_pageViewController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll
                                                      navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal
                                                                    options:[NSDictionary dictionaryWithObject:[NSNumber numberWithFloat:50.0f] forKey:UIPageViewControllerOptionInterPageSpacingKey]];

From 50 to 0, I've got rid of the space on the side of the images. However the margin at the bottom still exists.

How do I get rid of the black border, but keep the pageViewIndicators as an overlay onto the image and therefore make the image full screen and not squashed because of the border?

Any guidance on this would be really appreciated.

Answer 1

I managed to overcome this implementation with the selected answer in this question here How to remove the bottom gap of UIPageViewController

The basic premise is to ensure I'm extending out the PageViewController's view by 15 which moves the page indicators to the bottom. Luckily my background is black (the purple images above in the question were for reference) and the image doesn't look squashed. While this isn't an ideal solution, it does the job for now.