Skip to main content

UIView doesn"t resize to full screen when hiding the nav bar & tab bar


I have an app that has a tab bar & nav bar for normal interaction. One of my screens is a large portion of text, so I allow the user to tap to go full screen (sort of like Photos.app).



The nav bar & tab bar are hidden, and I set the the text view's frame to be full screen. The problem is, there is about 50px of white space where the tab bar used to be. You can see if from this screen shot:



alt text



I'm not sure what's causing this. The whitespace is definitely not the view behind the text view, as I set it's background color to red just to be sure. What could be causing this?



** UPDATE **



I did some hit testing in a UIWindow subclass and found out that the whitespace is actually the undocumented/unpublished UILayoutContainerView. This is the parent view of the tabBar. I don't think it's recommended to directly manipulate this view, so how can I hide the tab bar?



** UPDATE # 2 **



I checked self.view's frame before & after animation, and it looks like the parent view is not resizing enough.



after going fullscreen, the view's frame is only 411 pixels tall. I've tried messing with the frame manually and also setting autoResizeMask with no luck.



** UPDATE: Here's the end result **




- (void)toggleFullscreen {
isFullScreen = !isFullScreen; //ivar

//hide status bar & navigation bar
[[UIApplication sharedApplication] setStatusBarHidden:isFullScreen animated:YES];
[self.navigationController setNavigationBarHidden:isFullScreen animated:YES];

[UIView beginAnimations:@"fullscreen" context:nil];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:.3];

//move tab bar up/down
CGRect tabBarFrame = self.tabBarController.tabBar.frame;
int tabBarHeight = tabBarFrame.size.height;
int offset = isFullScreen ? tabBarHeight : -1 * tabBarHeight;
int tabBarY = tabBarFrame.origin.y + offset;
tabBarFrame.origin.y = tabBarY;
self.tabBarController.tabBar.frame = tabBarFrame;

//fade it in/out
self.tabBarController.tabBar.alpha = isFullScreen ? 0 : 1;

//resize webview to be full screen / normal
[webView removeFromSuperview];
if(isFullScreen) {
//previousTabBarView is an ivar to hang on to the original view...
previousTabBarView = self.tabBarController.view;
[self.tabBarController.view addSubview:webView];

webView.frame = [self getOrientationRect]; //checks orientation to provide the correct rect

} else {
[self.view addSubview:webView];
self.tabBarController.view = previousTabBarView;
}

[UIView commitAnimations];
}



(note that I switched textview to webview, but the same works for the original text view)


Source: Tips4allCCNA FINAL EXAM

