Member-only story

Creating Custom Navigation Bar & Tab Bar For iPhone X

Without writing a single line of code!

Lee Kah Seng
4 min readOct 24, 2017

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

--

--

Lee Kah Seng
Lee Kah Seng

Written by Lee Kah Seng

Support me by becoming a Medium member: https://leekahseng.medium.com/membership ⦿ 🇲🇾 Creator of https://swiftsenpai.com ⦿ iOS developer since 2011

Responses (10)