SteveX Compiled

Translucent navigation bars are cool. The content that scrolls up off the visible area alters the look of the navigation bar. But they do introduce some complexity, and sometimes you just don’t need it, because your content doesn’t scroll.

So let’s say you’ve got an app that has some content that does scroll, like a UITableView, so you turn on the translucent navigation bar. But then you want to push a view controller that doesn’t scroll.  

So you go into Interface Builder, select your view controller, and turn off “Extend Under Top Bars”.

But now you get this:

It’s almost as the invisible content underneath the translucent navigation bar was black. And that’s because it probably is.

This looks ugly, and it looks especially ugly when it’s animating in, because the white turning black is part of the push animation.

The best way I’ve found to fix this is to put a view above your main view, that acts as a white filler that the navigation bar can use for its translucency.

Drop in a new view, and update its size and position so that it’s above the navigation bar.  You may want to calculate the navigation bar height at runtime, but here I’m just using the size that’s applied since the dawn of iOS, 64 points:

Make sure to set up the autoresizing mask, or constraints, so it adjusts automatically for different device sizes.

End result?  No more smudge underneath the navigation bar.

Much nicer.

 

This entry was posted on Sunday, September 13th, 2015 at 7:24 am.