How to Build the Facebook Paper Status Bar Hover
Among the many great little design details in the new Paper by Facebook app released last week, this status-bar-hover thing caught me by surprise. My first reaction was “Hey, they can’t do that!”, but of course (and to quote my favorite line from Independence Day) well they just eh… did.
After a little digging around, I’ve figured out how to do it and it involves using multiple UIWindow instances. I’ve always thought that iOS applications could only ever use one
UIWindow, but that turns out to be not the case. It’s perfectly alright to have more than the
[UIApplication sharedApplication].keyWindow which you usually create in the AppDelegate (or Storyboard creates it for you).
UIWindow is just a subclass of
UIView, but it’s also a special type of view that’s specifically for providing an area for displaying views and for distributing events to those views. A
UIWindow instance has a property called
windowLevel that allows you to specify where on the z-index the window appears relative to other windows in the app. Most of the time you only have your main window with a
windowLevel set to
UIWindowLevelNormal, and then occasionally a
UIAlertView window is displayed with a
So to create a new
UIWindow and have it’s contents appear above the status bar, all you have to do is this:
1 2 3 4 5 6
That will display the contents of
ForegroundViewController on top of the status bar. I’ve put together a demo app with the above technique (combined with a sprinkle of a pan gesture and dynamics) that looks like this:
Download the project over at github.
The demo I built is probably not the end of the story. Check out Shaun Ervine’s post on using multiple
UIWindow instances for some possible issues / gotchas in using this technique.