Customizing NavigationBar

Many people often come up with a problem of customizing their <b><i>UINavigationBar</i></b> instances, so I'd like to push my own experience right here hoping it may help someone somewhere. :)

This is how it looks like.

As you may see in the picture above, there are 2 types of tint colors - for Bar's subviews and for the bar. First what you might want to change is the color of "background" for your Bar. In any way, it's not actually called "background" color but tint color, so let's call things their names. However, it's pretty simple to customize and set your own color.

Before we can start changing anything, we should understand where things come from to be capable of accessing appropriate instances working with data we'd like to change.

In Cocoa Touch API each <b><i>UIView</i></b> instance such as <b><i>UINavigationView</i></b> or <b><i>UITabBarView</i></b> has its object responsible for its appearance. This is a property that you can access without any instantiated object. This was done to achieve a better customizing process, since any change you make with instances of those types is applied for the whole application. Therefore all changes are going to be done inside of your <b><i>AppDelegate</i></b> class.

So let's go. Open <b><i>AppDelegate</i></b> class and add the following code in
application(_:didFinishLaunchingWithOptions:)</code> method:

/** Get an access of Bar's Appearance instance */
var navigationBarAppearace = UINavigationBar.appearance()

/** Change the color for all subviews */
navigationBarAppearace.tintColor = colorFromHex(hexCode: 0xffffff)

/** Change the color for the Bar */
navigationBarAppearace.barTintColor = colorFromHex(hexCode: 0xFF5E3A)

We haven't discussed the process of getting a color with its hex code though. It's followed by RGB model - you've got a hex value of a color e.g. 0xFFFFFF</code>. Now we should divide the given value into 3 pieces for red, green and blue value appropriately: 0xFF</code>, 0xFF</code> and 0xFF</code>. That's a simple math we might do with the solid value. Let's go ahead to the code:

func colorFromHex(#hexCode: Int) -> UIColor {
     /** line 1 */
     let red = ((hexCode & 0xFF0000) >> 16) 
     let green = ((hexCode & 0xFF00) >> 8)
     let blue = ((hexCode & 0xFF))

     let rd: CGFloat = CGFloat(red) / 255.0
     let gr: CGFloat = CGFloat(green) / 255.0
     let bl: CGFloat = CGFloat(blue) / 255.0

     return UIColor(red: rd, green: gr, blue: bl, alpha: 1.0)
}

In a short, we get parts of the value with getting its lowest byte and applying a particular offset. If we've got a value of 0xFFFFFF</code>, then red</code> constant has a value of 0xFF</code> (first two "Fs"). And so forth...

To sum up, we have gone through a pretty long way of good understanding of things we work with customizing our NavigationBar. I'd like to hope you've found this article useful. Thanks for being with me and see you next time! :)