14

In storyboard, in a view controller I tried add a navigation bar under the status bar, running it, it is transparent and shows a label that's supposed to be blurred, like by navigation bar.

enter image description here

But when placing the same view controller embedded in a navigation view controller, the underneath background image could be blurred, which is my intention.

enter image description here

What are these two way different results? What need to do for the firs method to make status bar blur?

Thanks!

Shekhar Gupta
  • 6,206
  • 3
  • 30
  • 50
S1U
  • 825
  • 2
  • 14
  • 26
  • 1
    @Caleb see http://meta.stackexchange.com/questions/94465/should-moderators-enforce-ndas-for-software-vendors – Paul Peelen Aug 19 '13 at 18:50
  • 2
    @Caleb - Also, my thoughts about the NDA and Stack Overflow can be found in this answer on Meta: http://meta.stackexchange.com/questions/184625/why-is-there-an-ios-7-tag/184635#184635 – Brad Larson Aug 19 '13 at 20:14
  • @BradLarson Perhaps I should make some time to respond to your meta thread instead of doing it here. Briefly, we have a history of closing questions that violate the iOS NDA, and I think it's important to *at least* mark such questions with a comment. If you're telling me that your position is the position of all the SO moderators, or of SE generally, I don't mind not voting to close on that basis. OTOH there's clear value in closing questions that can't be answered. – Caleb Aug 20 '13 at 01:45
  • 2
    now we can start to discuss it, right? – S1U Sep 11 '13 at 20:25
  • FWIW I'm having the same problem and my hierarchy is something like Nav Controller > View Controller > Table view. If I hide the navigation bar I see the transparent status bar, if the nav bar isn't hidden everything is fine. Haven't made much progress beyond that. – Matt Hall Sep 12 '13 at 01:50

6 Answers6

4

In iOS 7 the status bar is transparent by default. The blurring you're seeing when there's also a navigation bar is actually created by the navigation bar. So to create the effect you're looking for without a navigation bar, you need to position a view that produces a blurring effect beneath the status bar.

For reference, add your view with a frame provided by:

CGRect statusBarFrame = [[UIApplication sharedApplication] statusBarFrame];
Matt Hall
  • 2,569
  • 2
  • 23
  • 33
  • Hi, thanks for your hint. but I'm not sure how to proceed with yours. Could you tell more? – S1U Sep 13 '13 at 02:18
  • Let me try to rephrase in case it helps: in iOS the status bar is transparent, and view controllers take up the full screen by default. So that's the big change, it took me a bit to get used to that myself (and hopefully I'm not wrong here, I've just been working with iOS 7 for a couple weeks). So you just need to put a view underneath the status bar in whatever color you want. The navigation controller bar does this for you, when you don't have a nav bar you have to do it yourself. Is that any clearer? – Matt Hall Sep 13 '13 at 17:05
  • Then how to make the status bar translucent after making a frame? – Kyle Xie Sep 25 '13 at 01:00
  • 1
    This solution worked best for me. For those wondering, I created a UIView with a solid background color (you can make it with an alpha so its translucent), and added this view to my navigationController's view ([self.navigationController.view addSubview:customStatusBar]) – LilDwarf Dec 16 '13 at 22:05
3

I know this is old, just for reference, I solved this by setting self.navigationController.navigationBar.clipToBounds = NO

AuA
  • 481
  • 1
  • 5
  • 11
2

I haven't tested this completely, but go to your plist file and check the following settings:

"View controller-based status bar appearance": If this is set to "Yes", then it should display a status bar that is unique to each View Controller, which might be what you need.

"Status bar style": You may set this to three different styles: Opaque black, Gray, and Transparent black.

Let me know if this worked for you.

w3bshark
  • 2,700
  • 1
  • 30
  • 40
1

UINavigationController will alter the height of its UINavigationBar to either 44 points or 64 points, depending on a rather strange and undocumented set of constraints. If the UINavigationController detects that the top of its view’s frame is visually contiguous with its UIWindow’s top, then it draws its navigation bar with a height of 64 points. If its view’s top is not contiguous with the UIWindow’s top (even if off by only one point), then it draws its navigation bar in the “traditional” way with a height of 44 points. This logic is performed by UINavigationController even if it is several children down inside the view controller hierarchy of your application. There is no way to prevent this behavior.

It looks like you are positioning your view hierarchy in the first example starting at the point (0,20). Also, is that a UIToolbar or a UINavigationBar? If it's the latter, why are you using it by itself and not using it inside of UINavigationController?

If you do not use UINavigationController and are instead using custom view controller containers, you'll need to position your views accordingly.

See this answer for a thorough explanation.

Community
  • 1
  • 1
jaredsinclair
  • 12,687
  • 5
  • 35
  • 56
1

I have similar UI design and based on Matt Hall answer and some article I've googled, I come up with something like this:

- (void)viewDidLoad {
  [super viewDidLoad];

  if (NSFoundationVersionNumber>NSFoundationVersionNumber_iOS_6_1) {
    CGRect statusBarFrame = [self.view convertRect: [UIApplication sharedApplication].statusBarFrame fromView: nil];
    UIToolbar *statusBarBackground = [[UIToolbar alloc] initWithFrame: statusBarFrame];
    statusBarBackground.barStyle = self.navBar.barStyle;
    statusBarBackground.translucent = self.navBar.translucent;
    statusBarBackground.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth;
    [self.view addSubview: statusBarBackground];
  }
}

Where self.navBar points to navigation bar added in storyboard. This is needed only in case when it runs on iOS7 that is why I've added this condition (my app has to support iOS5).

This works like a charm.


alternative approach (enforce status bar size) is also good:
- (void)viewDidLoad {
  [super viewDidLoad];

  if (NSFoundationVersionNumber>NSFoundationVersionNumber_iOS_6_1) {
    CGRect statusBarFrame = [self.view convertRect: [UIApplication sharedApplication].statusBarFrame fromView: nil];
    self.navBar.frame = CGRectUnion(statusBarFrame, self.navBar.frame);
  }
}


I've found another solution I think this is best since it involve only storyboard and no code is required.
  1. Switch storyboard view to 6.1 mode (view as: iOS 6.1 and Earlier) change view mode
  2. Select problematic UINavigationBar
  3. in size section add 20 delta height in "iOS6/7 Deltas" correct size of navigation bar
  4. Switch back view to 7.0 mode (view as: iOS 7.0 and Later), and be happy with result.
Community
  • 1
  • 1
Marek R
  • 32,568
  • 6
  • 55
  • 140
0

when you embed view controller with navigation view controller that time you will see navigation bar to all the view controller you are pushing to from same view controller. In your first case you are adding the navigation bar object, insted of that you can select view controller from storyboard , go to attributes inspector tab & from their select Top bar as translucent navigation bar. enter image description here

swapnali patil
  • 304
  • 2
  • 17