Create App Store-like navigation bar

When you’re an developer, you want to create great apps. On almost every step, you can find great user interfaces. One of the simplest but coolest user interface 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, vertical spacing between toolbar and a table view must be bigger than 0 (in this case is 1). I also created a detailed view controller for representation purpose to show the visibility of 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 in the code.

First thing to do is changing 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 my ViewController.swift.

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. Next thing to do is to remove 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 navigation bar’s border when that is needed. In some examples which you can find on the web, border is replaced with empty UIImageView, so there is no way for getting back a stock border.

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

Now, I’ll change ViewController, 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 detail view where border is shown and go back, the border will be shown because method viewDidLoad is not executed again to make it hidden again.

There is only one thing to make this works 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 table view, and when I tap on cell, an application will open a p 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 storyboard and add user defined runtime attribute:

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