How to Fix the Status Bar in Your iOS App - dummies

How to Fix the Status Bar in Your iOS App

By Neal Goldstein, Dave Wilson

Fixing the status bar is something you’ll have to address in iOS 7. It’s really not difficult, but it helps to have worked with views and their settings in order to understand it.

In iOS 7, the status bar is transparent, and that’s where the issue arises. The issue is that the web view is showing through the transparent status bar. That’s a no-no. It distracts from the status bar information, it destroys the consistency of the iOS interface, and it looks strange to most people.

There are three standard solutions. The easiest is to use a navigation controller to display your content (your main view). A navigation controller has the logic built into it to display an appropriate background for the status bar and to position its content views so that they are not behind the status bar. (This is one of the reasons that the problem doesn’t occur so frequently on iPhone apps.)

You also can create a nondistracting background image to place under the status bar and above your view’s content.

The most robust solution is to use Auto Layout. So far, you’ve mostly used Auto Layout for pinning views and embedding them in other views. There’s a great deal more to Auto Layout, and here’s how you can use it in this case.

First of all, as you can easily find out, the Status Bar is 20 points high. You can go into the Size inspector in the Utility area, and manually set the origin of your top view to 0, 20 so it will be placed below the Status bar.

And when Apple introduces an iOS device with a new form factor on which the Status bar is not twenty points high, your app will break. Now there’s no guarantee that such as device will be introduced next week, but the odds are pretty good that it will happen (and probably at the most inconvenient time for you).

Start by recognizing that the Status bar is transparent and it’s going to be at the top of the screen. In the case of your Map controller, you have that transparent Status bar at the top of the screen. You want your toolbar below it, and you want your web view directly below the bottom of the toolbar.

Now that you’ve recognized that the Status bar is going to be at the top of the screen unless you hide it, here are the steps to position the other views properly.

  1. In the storyboard, open the Document Outline and the Map Controller – Map Scene.

  2. Notice that you have Top Layout Guide and a Bottom Layout Guide inside the scene.

    They are placed there automatically.

  3. Control-drag from the Toolbar to the Top Layout Guide.

  4. Select Vertical Spacing in the popover that appears.


  5. With the Toolbar still selected, choose the Size inspector in the Utility area. In the list of constraints, you’ll set Top Space to: Top Layout Guide.

    That is the constraint that you just created.


  6. Click the Gear Wheel on that constraint and choose Select and Edit.

  7. The constraint should have been set.

    Verify that the pop-up menu is set to Equal, the Constant is set to 0, and the Priority is set to 1,000. That is the highest value and it means that no other constraint can override this one.

  8. If you have any other constraints, use the Gear wheel to delete them.

    These extra constraints can accumulate as you are experimenting.

  9. Using Editor→Pin, pin the leading and trailing spaces to the superview.

  10. Use the Size inspector to verify that the Toolbar height remains 44.

    You may want to run the app now to verify that the toolbar no longer overlaps the status bar.

  11. Control-drag from Map View to Toolbar.

  12. Select Vertical Spacing as you did in Step 4.

  13. Choose Editor →Resolve Auto Layout Issues →Add Missing Constraints.

    If the command is grayed out, just verify that you have top, bottom, leading, and trailing constraints for the web view. If not, make certain the toolbar is selected and then use Editor →Resolve Auto Layout Issues →Clear Constraints to try again.

    Xcode pins the bottom space to the superview and aligns leading, trailing, and top to the toolbar. The webview is pinned to the toolbar which is pinned to the superview.

  14. Verify that the constraints are working by rotating the simulator using the Hardware menu.

Rotating the simulator is the acid test of Auto Layout. Use the keyboard equivalents as you are working on your storyboard to constantly check that your beautiful landscape layout is equally beautiful in portrait.