Are you having a hard time building out custom UINavigationBars? Well today is
your lucky day, because in this tutorial I will show you how you can create a
transparent UINavigationBar. So let's hit that subscribe button, open up Xcode
and let's just jump right into it. So let's create those custom navigation bars.
Now I have set up a SwiftUI project but all of this applies in UIKit.
I have created a SwiftUI project because honestly navigation
views can be added real, real simple and at the end of this video I will show you
a real nice trick that you can do in order to avoid some scrollable animation issues.
So go ahead and make sure you check out in the end of the video too.
So you can stay to the end of the video. Now what I have added here is a simple
navigation view inside that it's a scroll view and I have added that
navigation bar start on that scroll because yes the navigation bar title has
to be added inside on the inside view that is inside the navigation view and
on the scroll view I have added a for each loop one to 50 and I'm just
adding the text with that number and I'm padding it. So let's just a built and run
and see how all of this looks and we will see a basic navigation bar and this
is a large navigation bar and it's when I just scroll all the way up
its going to be moved inline. So this is the basic one. This is what we are going
to customize. So let me tell you right off the bat that in SwiftUI you cannot
really change the navigation bar style or title and so on, you have to use an
underlying framework that is kind of UIKit like it's a UINavigationBar dot
appearance. So that is what we are going to do and yeah this is why all of these
works in UIKit as expected. So I'm just going to go to our SceneDelegate and you
can see that I have already created a file private function setup appearance
and that is called at the end of the session scene will connect to session
with options and connect options. So that is what we are going to type out here today.
So what we are going to do here is use UIKit elements and there might be
some auto completion issues here but I will type everything out so you will see
and we are going to use UINavigationBar.appearance() and the first thing
you want to do and I will just remove the background of the navigation bars
and then you will be able to customize it to your hard content.
So first thing that we want to do is set the background image as a UIImage a
simple initialize UIImage without any frame for the bar matrix and that is
UIBarMetrics.default and let's just start typing in set background image and
as you can see it's not really updating, it doesn't have any auto completion but
bear with me it will be a okay. So background image and we will use UIImage
for and that will be UIBarMetrics.default Yes! UIBarMetrics.default.
Okay! Now if you build and run this you might not get any effect, bear
in mind all of these need to be combined in order to get the desired effect.
The next one is that we want to kind of remove the shadow image and again we are
going to add a simple initialized UIImage. So again UINavigationBar and let me
just move this out of the way so we can see even better dot appearance and
shadow image equals to UIImage and initialize UIImage and you can see it's
kind of purple out the text that is a meaning of that okay this is a write code.
Now next we want to set the translucency to true.
So UINavigationBar.isTranslucent equals to True, okay.
That should be okay. Is Translucent, oh we need appearance.
There we go and next up we want to set the background color to be clear.
So UINavigationBar.appearance() and background color and that is clear and yeah
this was auto-completed. Yep! This is plain old UIKit stuff
and that is what we are moving away from but currently you can do this with appearance.
Okay, so let's hit command R and see what we got so far.
Okay! And great, because now you can see that all of those cells are behind that
navigation bar. So that means that this is actually a translucent navigation bar.
How awesome is that. Now next up we want to modify the
navigation bar and so on with some title text attributes. So let me just go and
I have a little space here and this will be a little bit hard to type out but
bear with me here we will have title text attributes equals and just check
here, yes. It will be an array of NSAttributedStringKeys.
So NSAttributedString.Keys and we are going to use the foreground color and
that will be let say a UIColor of red. Okay! Next up what we want to do is
have a font. So NSAttributedString.Key, there we go.
Where is the capital K, key dot font, okay and that will
let's say a UIFont and I will just simply use a system font of size
let's say 50 here and I believe we can add a weight here too.
So weight: .heavy, okay. Let's see if that feels up and we need to, yes we need to have it
inside an array. So all of these two, let me just add those parentheses
correctly. Yep! Everything is a okay. Now we want to change, let's just see this
how this works. Most probably if you would do this in a
UIKit project you would have auto completion but that is okay.
So now you can see that we have a larger font and we have a red foreground color for
that navigation bar title. How awesome is that.
Now next up we want to kind of I will just show you how you can add a back
indicator image. We will not test this out because we are not moving away and
so one but maybe we will. Let's just type that out UINavigationBar. appearance()
and we are going to set back
indicator image, okay. That's back indicator image and that will be a UIImage
and with a system name. System name and I will use a chevron. So chevron.left.2, okay.
And finally we want to set also the back
indicator transitioning mask image, okay.
UINavigationBar.appearance() .backIndicatorTransitionMaskImage
How hard is it without autocomplete, okay.
And that will be again UIImage with a systemName. So I will
just simply copy this out.
Okay! So it's up to you to create a new navigation, a new view, the secondary view
for you to show in the navigation and you will see that Chevron right there.
So it's really, really powerful stuff. Now one thing that you might have noticed is
that when I just scroll all the way up you see that it's kind of dug that we
have that transparency even when we are moving to the in aligned style of the
navigation bar. So there's a quick fix for that and what that does and all
of this is working only in the ScrollView because yeah we want to scroll all
the way up. So to fix that we are going to use a VStack. So add that ScrollView
inside that VStack and just add a simple spacer on top of the ScrollView.
So if we build and run right now, we will don't have that really quirky
effect, okay. How awesome is that and I believe there
are some issues here with the spacing too but yeah you get the whole idea.
So now you know how you can create a transparent UINavigationBar. Now if you
liked this video make sure to hit that notification bell because in my next
video I will be talking about how you can build beautiful charts in Swift.
So go ahead hit that like button, subscribe to the channel and while you wait for
that make sure to check out these videos as well too. I talked a lot about SwiftUI,
iOS development in general and as usual I will see you in the next one.