Search code examples
iosxamarin.iosautolayoutstoryboard

How to remove white top space that appears on tab in others (UITabBarController)


I am working on Xamarin Studio with Mono but you can respond in Obj-C or Swift I don't mind. (Please don't mind the icons, design, translations, etc on the screenshots this is WIP)

I have this strange issue I can't resolve :

A white blank space appears under the top bar of my UIView which is in a UITabBarController, at first I thought it was the "Adjust Scroll View Insets" option enabled but it is not. I also tried to remove my UIWebView and try with a Label, same problem.

The blank space only appears on views that are "tabbed" in the "Others" section of my UITabBarController (when the screen is too small). You can see on my screenshots on an iPad the white space is not here, but on every other devices (iPhone, iPhone plus) it appears !

I can put a negative top constraint if the device is not an iPad but it is not the proper way to remove it ...

You can find the screenshots of (in order) :

  • The storyboard view
  • Top Constraint of the WebView
  • The whitespace on iPhone (but not on iPad and Storyboard, shouldn't be here !!)
  • StoryBoard structure
  • No whitespace on iPad (this is the normal behaviour, I want it on smaller devices too)
  • ViewController parameters

StoryBoard View

The white space

Top Constraint on my WebView

Storyboard structure

No whitespace on iPad

ViewController parameters


Solution

  • Thank you for your answers, I found out what was that white space.

    If I want to remove it I have to uncheck "Extent edges - Under Top Bars" and then do (or the NavigationBar will be gray, see Dark shadow on navigation bar during segue transition after upgrading to Xcode 5.1 and iOS 7.1):

    NavigationController.NavigationBar.Translucent = false;
    

    But trying to resolve the issue, I tried the following code :

    ParentViewController.NavigationController.NavigationBar.Translucent = false;
    

    And the white space turned into a second NavigationBar with tools to reorganize the tabs, and no need to uncheck "Extent edges - Under Top Bars" (especially if you don't set the tranlucent to false because the second navigation bar will go under it).

    I will keep that second NavigationBar (https://developer.apple.com/reference/uikit/uitabbarcontroller/1621183-morenavigationcontroller), I like it. But for some reason it wasn't displayed until I set the ParentViewController NavigationController NavigationBar Translucent to false ... I don't really get why, it should have appeared directly but ...

    Note that the proper way to display this NavigationBar if it is not displayed by default is to add the line in the UITabBarController class, and not in each ViewController ...

    public partial class TabBarController : UITabBarController
    {
        public TabBarController(IntPtr handle) : base(handle)
        {
        }
    
        public override void ViewDidLoad()
        {
            CustomizableViewControllers = null; //if you want to disable the edit button
            NavigationController.NavigationBar.Translucent = false;
            base.ViewDidLoad();
        }
    }
    

    (Sorry for the french on the screenshots my device is in French ..)

    enter image description here

    enter image description here

    enter image description here