Create App Store-like navigation bar

If you’re a developer, you want to create great apps. On almost every step, you can find great user interfaces. One of the simplest and coolest user interfaces is inside an App Store application. This time I want to create the same user interface of navigation bar like there is one in the App Store application.

Creating views in storyboard

I’ll create a simple user interface with a navigation controller, toolbar, and segmented control. For better understanding, I’ll also add a simple table view.

Now I need to add constraints, and there is only one thing to remember. If you want to see a bottom border on the toolbar, the vertical spacing between a toolbar and a table view must be bigger than 0 (in this case is 1). I also created a detailed view controller for representation purposes to show the visibility of the navigation bar’s bottom border.

post_create-app-store-like-navigation-bar_image-1

Making changes in the code

If I start the application now, the user interface will be good, but not good enough to be like one in the App Store application. So, I need to make some modifications to the code.

The first thing to do is changing the toolbar’s border position. In this case, it should be on the bottom, not at the top like it is now. So, to do that, I’ll add this code to the ViewController class.

Now, if I start the application, it will look like this.

post_create-app-store-like-navigation-bar_image-2

This shows us, that I’m on the right track. The next thing to do is to remove the navigation bar’s bottom border. There are many ways to do that, but I will do this like an extension to a UINavigationBar. This way is good because, I can hide and show the navigation bar’s border when that is needed. In some examples which you can find on the web, the border is replaced with an empty UIImageView, so there is no way for getting back a stock border.

So, in the code below you can see three methods that extend the UINavigationBar class. The most important method is findBorderLine which returns UIImageView which, in this case, represents the border itself. And, in the showBorder and the hideBorder methods I simply change the status of a hidden property.

Now, I’ll change ViewController class by overriding method viewWillAppear and adding this line to it:

Overriding a method viewWillAppear instead of viewDidLoad is better in this case, because every time a view is shown, the navigation bar’s border will be shown or hidden. If I add this code to a viewDidLoad method, this will be only executed once, and if I go to a detailed view where the border is shown and go back, the border will be shown because the method viewDidLoad is not executed again to make it hidden again.

There is only one thing to make this work like in the App Store app. I’ll create a DetailViewController in which I’ll override a method viewWillAppear and call this code inside:

Now, I’ll add some values to the table view, and when I tap on the cell, an application will open as a detailed view.

post_create-app-store-like-navigation-bar_image-3

Navigation bar shadow problem when performing a segue

There is only one and the last thing to say. Sometimes, when performing segues, the navigation bar has some problems with a shadow.

post_create-app-store-like-navigation-bar_image-4

To remove the unwanted shadow like on the image above, just go to Navigation Controller in the storyboard and add an user-defined runtime attribute:

post_create-app-store-like-navigation-bar_image-5