Status bar and navigation bar appear over my view's bounds in iOS 7

转自:http://stackoverflow.com/questions/17074365/status-bar-and-navigation-bar-appear-over-my-views-bounds-in-ios-7

Question:

I recently downloaded Xcode 5 DP to test my apps in iOS 7. The first thing I noticed and confirmed is that my view‘s bounds is not always resized to account for the status bar and navigation bar.

In viewDidLayoutSubviews, I print the view‘s bounds:

{{0, 0}, {320, 568}}

This results in my content appearing below the navigation bar and status bar.

I know I could account for the height myself by getting the main screen‘s height, subtracting the status bar‘s height and navigation bar‘s height, but that seems like unnecessary extra work.

How can I fix this issue?

Update:

I‘ve found a solution for this specific problem. Set the navigation bar‘s translucent property to NO:

self.navigationController.navigationBar.translucent = NO;
This will fix the view from being framed underneath the navigation bar and status bar.

However, I have not found a fix for the case when you want the navigation bar to be translucent. For instance, viewing a photo full screen, I wish to have the navigation bar translucent, and the view to be framed underneath it. That works, but when I toggle showing/hiding the navigation bar, I‘ve experienced even stranger results. The first subview (a UIScrollView) gets its bounds y origin changed every time.

You can achieve this by implementing a new property called edgesForExtendedLayout in iOS7 SDK. Please add the following code to achieve this,

if ([self respondsToSelector:@selector(edgesForExtendedLayout)])
        self.edgesForExtendedLayout = UIRectEdgeNone;

You need to add the above in your -(void)viewDidLoad method.

iOS 7 brings several changes to how you layout and customize the appearance of your UI. The changes in view-controller layout, tint color, and font affect all the UIKit objects in your app. In addition, enhancements to gesture recognizer APIs give you finer grained control over gesture interactions.

Using View Controllers

In iOS 7, view controllers use full-screen layout. At the same time, iOS 7 gives you more granular control over the way a view controller lays out its views. In particular, the concept of full-screen layout has been refined to let a view controller specify the layout of each edge of its view.

The wantsFullScreenLayout view controller property is deprecated in iOS 7. If you currently specify wantsFullScreenLayout = NO, the view controller may display its content at an unexpected screen location when it runs in iOS 7.

To adjust how a view controller lays out its views, UIViewController provides the following properties:

  • edgesForExtendedLayout

The edgesForExtendedLayout property uses the UIRectEdge type, which specifies each of a rectangle’s four edges, in addition to specifying none and all. Use edgesForExtendedLayout to specify which edges of a view should be extended, regardless of bar translucency. By default, the value of this property is UIRectEdgeAll.

  • extendedLayoutIncludesOpaqueBars

If your design uses opaque bars, refine edgesForExtendedLayout by also setting the extendedLayoutIncludesOpaqueBars property to NO. (The default value of extendedLayoutIncludesOpaqueBars is NO.)

  • automaticallyAdjustsScrollViewInsets

If you don’t want a scroll view’s content insets to be automatically adjusted, set automaticallyAdjustsScrollViewInsets to NO. (The default value of automaticallyAdjustsScrollViewInsets is YES.)

  • topLayoutGuide, bottomLayoutGuide

The topLayoutGuide and bottomLayoutGuide properties indicate the location of the top or bottom bar edges in a view controller’s view. If bars should overlap the top or bottom of a view, you can use Interface Builder to position the view relative to the bar by creating constraints to the bottom of topLayoutGuide or to the top of bottomLayoutGuide. (If no bars should overlap the view, the bottom of topLayoutGuide is the same as the top of the view and the top of bottomLayoutGuide is the same as the bottom of the view.) Both properties are lazily created when requested.

Please refer, apple doc


share|improve this answer

edited Dec 19 ‘13 at 20:17

Andy Obusek
4,22221634

answered Sep 13 ‘13 at 11:52

Nandha
3,9161819

 

2  

It will not compile under iOS6. I think it should be written as performselector... –  Shmidt Sep 16 ‘13 at 9:38
8  

Yes, Thats why I have included the selector check with if condition, if ([self respondsToSelector:@selector(edgesForExtendedLayout)]) –  Nandha Sep 16 ‘13 at 11:40
12  

This would not work if I have no navigation bar. In that case, my view is extends behind the status bar.. – Van Du Tran Sep 24 ‘13 at 14:51
4  

I have the same problem as @VanDuTran. edgesForExtendedLayout does not help if the navigation bar is hidden. –  fishinear Sep 24 ‘13 at 16:23
4  

