justWorks: 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.