iOS 11 UINavigationBar custom background always extends under status bar

Question

I am applying a custom background to my navigation controller nav bars

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navbar"] forBarPosition:UIBarPositionTop barMetrics:UIBarMetricsDefault];

iOS10

In iOS10 the background is applied correctly and the navbar appears beneath the status bar:

iOS11

In iOS11 however, it looks like the background image is always applied behind the status bar. I have tried different values for 'forBarPosition' but this does't change the behaviour.

I have isolated the issue in a standalone app with a single uinavigationcontroller and a single line of code as above. I am testing this using the iPhone 8 simulator. I am using the standard navigation controller and navigation bar class in my app.

What am I doing wrong?

Answer 1

I ran into the same issue. Like you, forBarPosition did nothing to fix the issue even though it seems it should.

I would call my solution a work around.

The image I was using was 44px high. Since I knew the status bar was 20px, I created a new image that was 64px high. The effect I was going for included extending the image under the status bar and this is working just like I want it to.

The status bar is transparent so you could make the top 20px black or transparent or whatever you want to get your desired effect.

So far this is working for me in the simulator and iPhone SE device both at iOS 11, and iPod touch device running iOS 9.3.5.

Hope this helps you.

EDIT: One additional point. What also worked for me was using a stretchable image. This filled the entire space without repeating as it does in your example, however, the image I was using cannot be stretched so ultimately this did not work for my scenario.