I’m still in Avoriaz and after almost a week of racing down the slopes on ski’s, I came up with the idea to change my ski’s for a board, just for fun. To keep a short story even shorter; The adventure lasted half an hour, in which I managed to make two neck breaking falls. My friends filmed me. Watching it back was an absolute disgrace. I traveled the piste at such a pathetic slow speed, it’s a miracle I still was able to fall so hard, my butt still hurts at the moment. Anyways, last time I done that. Let’s get back to coding, a less dangerous activity.. I want to talk about the navigationBar and specifically the navigationItems (barbuttonitems and titleview) it contains.

 

The navigationcontroller can contain multiple items. Typically you might have a titleView in the middle of the bar and one ore more barbuttonitems on the left and right side. Creating barbuttonitems is easy:

1. First create the barbuttomitems and modify them if needed
2. Then add them to the navigationbar

 

Create barbuttons or views and modify if needed

For the titleView of the navigationbar (the one in the middle) most of the time you simply use a text or use an image as titIeImage. For the barButtonItems you obviously need to create UIButtons, which also can contain text or an image. In both cases however, you first need to give it a frame (otherwise it won’t be visible).

 

It’s also possible to modify the color of the image used, using the .whitRenderingMode( . ..) method on the image. With .whitRenderingMode( .AlwaysOriginal) the image keeps its original color. .whitRenderingMode( .AlwaysTemplate) sets the image to a template color, so you can give it any color you want afterwards via the tintcolor of it’s containing view. In the example below I use .AlwaysTemplate so I can give al barbuttons the same twitterBlue color. Of course twitterBlue isn’t a standard color, so I created an extension on UIColor with a static func called twitterBlue that simply returns my twitterBlue color. Here’s how that looks:

 

When using images; in order to keep the image in it’s original aspect ratio, you need to set the contentMode to .scaleAspectFit.

 

Put the items in the navigationBar

Of course we have to add the created barButtons and the titleImage to the navigationBar. This is pretty straightforward. One thing I want to mention is that the left and right side of the navigationBar can contain multiple barbuttonItems. We see this in the example below at the right side of the navBar. Instead of creating a single item, we create an array of barbuttonitems. One warning: the barbuttonitems in the array are created from right to left. In this example the composeButton will be far right and the searchbutton will be just before that.

Let’s view the whole code:

 

 

That’s it for now! Happy coding, happy traveling!