How to Create a Gradient NavBar in Swift 5 and iOS 13

Give your navigation bar a better design

Diego Bustamante
Feb 9 · 3 min read

I remember when I first saw the Photos App in iOS 13, what stood out for me was the gradient navigation bar. Very simple, yet very elegant. I decided to recreate it and share how I recreated it.

Side note: Everything is done programmatically.

New Project and Setting Up the UINavigationController

We will first start in the SceneDelegate.swift file to set up the UINavigationController to programmatically set the rootViewController to be the ViewController wrapped in the UINavigationController.

In the willConnectTo scene function, we will set up the UINavigationController.

If you build and run the file, you should have the NavBar displaying.

I made the background red in the ViewController class to demonstrate NavBar is indeed working

Variables Needed and Setting Up the UICollectionView

Here are the variables needed for the gradient NavBar.

Side note: Skip this segment if you don’t need to create a UICollectionView.

Here are the variables and delegates needed for UICollectionView.

As soon as you try to build that, you will have Swift compiler errors because you will need to conform to the protocols from the UICollectionViewDataSource.

But, as we add the necessary protocols, we will add the other UICollectionView functions as an extension of the ViewController class.

As soon as you run this, you will notice that the UICollectionView is not appearing. That is because we need to anchor it. We can create a function setupCollectionView and call it in the viewDidLoad function.

If you run and build the code, you should now have this:

UIViewController Extensions

Let’s create a new file and name it UIViewControllerExtensions and add a function that will allow us to create a clear navBar.

Side note: When we create the extension, it allows us to call this function in any class of this project rather than coding out the same function, reducing redundancy.

Since we are in this file, let’s also create a function, setupGradient, that will return a gradient. We will need this for later.

Clear NavBar and Gradient

To verify that NavBar is clear and hasn’t disappeared, we can add a title to the NavBar in the ViewDidLoad function.

navigationItem.title = “A NavBar”

Let’s now add the gradient. All we are doing to create the gradient is anchor the gradientView underneath the navBar. We can create the setupGradient function in the ViewController class and call it in the ViewDidLoad function.

Ensure you are calling the functions in the viewDidLoad function as follows:

Once you do all that and run the app, it should look like this:

Link to the GitHub Repo.

Thanks for reading!

Better Programming

Advice for programmers.

Diego Bustamante

Written by

A minimal content creator

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade