Clip
Clip

Reputation: 3078

iOS hidesBarsOnSwipe status bar background color

When I swipe and hide the navigation bar with the hidesBarsOnSwipe property the status bar has a clear background. How can I set the background of the status bar to the same color as the navigation bar? Here are a few pictures showing my problem, this is all contained in a UITableViewController.

enter image description here

Separate

enter image description here

Separate picture, looks like one big one. enter image description here

Upvotes: 3

Views: 2010

Answers (3)

Zhou Haibo
Zhou Haibo

Reputation: 2078

Per skg's answer, I add a relative height for status bar according to iOS version.

    self.navigationController.hidesBarsOnSwipe = true;
    
    // add a UIView as subView to navigationController
    CGFloat statusBarHeight;
    
    if (@available(iOS 13, *)) {
        NSArray *windows = UIApplication.sharedApplication.windows;
        UIWindow *keyWindow = nil;
        
        for (UIWindow *window in windows) {
            if (window.isKeyWindow) {
                keyWindow = window;
                break;
            }
        }
        statusBarHeight = keyWindow.windowScene.statusBarManager.statusBarFrame.size.height;
        NSLog(@"statusBarHeight: %f", statusBarHeight);
    } else {
        statusBarHeight = UIApplication.sharedApplication.statusBarFrame.size.height;
    }
    
    UIView *statusBarBG = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), statusBarHeight)];
    statusBarBG.backgroundColor = [UIColor systemBackgroundColor];
    [self.navigationController.view addSubview:statusBarBG];

Upvotes: 0

skg
skg

Reputation: 141

Adding to George Huber's answer. I solved this issue programmatically by adding a 20pt height UIView as a subview of the navigationController's view property -- in viewDidLoad method.

- (void)viewDidLoad
{
  [super viewDidLoad];

  UIView *statusBarBG = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 20)];
  statusBarBG.backgroundColor = [UIColor navBar];
  [self.navigationController.view addSubview:statusBarBG];

  // REST OF CODE
}

Upvotes: 1

handlebar_
handlebar_

Reputation: 441

I've come across the same issue, and was able to solve it. I'm fairly new to iOS dev, and I don't imagine this solution to be foolproof. I couldn't find any good answers elsewhere, so here's how I overcame it:

  1. I converted from a UITableViewController over to UIViewController with a nested UITableView. Note, double check that the delegate to the child tableview is set to the UIViewController.
  2. I Added a view with a height of 20px and a background colour that you want to set as the "background" to the status bar. Set the constraints on that view as follows: bar background constraints

  3. On your table view, set the constrains to be basically full screen. One important note here, the top constraint is to "Top Layout Guide.Top" and not to "Top Layout Guide.Bottom". By default I believe this constraint ties to the bottom. Double clicking on the constraint allows you to adjust it to the top. Without this, any table header cells weren't positioned properly for me enter image description here

Hope that helps.

Upvotes: 6

Related Questions