it works but ... there is no longer translucent effect... how can we preserve translucent effect as well... – Red Devil Oct 16 ‘13 at 19:11

show 9 more comments


up vote60down vote

You don‘t have to calculate how far to shift everything down, there‘s a build in property for this. In Interface Builder, highlight your view controller, and then navigate to the attributes inspector. Here you‘ll see some check boxes next to the words "Extend Edges". As you can see, in the first screenshot, the default selection is for content to appear under top and bottom bars, but not under opaque bars, which is why setting the bar style to not translucent worked for you.

As you can somewhat see in the first screenshot, there are two UI elements hiding below the navigation bar. (I‘ve enabled wireframes in IB to illustrate this) These elements, a UIButton and a UISegmentedControl both have their "y" origin set to zero, and the view controller is set to allow content below the top bar.

This second screenshot shows what happens when you deselect the "Under Top Bars" check box. As you can see, the view controllers view has been shifted down appropriately for its y origin to be right underneath the navigation bar.

This can also be accomplished programmatically through the usage of -[UIViewController edgesForExtendedLayout]. Here‘s a link to the class reference for edgeForExtendedLayout, and forUIRectEdge

[self setEdgesForExtendedLayout:UIRectEdgeNone];

share|improve this answer

edited Sep 13 ‘13 at 12:14

answered Sep 13 ‘13 at 11:56

0x7fffffff
41.6k1587139

 

7  

How do I do the same for just view in a .xib? –  bobics Sep 13 ‘13 at 21:34
2  

I added one label on view and I followed your instruction but this is not working for me –  user1685099 Sep 20 ‘13 at 8:08
2  

@bobics The answer to the XIB question is, "You can‘t." Not through IB anyway. File a radar and hope Apple eventually addresses it. –  Michael G. Emmons Oct 10 ‘13 at 17:51
    

Thanks @0x7fffffff, This was just the info I was looking for and was very helpful. –  campo Oct 10 at 21:06

add a comment


up vote30down vote

I created my view programmatically and this ended up working for me:

- (void) viewDidLayoutSubviews {
    // only works for iOS 7+
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0) {
        CGRect viewBounds = self.view.bounds;
        CGFloat topBarOffset = self.topLayoutGuide.length;

        // snaps the view under the status bar (iOS 6 style)
        viewBounds.origin.y = topBarOffset * -1;

        // shrink the bounds of your view to compensate for the offset
        viewBounds.size.height = viewBounds.size.height + (topBarOffset * -1);
        self.view.bounds = viewBounds;
    }
}

Source (in topLayoutGuide section at bottom of pg.39).


share|improve this answer

edited Jan 3 at 22:48

answered Sep 24 ‘13 at 8:35

Stunner
3,63233171

 

    

Finally found an answer that actually works for this. Good work! –  StuartM Sep 28 ‘13 at 0:26
1  

To solve the problem whereby the view controller‘s view shows up under the status bar when the navigation bar is hidden, this is the code which snaps the view under the status bar. –  MiKL Oct 1 ‘13 at 14:52
    

Note: this will push the bottom of your view off the screen. –  Michael G. Emmons Oct 10 ‘13 at 17:08
1  

Also, unless you are building for only iOS7, the above code will throw an error - topLayoutGuide is iOS7 only. –  Michael G. Emmons Oct 10 ‘13 at 17:11
1  

Also note that when your main view is a UITableView the viewDidLayoutSubviews will get called on each scroll. Your UITableView will be scaled down until its height is 15px. Add a flag to only run this code once. ;)–  Thomas Johannesmeyer Nov 21 ‘13 at 13:14

show 7 more comments


up vote9down vote

If you want the view to have the translucent nav bar (which is kind of nice) you have to setup a contentInset or similar.

Here is how I do it:

// Check if we are running on ios7
if([[[[UIDevice currentDevice] systemVersion] componentsSeparatedByString:@"."][0] intValue] >= 7) {
      CGRect statusBarViewRect = [[UIApplication sharedApplication] statusBarFrame];
      float heightPadding = statusBarViewRect.size.height+self.navigationController.navigationBar.frame.size.height;

      myContentView.contentInset = UIEdgeInsetsMake(heightPadding, 0.0, 0.0, 0.0);
}

share|improve this answer

answered Sep 13 ‘13 at 9:16

Magnus
1,5251225

 

    

what is the requirement to split 7.0 into 7 and 0 ??? @Magnus –  Leena Sep 16 ‘13 at 9:57
2  

why can‘t you directly compare it with 7.0 –  Leena Sep 17 ‘13 at 5:03
    