Comments

  1. I had this exact problem where I was animating the tab bar and navigation bar off the bottom and top of the screen respectively, leaving a 49px high white space where the tab bar was.

    It turns out that the reason my new "fullscreen" view wasn't actually filling the space was because I was adding the fullscreen view as a subview of the navigation controller's view, which itself was a child of the tab bar controller.

    To fix it, I simply added the new fullscreen view (in your case the view with all the text) as a subview of the UITabBarController's view.


    [[[self tabBarController] view] addSubview:yourTextView];


    Then all you need to do is make sure that your subview's frame is 480 x 320px and it should fill the screen (including the area that was previously the mysterious white space)

    ReplyDelete
  2. You can definitely make something that appears correct by shifting the frame of the view such that the tab bar is off screen. I know someone else mentioned trying that, and you said it didn't work, but I suspect the issue is that you did not have the textviews resize mask setup properly when you tried. Below is code that should work:

    - (void)viewDidLoad {
    [super viewDidLoad];
    currentlyHidden = NO;
    }

    - (void) hideStuff {
    SO2AppDelegate *appDelegate = (id)[[UIApplication sharedApplication] delegate];
    self.navigationController.navigationBarHidden = YES;

    CGRect newFrame = appDelegate.tabBarController.view.frame;
    newFrame.size.height += appDelegate.tabBarController.tabBar.frame.size.height;
    appDelegate.tabBarController.view.frame = newFrame;
    }

    - (void) showStuff {
    SO2AppDelegate *appDelegate = (id)[[UIApplication sharedApplication] delegate];

    CGRect newFrame = appDelegate.tabBarController.view.frame;
    newFrame.size.height -= appDelegate.tabBarController.tabBar.frame.size.height;
    appDelegate.tabBarController.view.frame = newFrame;

    self.navigationController.navigationBarHidden = NO;
    }

    - (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    if (currentlyHidden) {
    [self showStuff];
    currentlyHidden = NO;
    } else {
    [self hideStuff];
    currentlyHidden = YES;
    }
    }


    Additionally, since this is definitely sensitive to how you have your nibs etc setup, I am posting a a project online so you can download it and get a look at it. It is a pretty minimal demo, just a Navigation based project where the delegate sets up a tab controller and embeds the view controller from the main nib. The rest is in the RootViewController nib and class. The bars are toggled whenever a touch begins, so just tap the screen. Obviously in a real app you might need to adjust the scroll view so stuff the content doesn't appear to jump.

    ReplyDelete
  3. Maybe there's another view that is a built-in part of the tab bar area? That is to say, something additional to hide. This will help you see what views are around.

    for (UIView *viewy in [self.navigationController.view subviews])
    {
    NSLog([viewy description]);
    }

    ReplyDelete
  4. Have you set your view controller's hidesBottomBarWhenPushed property to YES? You need to set this in your initWithNibName:bundle: or initWithCoder: method. When it gets pushed to the nav controller, this should hide the tab bar and make the content view extend down to the bottom.

    ReplyDelete
  5. I believe the issue is that you're still in the tab bar controller, I've hit a few issues with this as well, and ended up creating two views for my app delegate to control, the tab bar controller , and a separate uiview that holds anything that the tab bar controller tries to take command of. You could pass your view to the app delegate and use it there perhaps?

    ReplyDelete
  6. Try making the TabBarControllers view larger than the screen so that the tab bar is hidden off screen, as long as you do this before the new ViewController is set, then its view will resize to fill the new frame!

    In my test I used the tabBarController:shouldSelectViewController: delegate method to check which view controller is about to become current and set the TabBarController.view.frame accordingly. For example:

    - (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController
    {
    if( viewController == second)
    tabBarController.view.frame = CGRectMake( 0, 20, 320, 500);
    else
    tabBarController.view.frame = CGRectMake( 0, 20, 320, 460);
    }


    If this still isn't quite what you need, try looking into the hidesBottomBarWhenPushed property of UIViewController. When set to yes this will make the bottom bar hide if the Controller is pushed onto a Navigation stack.

    ReplyDelete
  7. I would move the view to the window when you choose to go fullscreen. e.g.

    myView = [self.view retain];
    self.view = nil;
    [window addSubview:myView];


    and to go back:

    [myView removeFromSuperView];
    self.view = myView;
    [myView release];
    myView = nil;


    By adding the view as a child of the window, it can be totally fullscreen and will be on top of the tab bar.

    You can then combine this with

    [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didRotate:) name:@"UIDeviceOrientationDidChangeNotification" object:nil];


    to detect rotation. (I think that you combine this with view.transform = CGAffineTransformMakeRotation to make it rotate...?)

    ReplyDelete
  8. If you are using Interface Builder, ensure autoresizing is set properly in the Size Inspector.
    If you creating the UITextView in code, make sure you set the frame to be large enough and that the view's parent (and it's parent) are also large enough. For simplicity, add the view to the window directly, and then move inward from there.

    To move a view to its superview:

    - (void)moveViewToSuperview:(UIView *)view
    {
    UIView *newSuperview = [[view superview] superview];
    [view removeFromSuperview];
    [newSuperview addSubview:view];
    [newSuperview bringSubviewToFront:view];
    }

    ReplyDelete
  9. Have you attempted to force the text to "re-write" itself (resetting the .text property of whatever object you're using)? I have had many instances where views simply do not re-check or repaint their data, and forcing seems to be the only fix. If this is not good from a user experience standpoint, you might try making the nav/tabbars transparent after the user touches, and before they disappear. This normally extends the view to the full size of the screen.

    ReplyDelete
  10. I found that if you mark the new view you will be pushing onto the navigation stack with the following line hides the tab bar as long as it is on the stack.

    scrollViewController.hidesBottomBarWhenPushed = YES;

    ReplyDelete
  11. If the UITabBarController is pushed by a rootViewController (navigationController). You can try the following:

    First hide the status Bar / Tab Bar;

    [self.navigationController pushViewController:aBlankViewController animated:NO];
    [self.navigationController popViewControllerAnimated:NO];


    You should be able to reclaim the white space, though the screen will shock during the adjustment...

    ReplyDelete
  12. I've experienced a similar issue, this discussion was helpful: UIWebView on iPad size

    Tony's answer helped me discover that when you create a subview it's helpful to setup code similar to this:

    self.tabBarController.tabBar.frame = self.view.bounds;

    ReplyDelete
  13. Put the code in a prepare for segue like this, works perfectly for me:

    - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
    {
    if ([[segue identifier] isEqualToString:@"ViewPhoto"]) {

    ImageView *vc = [segue destinationViewController];

    NSInteger selectedIndex = [[self.tableView indexPathForSelectedRow] row];

    NSString *Title = [photoNames objectAtIndex:selectedIndex];
    [vc setSelectedTitle:[NSString stringWithFormat:@"%@", Title]];

    vc.hidesBottomBarWhenPushed = YES;

    }
    }

    ReplyDelete
  14. Add the extra amt of space to the dimension of the view, so if it was rectangle CGRectMake(0,0,320,460) make it CGRectMake(0,0,320,480)... This has happened to me, Im n ot exactly sure why, it might ahve to do with the underlying view you are putting your text view on top off, but just adding the dimension should do it

    ReplyDelete

Post a Comment

Popular posts from this blog

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex