How to remove the bottom gap of UIPageViewController

Question

I am using UIPageViewController to show images full screen, the UIViewController which is added to UIPageController as a sub view / child has the images being showed using ImageView. Problem is the images arent comming fullscreen, instead the pagecontrol view's donts are appearing at the bottom and that space is completely wasted. Please check the image attached.

enter image description here

Here is the code

self.pageController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];

self.pageController.dataSource = self;
[[self.pageController view] setFrame:[[self view] bounds]];

NewsItemViewController *initialViewController = [self viewControllerAtIndex:0];

NSArray *viewControllers = [NSArray arrayWithObject:initialViewController];

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

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

Here NewsItemViewController is UIViewController showing images and some text and The MainViewController implements UIPageViewControllerDataSource protocol and necessary methods in MainViewController.

I believe there has to be a way to do show the things in full screen.

*** Also the MainViewController is a part of a storyboard if that matters.

You should use a UIPageControl and a UIScrollView instead, then you have granular control. — Woodstock, Nov 12 '13 at 17:56
Show us some code regarding how you set up the page view controller. — bilobatum, Nov 12 '13 at 22:08
@JohnWoods there has to be a way as UIPageViewController was supposed to replace UIPageControl and ScrollView plus I want flexibility of designing the view in xib editor which i wont get in you mentioned approach. — vishal dharankar, Nov 13 '13 at 07:20
@bilobatum added the code please check. I am able to search the PageControl from the UIPageViewController and hide it but still that space remains there. — vishal dharankar, Nov 13 '13 at 07:21
Ok, so the code above looks good. So we can rule that out as the problem. Let's look elsewhere. Does your NewsItemViewController contain any layout code? — bilobatum, Nov 13 '13 at 07:46
@bilobatum nope its just layout using xib editor a simple UIImageView which spans entire view thats it, i was expecting the entire view to be shown but then that gap hides bottom part of image — vishal dharankar, Nov 13 '13 at 07:48
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/41079/discussion-between-bilobatum-and-vishal) — bilobatum, Nov 13 '13 at 07:50
How Can we make the control indicator over the image instead of removing it. While doing as u suggested control indicator is being lost — Nischal Hada, Sep 25 '15 at 11:11
@nischalhada make the background of the indicator view clear — vishal dharankar, Sep 25 '15 at 16:18

score 40 · Accepted Answer · answered Nov 13 '13 at 08:59

40

Finally got the solution myself I just hide the page control from UIViewPageController and then extended the size of the UIPageViewController to cover up the gap left due to absense of page control.

 NSArray *subviews = self.pageController.view.subviews;
UIPageControl *thisControl = nil;
for (int i=0; i<[subviews count]; i++) {
    if ([[subviews objectAtIndex:i] isKindOfClass:[UIPageControl class]]) {
        thisControl = (UIPageControl *)[subviews objectAtIndex:i];
    }
}

thisControl.hidden = true;
self.pageController.view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height+40);

answered Nov 13 '13 at 08:59

vishal dharankar

7,536
7
57
93

Thanks for the nice solution, saved me a ton of time! – Julius Jan 27 '14 at 13:28
1

Can you make the control indicator over the image itself instead of removing it? I want that because there's no indication to the user he can swipe by removing the indicator. – Nuno Gonçalves Feb 19 '15 at 05:05
1

@NunoGonçalves using above code you get access to the UIPageControl , you can make its background color to be clear and achieve it, basically you can customize the indicator once you get the access to it , which above shoes how to do. – vishal dharankar Feb 19 '15 at 07:15
@vishal I have tried your method to show the UIPageControl over the content, but it is not appearing no matter what. – M Abdul Sami Dec 10 '15 at 22:22

score 21 · Answer 2 · answered Nov 16 '13 at 19:17

21

Curious. The docs say:

If both of the methods in “Supporting a Page Indicator” are implemented and the page view controller’s transition style is UIPageViewControllerTransitionStyleScroll, a page indicator is visible.

Those two methods are:

- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController {
}

- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController { 
}

Are you implementing these two data source methods? If so, perhaps if you remove them you won't have to manually remove the page control (dots)? A quick test would be to change the

UIPageViewControllerTransitionStyleScroll

to

UIPageViewControllerTransitionStylePageCurl

and see if the page control indicator dots go away. (After commenting out your hide method, of course.)

answered Nov 16 '13 at 19:17

Michael J.

511
3
4

1

agree, but i need those methods , i guess they are needed to supply necessary view data when you scroll. – vishal dharankar Nov 20 '13 at 12:52
2

You were right, the page control indicator does go away if you switch to the PageCurl transition style. – Julius Jan 27 '14 at 13:29
4

Removing the two methods above, also removed the dots and gap. Success! – AlexanderN Feb 16 '14 at 09:18
dots are disappering when u delte procedures "presentationCountForPageViewController" and "presentationIndexForPageViewController". But what if u want a scenario like this >> - we want to dots stay ! - background of dots must go away ! - scrollview inside pageviewcontrol must extent to full screen - background of pagecontrol must not clip the view ! – Add080bbA Aug 22 '14 at 12:53
Access the individual view and modify it the way i did check my answer for hint – vishal dharankar Aug 22 '14 at 13:08

score 14 · Answer 3 · answered Feb 27 '15 at 16:50

14

UIPageViewController dots are only shown when you have implemented following method:

- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController;

check in you code. and also returning back zero in this method will hide the dots (UIPageControl)

answered Feb 27 '15 at 16:50

g.revolution

11,962
23
81
107

I wanted to remove the black strip if you read carefully, the above method will just remove dots not the gap. – vishal dharankar Mar 01 '15 at 09:22
it does, there might be some other problem with the code. it removes the strip completely. – g.revolution Mar 01 '15 at 23:28

score 7 · Answer 4 · edited Oct 16 '17 at 15:39

I am adding for swift 2.2 compatible code

for view in self.view.subviews {
    if view.isKindOfClass(UIScrollView) {
        view.frame = UIScreen.mainScreen().bounds
    } else if view.isKindOfClass(UIPageControl) {
        view.backgroundColor = UIColor.clearColor()
    }
}

This is the Swift 4 compatible solution, embedded in viewDidLayoutSubviews

for view in self.view.subviews {
    if view.isKind(of:UIScrollView.self) {
        view.frame = UIScreen.main.bounds
    } else if view.isKind(of:UIPageControl.self) {
        view.backgroundColor = UIColor.clear
    }
}

score 0 · Answer 5 · answered Nov 03 '15 at 12:53

Swift version :). Return Zero for below implementation inside UIPageViewController subclass. func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int { return 0 }

func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int { return 0 }

score 0 · Answer 6 · answered Apr 06 '16 at 14:16

Set your pager controller as so

self.pageController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];
self.pageController.dataSource = self;
[[self.pageController view] setFrame:[[self view] bounds]];

And implement,this method should return any value greater than 1

- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController {
    // The selected item reflected in the page indicator.
    return 2;
}

Now the gap at the bottom space is removed and no page control shown :)

How to remove the bottom gap of UIPageViewController

6 Answers6

Linked