lol I get it: checking against a specific version with minor added is less robust. But you are checking if the value is BIGGER or equal to so comparing to 7.0 would do just fine here ;) –  EeKay Sep 18 ‘13 at 6:36
1  

@leena - This is features in 7.x and later - so I check if the version is 7 or greater and skip the minor revisions in the check. –  Magnus Sep 24 ‘13 at 8:14
1  

I Had an issue with my tableView beeing displayed behind my Tabbar. Which made the last row of my table never to scroll above the Tabbar. I fixed it like that:                                                      myTableView.contentInset =  UIEdgeInsetsMake(0, 0.0, TabbarHeight, 0) –  James Laurenstin Oct 22 ‘13 at 15:49 

show 2 more comments


up vote8down vote

edgesForExtendedLayout does the trick for iOS 7. However, if you build the app across iOS 7 SDK and deploy it in iOS 6, the navigation bar appears translucent and the views go beneath it. So, to fix it for both iOS 7 as well as for iOS 6 do this:

self.navigationController.navigationBar.barStyle = UIBarStyleBlackOpaque;
if ([self respondsToSelector:@selector(edgesForExtendedLayout)])
    self.edgesForExtendedLayout = UIRectEdgeNone;   // iOS 7 specific

share|improve this answer

answered Sep 21 ‘13 at 5:18

Raj
3,09673465

 
add a comment

up vote8down vote

In your apps plist file add a row, call it "View controller-based status bar appearance" and set it to NO.


share|improve this answer

edited Jan 3 at 21:29

Peter Mortensen
7,65585589

answered Sep 19 ‘13 at 13:45

Idan
4,55632551

 

1  

Works for me, thanks! –  Jim True Oct 23 ‘13 at 14:30

add a comment


up vote7down vote

The simplest trick is to open the NIB file and do these two simple steps:

  1. Just toggle that and set it to the one you prefer:

  1. Select those UIView‘s/UIIMageView‘s/... that you want to be moved down. In my case only the logo was overlapped an I‘ve set the delta to +15; (OR -15 if you chose iOS 7 in step 1)

And the result:

 


share|improve this answer

edited Jan 7 at 10:21

answered Sep 20 ‘13 at 10:27

Riskov
19117

 

4  

It works, but this look like a hard to maintain solution. It would be best to just fix the problem instead of patching it. –  NLemay Sep 20 ‘13 at 21:31
    

it would be best to do it programmatically for all view‘s subviews because it doesn‘t work if applied to main view –  wildmonkey Oct 23 ‘13 at 15:50

add a comment


up vote3down vote

I would like to expand on Stunner‘s answer, and add an if statement to check if it is iOS-7, because when I tested it on iOS 6 my app would crash.

The addition would be adding:

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)

So I would suggest adding this method to your MyViewControler.m file:

- (void) viewDidLayoutSubviews {
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0) {
        CGRect viewBounds = self.view.bounds;
        CGFloat topBarOffset = self.topLayoutGuide.length;
        viewBounds.origin.y = topBarOffset * -1;
        self.view.bounds = viewBounds;
    }
}

share|improve this answer

edited Jan 3 at 21:39

Peter Mortensen
7,65585589

answered Oct 1 ‘13 at 15:36

werdsackjon
13518

 
add a comment

up vote2down vote

I have a scenario where I use the BannerViewController written by Apple to display my ads and a ScrollViewController embedded in the BannerViewController.

To prevent the navigation bar from hiding my content, I had to make two changes.

1) Modify BannerViewController.m

- (void)viewDidLoad
{
   [super viewDidLoad];
   float systemVersion = [[[UIDevice currentDevice] systemVersion] floatValue];
   if (systemVersion >= 7.0) {
      self.edgesForExtendedLayout = UIRectEdgeNone;
   }
}

2) Modify my ScrollViewContoller

- (void)viewDidLoad
{
    [super viewDidLoad];
    float systemVersion = [[[UIDevice currentDevice] systemVersion] floatValue];
    if (systemVersion >= 7.0) {
        self.edgesForExtendedLayout = UIRectEdgeBottom;
    }
}

Now the ads show up correctly at the bottom of the view instead of being covered by the Navigation bar and the content on the top is not cut off.


share|improve this answer

answered Oct 21 ‘13 at 16:35

Xavier John
428411

 
add a comment

up vote1down vote

To me, the simplest solution is to add two keys into the plist


share|improve this answer

answered Oct 3 ‘13 at 10:28

giuseppe
1,448723

 

    

+1, I had the "Status bar initially hidden"=YES, but when adding "View controller-based status bar appearance"=NO I got rid of the status bar. –  Jonas Byström Oct 28 ‘13 at 22:32

