When Apple introduce the all new edge-to-edge display during iPhone X announcement, all developers can foresee that navigation bar and tab bar will be the most affected UI component in this edge-to-edge display. In fact, Apple has update iOS (iOS11) to be able to automatically render the native UINavigationBar and UITabBar base on different iPhone model. However, in order to create a custom navigation bar or tab bar, we will have to handle these differences manually. In this article, I will show you how to create a navigation bar and tab bar with custom background image that adapt to the iPhone X edge-to-edge screen size.

If you are not familiar with “Safe Area Layout Guides” that being introduced on iOS11, I would suggest you to take a look at the following article before continuing.

Custom Navigation Bar

Adding Subview In Safe Area

Let’s get started by adding a subview (green colour view) into the view controller. For demo purpose, buttons and label are added into the subview. This subview will be our custom navigation bar. Let’s setup auto layout accordingly.

Setting up auto layout constraints on custom navigation bar

NavBar.Height = 44 NavBar.Top = Safe Area.Top NavBar.Leading = Safe Area.Leading NavBar.Trailing = Safe Area.Trailing

Note that all the constraints we set are between the custom navigation bar and the safe area layout guides. This is to ensure that all the UI elements in the custom navigation bar will always be within the safe area.

Adding Image View as Background

The next thing we need is an image view that display our background image. Before setting up auto layout, make sure the image view is placed behind the custom navigation bar.

Setting up auto layout constraints on image view

Image View.Top = Superview.Top Image View.Leading = Superview.Leading Image View.Trailing = Superview.Trailing Image View.Bottom = NavBar.Bottom

Note that the top, leading and trailing constraints are all between the image view and it’s superview. This is to ensure that the background image will extend to the edge of the screen in both portrait and landscape orientation.

For the bottom constraint, we will set it between NavBar.Bottom and Image View.Bottom . The purpose of this is to make sure that the image view will cover up the entire custom navigation bar.

The Final Touch Ups

At this stage, all the essential components have been properly configured, however there are still some final touch ups needs to be done.

Set the custom navigation bar (green colour view) background colour to “clear colour”.

Setting “clear colour” on navigation bar

Set the desire background image as image of the image view. Make sure the content mode is “Aspect Fill” and “Clip to Bounds” is checked.

Configuring image view

Congratulation!! You have successfully created a navigation bar with custom background image that support iPhone X edge-to-edge screen size.

Navigation bar with custom background image

Adjusting Navigation Bar Height

By using the auto layout configuration as discussed above, it is actually very easy to adjust the height of the navigation bar. Just adjust the custom navigation bar height constraint’s constant value, the background image will automatically adjust it’s height to fill up the entire navigation bar.

Result of adjust navigation bar height

Custom Tab Bar

By applying the tricks and concept that we used in creating a custom navigation bar, the solution for creating a custom tab bar is actually quite straight forward. I will leave it to you to work it out! 💪

However if you are having difficulty figuring it out, feel free to download the sample project that includes the solution for both custom navigation bar and custom tab bar.

Here’s the final product…

Portrait mode