Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I've been trying to accomplish the same thing. The method I am using to do this is based on the following concepts:</p> <ol> <li>A background image with a height of 64 points will fill both the UINavigationBar and the UIStatusBar.</li> <li>A background image with a height of 44 points will fill the UINavigationBar and leave the UIStatusBar black. </li> <li>You can add an subview to the top of the current navigationController's view and it will sit underneath the UIStatusBar.</li> </ol> <p>So, first, you need to create two images with your desired UINavigationBar look:</p> <p>A 640x128px image to cover navigation bar and status bar (<strong>ImageA</strong>)</p> <p><img src="https://i.stack.imgur.com/PEX8Y.png" alt="Image that covers both the UINavigationBar and the UIStatusBar"></p> <p>And a 640x88px image to cover the navigation bar but leave the status bar black (<strong>ImageB</strong>).</p> <p><img src="https://i.stack.imgur.com/7sIDD.png" alt="enter image description here"></p> <p>In the <code>application:didFinishLaunchingWithOptions:</code> method, set the background of your UINavigationBar with <strong>ImageA</strong> with <code>[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"ImageA.png"] forBarMetrics:UIBarMetricsDefault];</code></p> <p>When the side menu starts to open, you are going to want switch the UINavigationBar so it uses <strong>ImageB</strong> and create a view which you will add underneath the UIStatusBar. Here is some sample code for doing just that:</p> <pre><code>// Add a property for your "temporary status bar" view @property (nonatomic, strong) UIView *temporaryStatusBar; </code></pre> <p>And in the code where the side menu starts to open:</p> <pre><code>// Create a temporary status bar overlay self.temporaryStatusBar = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]]; self.temporaryStatusBar.backgroundColor = [UIColor yourColor]; [self.navigationController.view addSubview:self.temporaryStatusBar]; // Update both the current display of the navigationBar and the default appearance values [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"imageB.png"] forBarMetrics:UIBarMetricsDefault]; [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"imageB.png"] forBarMetrics:UIBarMetricsDefault]; [self.navigationController.navigationBar setNeedsDisplay]; </code></pre> <p>As the side menu animates open, or as the user pans the menu, all you need to do then is adjust the alpha level of the UIStatusBar overlay. When the side menu is fully open, the UINavigationBar should have <strong>ImageB</strong> as its background image and the UIStatusBar overlay should have an alpha of 0. When the side menu closes, you'll want to replace the UINavigationBar background with <strong>ImageA</strong> and remove the UIStatusBar overlay.</p> <p>Let me know if this works for you!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload