Showing posts with label iOS 7 status bar overlaps the view. Show all posts
Showing posts with label iOS 7 status bar overlaps the view. Show all posts

Tuesday, January 21, 2014

Views getting hidden behind Navigation bar iOS7

In iOS7,
- View Controllers use full-screen layout.
- Status bar is transparent.
- Navigation bar is translucent(semi transparent) by default, 

and one major problem from these updates developers will face is,
When you run your existing app which is compatible for iOS 7 and below (say minimum deployment target is iOS6.0) then when you run your app in the new Xcode 5.x with iOS7 simulator (either 3.5 or 4 inch) a part or complete subviews of your viewController will go behind navigation bar.

Solution:
Use the below iOS 7 (Xcode5.x) compatible code snippet inside viewDidLoad method of your viewController 

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

As an example below is the graphical representation of this Problem,
1) Before Fix,
In the below image you can see the bordered subview's top portion is getting hidden by navigation bar


2) After fix,
Subview alignment became proper after fix see it in below image, 

A note on edgesForExtendedLayout:
edgesForExtendedLayout is to specify which edges of a view should be extended, regardless of bar translucency. By default, the value of this property is UIRectEdgeAll.

For further information on this topic you can visit Apple's developer document in the following URL,

Wednesday, November 6, 2013

How to fix iOS 7 Status bar overlapping issue and status bar style

Hi folks, today lets see how to fix iOS 7 Status bar overlapping issue and making status bar style compatible in both iOS 6 and iOS 7 or in other words migrating your Xcode 4.x project to Xcode 5.x

      1)   Fixing Status Bar Overlapping issue in iOS 7.
      2)   Making Status Bar text visible in dark background.

1) Fixing Status Bar Overlapping issue in iOS 7 :


In iOS 7 status bar is transparent, and when you run your iOS project from Xcode 5 by selecting iOS 7, 4 inch retina device then your status bar will overlap your navigation bar, something like below,


To fix this issue one approach is as below,
a)  Select your interface builder(.xib) file in Xcode5 and
-                  Select file inspector tab and uncheck “use AutoLayout” checkbox.


b) Move all your UI Elements (views, buttons, imageviews etc) 20 pixels down.

c) Since we have moved all UI Elements to 20pixels down in iOS 6.0 there will be a 20 pixel gap on top of each UI Element so as to fix this, we have an new property in Xcode 5 interface builder called iOS 6/7 deltas.
- Go to Size Inspector tab and change Delta Y value to -20(so that it will work properly in all the iOS versions).


and that’s all status bar overlapping issue fixed.

Now if we run our app then the output is as below,


Status bar is not overlapping my navigation bar now but since my view is having a black or dark background and in iOS 7 status bar is transparent so that my status bar text is not visible at all.

To fix this there are couple of ways one simple approach is,

 2) Making Status Bar text visible in dark background :

      a) Go to info.plist file of your app.
      b) Add a ViewControllerBasedStatusBarAppearance Boolean key if it is not existing and assign value “NO”.
      c) Add “Status bar style” key if it is not existing and select “Opaque black style” value to it.


and that’s all we are done.
Now if i run my app the output is as below,


For complete reference here is a link for Apple's Documentation

Hope this post was helpful, any comments or suggestions is acceptable.