add a comment


up vote1down vote

Add the key "View Controller-based status bar appearance" from the dropdownlist as a row in info.plist. Something like this:


share|improve this answer

edited Jan 3 at 21:36

Peter Mortensen
7,65585589

answered Sep 23 ‘13 at 21:17

N.Ramos
591416

 

3  

Does not help... –  giuseppe Oct 3 ‘13 at 9:38
    

interesting.it helped on my cocos2d projects.as I toggle this option I can see the top status bar is completely has gone or appear. –  N.Ramos Oct 19 ‘13 at 5:06 

add a comment


up vote0down vote

Steps For Hide the status bar in iOS 7:

1.Go to your application info.plist file.

2.And Set, View controller-based status bar appearance : Boolean NO

Hope i solved the status bar issue.....


share|improve this answer

Status bar and navigation bar appear over my view's bounds in iOS 7

时间: 2024-08-26 06:21:44

Status bar and navigation bar appear over my view's bounds in iOS 7的相关文章

与Status Bar和Navigation Bar相关的一些东西

与StatusBar和NavigationBar相关的东西有两种,一是控制它们的显示与隐藏,二是控制它们的透明与否及背景. 在2.3及以前,StatusBar只能显示与隐藏,即全屏模式,通过WindowManager.LayoutParams.FLAG_FULLSCREEN来实现: getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); 并可通过以下Flag使Activity的布局可以使用整个屏幕,状态栏会显示到Acti

Navigation Bar 和 Status Bar 的设置

概念:所谓的UINavigationItem就可以理解为Navigation Bar中的内容,通过编辑UINavigationItem, 我们可以使得在Navigation Bar中显示想要的东西,比如设置标题.添加按钮 navigationItem和UINaviagationController平级, 1. navigationBar自己有很多属性:比如 barStyle .背景 backgroundColor .frame属性(可以获得宽高这些信息) 2. 可以通过setBackground

[工作积累] Android: Hide Navigation bar 隐藏导航条

https://developer.android.com/training/system-ui/navigation.html 1 View decorView = getWindow().getDecorView(); 2 // Hide both the navigation bar and the status bar. 3 // SYSTEM_UI_FLAG_FULLSCREEN is only available on Android 4.1 and higher, but as 4

UINavigationController出现nested push animation can result in corrupted navigation bar的错误提示

今天在测试过程中,出现了这样一个bug,分别有两种情景: (前提是:app是基于UINavigationController构建的) 1.从Controller-A中push进来B.在B中点击返回,返回的界面为黑色一片.再做返回操作就crash了. 如图1: 2.从Controller-A中push进入B,此时B中tableview出现错位现象(图2),tableview被navigationbar覆盖了一部分,在B中再push一个C进来.此时只显示了C的navigationbar,但下方的vi

配置navigation bar外观

/* 配置navigation bar外观开始 */ self.navigationBar.translucent = YES; self.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:NSForegroundColorAttributeName]; self.navigationBar.tintColor = [UIColor whiteCol

Android判断Navigation Bar 是否透明

设置Navigation Bar 透明 getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); 或者Theme中添加  <item name="android:windowTranslucentNavigation">true</item> /** * Convenience function to set the flag bits as specified i

用swift实现navigation bar的完全透明 &amp; navigation bar中button的字体大小调整

这几天在项目中遇到的关于navigation bar的一些小问题以及解决的方法记录一下吧: 1.  完全透明navigation bar 有时候我们想要navigation viewcontroller顶部的navigation bar变得完全透明,我们首先想到是从story board下手,但是尝试了半天,也不能达到完全透明的效果 选择这里的Translucent Navigation Bar只能让bar变成那种可以稀释背景色的毛玻璃的效果,那么究竟应该如何才能把整个navigation ba

nested push animation can result in corrupted navigation bar

2014-07-05 17:11:20.594 SevenStars[2185:60b] nested push animation can result in corrupted navigation bar 2014-07-05 17:11:21.005 SevenStars[2185:60b] Finishing up a navigation transition in an unexpected state. Navigation Bar subview tree might get

iOS开发 : Navigation Bar的简单设置

前面的一篇文章<iOS开发16:使用Navigation Controller切换视图>中的小例子在运行时,屏幕上方出现的工具栏就是Navigation Bar,而所谓UINavigationItem就可以理解为Navigation Bar中的内容,通过编辑UINavigationItem,我们可以使得在Navigation Bar中显示想要的东西,比如设置标题.添加按钮等. 这篇博客将会以一个小例子来演示如何设置UINavigationItem. 现在我用的是Xcode 4.3,在使用上跟X