Strange spaces at the top & bottom of ICViewPager

Question

I make use of ICViewPager to create tabs of contents. However, the layout looks weird as there are strange spaces at the top & bottom of ICViewPager's content view.

As you can see below, I have a UINavigationBar at the top of the screen, which is generated by the embedding UINavigationController. Then, the UINavigationController is made to be one of the tabs in a UITabbar Controller. Here is the structure:

UITabbarController --> UINavigationController --> TabVC (which contains ICViewPager) --> Content views: Content1VC, Content2VC, Content3VC

Here are the codes in TabVC (which configs to have <ViewPagerDataSource, ViewPagerDelegate>):

// in viewDidLoad
self.dataSource = self;
self.delegate = self;
self.edgesForExtendedLayout = UIRectEdgeNone;

and for the delegate methods:

#pragma mark - ViewPagerDataSource
- (NSUInteger)numberOfTabsForViewPager:(ViewPagerController *)viewPager {
    return tabsContents.count;
}

- (UIView *)viewPager:(ViewPagerController *)viewPager viewForTabAtIndex:(NSUInteger)index {

    UILabel *label = [UILabel new];
    label.text = [tabsContents objectAtIndex:index];
    label.textColor = [UIColor colorWithRed:136/255.0 green:136/255.0 blue:136/255.0 alpha:1.0f];
    [label sizeToFit];

    return label;
}

- (UIViewController *)viewPager:(ViewPagerController *)viewPager contentViewControllerForTabAtIndex:(NSUInteger)index {
    UIViewController *vc = [self.storyboard instantiateViewControllerWithIdentifier:[tabsVC objectAtIndex:index]];
    return vc;
}

The functions look okay, but the layout does not span through the whole spaces as it expects to do so. The red spaces (I made the TabVC view's background color to red to illustrate the issue) are not expected to appear. How do I make the ICViewPager occupy the red spaces?

Note: This appears only after the view is popped back from a pushed view controller, or changing tabs in UITabbarController

I'm not entirely sure but try playing with `edgesForExtendedLayout`, `extendedLayoutIncludesOpaqueBars` and `automaticallyAdjustsScrollViewInsets` and see if you get it fixed — ShahiM, Nov 23 '15 at 11:33
Thanks, when I comment out `self.edgesForExtendedLayout = UIRectEdgeNone;`, the layout problem is solved. Can you please put that as answer (if possible, can you explain why the line causes the problem? I don't quite understand) — Raptor, Nov 24 '15 at 02:14

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

I think it is a conflict between automaticallyAdjustsScrollViewInsets and edgesForExtendedLayout.

From this answer :

edgesForExtendedLayout

Basically, with this property you set which sides of your view can be extended to cover the whole screen. Imagine that you push a UIViewController into a UINavigationController, when the view of that view controller is laid out, it will start where the navigation bar ends, but this property will set which sides of the view (top, left, bottom, right) can be extended to fill the whole screen.

and

automaticallyAdjustsScrollViewInsets

This property is used when your view is a UIScrollView or similar, like a UITableView. You want your table to start where the navigation bar ends, because you wont see the whole content if not, but at the same time you want your table to cover the whole screen when scrolling. In that case, setting edgesForExtendedLayout to None won't work because your table will start scrolling where the navigation bar ends and it wont go behind it.

So, automaticallyAdjustsScrollViewInsets defaults to YES and thus inserts a positive inset at the top equal to the height of the nav bar. now when you apply self.edgesForExtendedLayout = UIRectEdgeNone, that inset creeps out from under the nav bar causing said issue.

I created Tabbar Programmatically with custom NavigationController and Custom UIViewControllers. I had problem with bottom space. so I used self.edgesForExtendedLayout = .top and it worked . thanks man — Satish Babariya, Jul 17 '17 at 06:52

Strange spaces at the top & bottom of ICViewPager

1 Answers1