Thursday, September 26, 2013

iOS7 and the status bar overlay problem

If you are porting an iOS app to iOS7 you have run into this problem. Not to give away the ending but the solution is provided to you by Apple in the Interface Builder. Yep, it is that easy.

Problem

in iOS7 the status bar overlays with your views at all times. This is a new behavior, in previous releases the status bar had its own real estate and it was not sharing it. An example of the problem from our app dog stories, in stores soon ;-)
our app in iOS6

our app in iOS7 prior to fixing it

Solution

  1. in IB, select the File inspector
  2. go to view as and switch to iOS6
  3. select all elements in the view that you want to move when the app is run on iOS7, that is, select all UI object like buttons, tables etc. that you need to adapt. In our case above, we wanted the camera button, the pull down, the search button and the table to all move down 20 points if the app is running on iOS7
  4. switch to the Layout inspector
  5. under iOS6/7 delta, put 20 in the deltaY 
    1. if needed, like in our case for the table, we also subtracted -20 from the delta height
  6.  go back to (1) and switch back to iOS7 and rejoice, you are done
Update: iOS7 will by default try to slide UITableViews from under the header/footers by adding about 30pts, so your first cell will look like it is starting lower than it should. Read this post to learn how to remove that annoying blank header on top of you table! http://stackoverflow.com/questions/18388429/uitableview-is-starting-with-an-offset-in-ios7

our app in iOS7 with the element shifted down by 20 pts and the table height re-sized to -20pts

1 comment: