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

Lets first create a new project as a single-view app.

We will first start in the file to set up the to programmatically set the to be the wrapped in the .

In the scene function, we will set up the .

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

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

Variables Needed and Setting Up the UICollectionView

Side note: Although the is not necessary for creating the gradient , I will quickly create one just to demonstrate that the gradient will work as it should, later in this tutorial.

Here are the variables needed for the gradient .

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

Here are the variables and delegates needed for .

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 .

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

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

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


UIViewController Extensions

The next step is to make a clear . We will start this by creating an extension of the .

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

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, , that will return a gradient. We will need this for later.


Clear NavBar and Gradient

In the class, in the function, we can call the function we created in the file.

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

navigationItem.title = “A NavBar”

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

Ensure you are calling the functions in the 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.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

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